|
<strong><font style="COLOR: #ff0000">1：排序(Sortable)组件可以将页面上的一组元素变成可排序的</font></strong>，可用于定义一个可排序的元素列表，然后，通过拖动鼠标可以调整元素在列表中的位置<br><font style="COLOR: #0000ff">$('.selector').sortable(options);</font> <br><strong>简单实例：<br></strong><div class="codetitle"><span><a class="copybut" data="25938" id="copybut25938"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code25938"><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>sortable组件</title><br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="js/jquery.ui.core.js"></script><br><script type="text/javascript" src="js/jquery.ui.widget.js"></script><br><script type="text/javascript" src="js/jquery.ui.mouse.js"></script><br><script type="text/javascript" src="js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /><br><style type="text/css"><br>body {<br> text-align:center;<br> margin:0 auto;<br> padding:0;<br>}<br>#wrap {<br> margin: 10px auto 10px auto;<br> padding: 5px;<br> width: 450px;<br> height:300px;<br> background: #fff;<br> border: 5px solid #000;<br>}<br>h1 {<br> color:#006;<br> font-size:24px;<br> font-weight:bold;<br> margin-bottom:2px;<br> text-align:center;<br>}<br>#sortable {<br> list-style-type: none;<br> margin: 0;<br> padding: 0;<br> width: 100%;<br>}<br>#sortable li {<br> margin: 3px;<br> padding: 0.4em;<br> font-size: 16px;<br> height: 18px;<br>}<br>#sortable li span {<br> position: absolute;<br> margin-left: -1.3em;<br>}<br></style><br><script type="text/javascript"><br> $(document).ready(function(){<br> $("#sortable").sortable(); //将sortable变成可排序的<br> $("#sortable").disableSelection(); //使文本不可被选中<br> });<br></script><br></head><br><body><br><div id="wrap"><br> <h1>拖动鼠标调整下列选项的顺序</h1><br> <ul id="sortable"><br> <li class="ui-widget-content">星期一</li><br> <li class="ui-widget-content">星期二</li><br> <li class="ui-widget-content">星期三</li><br> <li class="ui-widget-content">星期四</li><br> <li class="ui-widget-content">星期五</li><br> <li class="ui-widget-content">星期六</li><br> <li class="ui-widget-content">星期七</li><br> </ul><br></div><br></body><br></html><br></div><br><strong>效果图：<br></strong> <img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-ef134314588e1be7ec8354d32dc9e8fa.png"><br><strong><font style="COLOR: #ff0000">2：关联排序列表<br></font></strong>通常将两个以上的列表同时进行排序称为关联排序列表，利用属性connectWidth属性设置一个选择符，这样就可以指定在不同的列表之间移动元素的顺序<br><div class="codetitle"><span><a class="copybut" data="17652" id="copybut17652"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code17652"><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>sortable组件</title><br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="js/jquery.ui.core.js"></script><br><script type="text/javascript" src="js/jquery.ui.widget.js"></script><br><script type="text/javascript" src="js/jquery.ui.mouse.js"></script><br><script type="text/javascript" src="js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /><br><style type="text/css"><br>.message_box {<br> width:180px;<br> height:200px;<br> filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);<br> float:left;<br> margin-right:10px;<br>}<br>#mask {<br> position:absolute;<br> top:0;<br> left:0;<br>width:expression(body.clientWidth);<br>height:expression(body.clientHeight);<br> background:#666;<br> filter:ALPHA(opacity=60);<br> z-index:1;<br> visibility:hidden<br>}<br>.message {<br> border:#036 solid;<br> border-width:1 1 3 1;<br> width:95%;<br> height:95%;<br> color:#036;<br> font-size:12px;<br> line-height:150%;<br> background:#FFF<br>}<br>.header {<br> background:#036;<br> height:22px;<br>  |
|
转播
