专注前端行业精选
使用Jquery和bootstrap实现上移、下移、置顶、至底部等功能
作者:鹏仔先生日期:2020-06-03 11:33:30浏览:2491分类:JavaScript
最近休息了两个月,中途考了驾照,成功拿到驾照。
这几天刚换了家工作,主要做PC端,然后遇到了这个效果,就分享给大家咯!
一个使用jq和bootstrap实现的上下移动置顶的效果,如上图所示
附demo
下载地址:点击下载
需自行引入 jq和bootstrap 的js与css,demo里面已整理,可自行下载demo查看
代码如下(代码我从项目中复制粘贴过来,可能多一些没有用的,自行删除修改):
.wrapper{ width: 100%; height: 100%; background: #000; } .bottom-pop-up{ width: 640px; max-height: 494px; background: #f8f8f8; border-radius: 4px; position: fixed; left: 50%; top: 50%; margin-left: -320px; margin-top: -247px; } .bottom-pop-up-center{ width: 100%; } .bottom-pop-up-menu{ width: 100%; background: #f1f2f6; display: flex; padding: 0 30px; } .bottom-pop-up-menu p{ font-size: 14px; color: #6971a0; line-height: 52px; display: block; width: 25%; } .bottom-pop-up-list{ overflow-y: scroll; height: 300px; background: #fff; } .bottom-pop-up-list .table-bordered{ border: 0; } .bottom-pop-up-list tr{ border-bottom: 1px solid #f3f3f5; display: flex; padding: 0 30px; } .bottom-pop-up-list tr td{ border: none !important; width: 25%; padding: 0 !important; line-height: 50px !important; } .bottom-pop-up-show .iconright{ color: #00cf24; cursor: pointer; } .bottom-pop-up-show .iconerror{ color: #ff4540; cursor: pointer; } .bottom-pop-up-order .iconfont{ color: #716f70; font-weight: bold; border: none; padding: 0 15px 0 0; cursor: pointer; } .bottom-pop-up-operation .iconfont{ color: #aaadb2; border: none; padding: 0 15px 0 0; cursor: pointer; } .bottom-pop-up-order .btn-primary{ background-color: transparent; border-color: transparent; }
<body> <div class="wrapper"> <div class="bottom-pop-up" id="BottomPopUp"> <div class="bottom-pop-up-center"> <div class="bottom-pop-up-menu public-flex"> <p>栏目</p> <p>显示</p> <p>排序</p> <p>操作</p> </div> <div class="bottom-pop-up-list"> <table class="table table-bordered comTable table1"> <tr> <td> 留言板 <input type="text" name="city[]" value="11001" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconright"></span> <input type="text" name="city[]" value="11001" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11001" hidden> </td> </tr> <tr> <td> 首页 <input type="text" name="city[]" value="11002" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconerror"></span> <input type="text" name="city[]" value="11002" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11002" hidden> </td> </tr> <tr> <td> 关于我们 <input type="text" name="city[]" value="11003" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconerror"></span> <input type="text" name="city[]" value="11003" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11003" hidden> </td> </tr> <tr> <td> 联系我们 <input type="text" name="city[]" value="11004" hidden> </td> <!-- 显示 --> <td class="bottom-pop-up-show"> <span class="iconfont iconright"></span> <input type="text" name="city[]" value="11004" hidden> </td> <!-- 顺序 置顶、上移、下移、置低 --> <td class="bottom-pop-up-order"> <span class="iconfont iconhighest btn top"></span> <span class="iconfont iconhigh btn up"></span> <span class="iconfont iconlow btn down"></span> <span class="iconfont iconlowest btn stick"></span> </td> <!-- 顺序 编辑、添加、删除 --> <td class="bottom-pop-up-operation"> <span class="iconfont iconedit"></span> <span class="iconfont iconaddEdge"></span> <span class="iconfont icondelete del"></span> <input type="text" name="city[]" value="11004" hidden> </td> </tr> </table> </div> </div> </div> </div> </body>
<script> //上下移动、置顶、置底操作 $(function(){ //上移 var $up = $(".up"); $up.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != 0) { $tr.fadeOut().fadeIn(); $tr.prev().before($tr); } }); //下移 var $down = $(".down"); var len = $down.length; $down.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != len - 1) { $tr.fadeOut().fadeIn(); $tr.next().after($tr); } }); //置顶 var $top = $(".top"); $top.click(function(){ var $tr = $(this).parents("tr"); $tr.fadeOut().fadeIn(); $(".table1").prepend($tr); $tr.css("color","red"); }); //置底 var $stick = $(".stick"); $stick.click(function(){ var $tr = $(this).parents("tr"); $tr.fadeOut().fadeIn(); $(".table1").append($tr); $tr.css("color","red"); }); //删除 var $del = $(".del"); $del.click(function(){ $(this).parents("tr").remove(); }); //隐藏/隐藏 var $iconerror = $(".iconerror"); $iconerror.click(function(){ if ($(this).hasClass('iconerror')) { $(this).removeClass('iconerror'); $(this).addClass('iconright') } else { $(this).removeClass('iconright'); $(this).addClass('iconerror') } }); var $iconright = $(".iconright"); $iconright.click(function(){ if ($(this).hasClass('iconright')) { $(this).removeClass('iconright'); $(this).addClass('iconerror') } else { $(this).removeClass('iconerror'); $(this).addClass('iconright') } }); }); </script>
猜你还喜欢
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。