前两天遇到朋友提到listbox.
所以心血来潮,花了一下午时间自己使用jquery,利用列表标签实现了一个listbox.
代码还未来得及优化,但功能已实现并可以使用,在此希望与大家分享探讨。
如有不足之处,诚恳接受各位的建议和意见,欢迎评论。
源码demo下载:jquery-listbox-2.2
效果图:
一.设计思路:
1.标签的使用:既然是列表,那无疑选择使用列表标签(ul,ol)等比较方法,考虑到,如果需要数字的修饰,最终采用ol标签
2.jquery自定义函数:相信网上已有很多教程,在此不赘述。有一点需要提一下,最开始使用的是(function ($) {}(jQuery));这种方式,但在ie中虽然能执行,然会报错。后来换成
(function ($) {}($));具体什么原因,未详查。
3.创建内容项:其实就是根据传进来的数据生成li标签并加入到ol标签中。
4.上移,下移,删除 功能:要实现这个,重点在于选中项,所以我用了一个全局变量 onElement 来标识被选中的项。上移的时候,将此项插入到他的prev()项前面。下移同理,使用next(),删除则使用remove()
5.拖拽:本来jquery ui里面有拖拽功能的实现,但如果仅为了推拽这个功能引入jquery ui这个库,就有点多余了,所以在网上找了一个很小的推拽插件:jquery drag and drop。
6.撤销删除:类似回收站,设置一个全局变量,数组。每次删除时,将被删除的项放入数组中的第一项。在撤销时,判断如果数组中有内容,则将第一项加入列表中,并再次进行拖拽的绑定。(注:在撤销删除后有一个BUG,无法将其他项推拽到第一位,但第一位的项能被推拽到其他位置。如果没法接受此bug,可以考虑去掉“撤销删除”功能或“推拽”功能。)
7.键盘事件:考虑到操作较多,绑定键盘时候的时候,要求传入操作标识数组,而不是每一个操作都进行单独的方法。
/*绑定键盘事件*/ $.fn.bindKeyboardEvent = function (keyArray) { if (keyArray == null) return var isMoveUp = $.inArray("moveup", keyArray) > -1; var isMoveDown = $.inArray("movedown", keyArray) > -1; var isSelectedUp = $.inArray("selectedup", keyArray) > -1; var isSelectedDown = $.inArray("selecteddown", keyArray) > -1; var isRevoke = $.inArray("revoke", keyArray) > -1; var isDelete = $.inArray("delete", keyArray) > -1; var isCtrl = false; var listbox = this; $(document).keydown(function (e) { if (e.which === 17) isCtrl = true; var keycode = e.which; switch (keycode) { case 90: if (isCtrl && isRevoke) { runRevokeElement(listbox) }; break; case 38: if (isCtrl && isMoveUp) { runUp(true); } if (isSelectedUp && !isCtrl) { runUp(false); }; break; case 40: if (isCtrl && isMoveDown) { runDown(true); } if (isSelectedDown && !isCtrl) { runDown(false); }; break; case 46: if (isDelete) { runDelete(); }; break; } }).keyup(function (e) { if (e.which === 17) isCtrl = false; }); }
8.css样式:可以在css文件中自定义样式。
以上为所有设计思路,其实思路挺简单,只是做起来花费一些时间而已。
二.测试浏览器
ie:7 8 9 10 ;firefox 25.0.1 可用。其他浏览器未测试。
三.实现和使用方式
实现和使用方式 在源码中有详细的注释,有什么疑问可以参见源码。
作者:jiangteng
注:转载时请注明出处和作者。