jquery中的置顶,置底,向上,向下的排序功能
css
.selectedLi{background: #f0ad4e;color:#fff;}
html部分
<ul class="seetSelect2" id='sysAllSet'>
<li value="1" index='1'>集团考核保障</li>
<li value="2" index='2'>业务全景监控视图</li>
<li value="3" index='3'>专家辅助分析</li>
<li value="4" index='4'>动态基线</li>
<li value="5" index='5'>综合报表</li>
<li value="6" index='6'>告警监控综合管理</li>
<li value="7" inddex='7'>告警分析系统</li>
</ul>
<button type="button" class="btn btn-default" id='setTop'>置顶</button>
<button type="button" class="btn btn-default" id='toTop'>向上</button>
<button type="button" class="btn btn-default" id='toBottom'>向下</button>
<button type="button" class="btn btn-default" id='setBottom'>置底</button>
js部分
//事件初始化:点击li时候,为当前点击的li添加样式,方便后续操作 判断 是否选中当前点击的元素(用的是ul li,不是select option);
$("#sysAllSet li").click(function(){
$(".seetSelect2 li").removeClass('selectedLi');
$(this).addClass('selectedLi');
});
$("#sysAllSet li").dblclick(function(){//双击元素 去除样式类名 取消当前选中
$(this).removeClass('selectedLi');
});
//置顶
$("#setTop").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
if (selLi.index() != 0) {
selLi.fadeOut(10).fadeIn(100);
$("#sysAllSet").prepend(selLi);
}else{
alert("已经置顶啦~");
return;
}
}else{
return false;
}
}); //置底
$("#setBottom").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
var length = $("#sysAllSet>li").length;
if (selLi.index() != length-1) {
selLi.fadeOut(10).fadeIn(100);
$("#sysAllSet").append(selLi);
}else{
alert("已经置底啦~");
return;
};
}else{
return false;
}
});
//向上
$("#toTop").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
if (selLi.index() != 0) {
selLi.fadeOut(10).fadeIn(100);
selLi.prev().before(selLi);
}else{
alert("已经置顶啦~");
return;
}
}else{
return false;
}
});
//向下
$("#toBottom").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
var length = $("#sysAllSet>li").length;
if (selLi.index() != length-1) {
selLi.fadeOut(10).fadeIn(100);
selLi.next().after(selLi);
}else{
alert("已经置底啦~");
return;
}
}else{
return false;
}
});
jquery中的置顶,置底,向上,向下的排序功能的更多相关文章
- iOS UILabel 文字 置顶/置底 实现
iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 ...
- myeclipse 中 svn 更新 提交 同步资源库 详细解释下他们的功能
原理是这样的 svn服务器一般放在公共的服务器上,大家连这个服务器,在MyEclipse上使用svn控件 可以下载svn上的项目至本地,所以很多公司将开发要用到的软件都放在svn上,有同事来只要连上s ...
- java中jre\bin目录和jdk\bin目录下的工具功能介绍
转自:https://blog.csdn.net/eclipse_yin/article/details/51051096 jre/bin目录下面工具说明 javac:Java编译器,将Java源代码 ...
- Thinkphp 3.2中文章详情页的上一篇 下一篇文章功能
额 简单2句话解释下 获取上一篇文章的原理,其实就是以当前文章的id为起点进行进行查询,例如id=5的文章 select * from article where (article_id<5 ...
- WinForm SetWindowPos窗口置顶使用说明
就是有时候窗口不能够成功置顶,这时需要重新切换下标签,就可以置顶了,本文介绍C# SetWindowPos实现窗口置顶的方法: [DllImport("user32.dll", C ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- Ajax在jQuery中的应用---ajax()方法
在jQuery中,$.ajax()方法是最底层的方法,也是功能最强的方法.其调用的语法格式为: $.ajax([options]) 其中,可选项参数[options]为$.ajax()方法中的请求设置 ...
- jQuery 元素的选中, 置顶、上移、下移、置底、删除
如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...
随机推荐
- URAL 2021 Scarily interesting! (贪心+题意)
题意:给定两个队伍的每个人的得分,让你安排怎么比赛才能使得观众知道冠军的时间最长. 析:贪心,很简单,就是先开始总分高的先出最差劲的,总分低的先出最厉害的,这个题当时实在是读的不明白啊,WA了好多次. ...
- [转]简短介绍 C# 6 的新特性
原文地址:http://www.oschina.net/translate/briefly-exploring-csharp-new-features 几周前我在不同的地方读到了有关C#6的一些新特性 ...
- 【mysql 的 union 和unionall】
Mysql的联合查询命令UNION和UNION ALL,总结了使用语法和注意事项,以及学习例子和项目例子,需要的朋友可以参考下 一.UNION和UNION ALL的作用和语法 UNION 用于合... ...
- 怎么触发gridview 的SelectedIndexChanged事件?
<asp:GridView onclick="javascript:SelectedIndexChanged()" ID="GridView1" runa ...
- C# BackgroundWorker(异步线程)
日期:2018年11月28日 环境:Windows 10,VS2015 前言 .NET 类库中提供了一个快捷使用多线程的帮助类BackgroundWorker,能够快速创建一个新的线程,并能报告进度 ...
- Pillow不支持color emoji font!
我想在MAC下面用pillow把一些文本转换成PNG图片,在转普通文字的时候都没问题,但在遇到emoji字符的时候就搞不定了,代码如下: import loggingimport PIL.Image ...
- bzoj 2827: 千山鸟飞绝
2827: 千山鸟飞绝 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 802 Solved: 228[Submit][Status][Discuss ...
- pod 安装
cocoapods 简介: CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库(这些类库必须是CocoaPods本身所 ...
- js new一个对象的过程,实现一个简单的new方法
对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了.下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程. // ES5构造函数 let Parent ...
- 关于VS2017提示I/O文件操作函数需要加上_s的解决办法
最近不论是在写网络编程还是在写小项目时候,都会提示让我用加个_s的函数........ 其实加上_s这个函数是为了确保函数的安全性,确保不会有内存不够或者溢出的情况.但是每次都需要重新看一下_s函数的 ...