怎样通过sortable办法实现鼠标对元素从新排序结果
jQuery UI包括了很多保持状态的小部件,所以说不管是创立高度交互的web利用程序还是向页面增加一个日期选中器控件,jQuery UI都是一个完善的选中。并且所有的 jQuery UI 小部件都使用雷同的模式,所以只学会其中一个,其他的小部件也将会使用。今天我们将要介绍jQuery UI中一个强大的插件,它的功效主要用于排序。接下来在文章中为大家具体介绍,但愿对大家有所帮忙。
【引荐课程:jQuery UI教程】
jQueryUI供给了sortable()办法,可以使用鼠标对列表或网格中的元素停止从新排序。
它有两种情势使用:
$(selector,context).sortable(options)办法
$(selector,context).sortable(“action”,[params])办法
$(selector,context).sortable(options)办法
表示声明的HTML元素包括可互换的元件。该选项参数为对象,指定从新排序期间触及的元素的行动
例:使用占位符
设定当排序动作发生时,空白占位符的CSS样式
外部引入jQuery UI插件
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
代码:
#sortable { list-style-type: none; margin: 0; padding: 0; width:360px; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .highlight { border: 1px solid #333; font-weight: bold; font-size: 45px; background-color: #ccc; } .default { background: #b7ecf3; border: 1px solid #DDDDDD; color: #444; } </style> <script> $(function() { $( "#sortable" ).sortable({ placeholder: "highlight" }); }); </script>
结果图如下:
$(selector,context).sortable(“action”,[params])办法
可以施行对可排序的元素,例如,以防止位移的动作。该操纵在第一个参数中指定为字符串,并且可选,可以基于给定的操纵供给一个或多个参数。
根本上,这里的动作只不外是jQuery办法,我们可以以字符串的情势使用它们
例:使用toArray()办法
此办法按排序次序返回可排序元素的id值数组。此办法将Options作为参数,以自定义序列化或排序次序
<style> #sortable{ list-style-type: none; margin: 0; padding: 0; width:300px; float:left;} #sortable li{ margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .default { background:#b7ecf3; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $('#sortable').sortable({ update: function(event, ui) { var productOrder = $(this).sortable('toArray').toString(); $("#sortable-1").text (productOrder); } }); }); </script>
结果图:
总结:以上就是本篇文章的全部内容,但愿通过这篇文章可以让大家对jQuery UI的使用有所理解
以上就是怎样通过sortable办法实现鼠标对元素从新排序结果的具体内容,更多请关注百分百源码网其它相关文章!