[原]jQuery ListBox Plugin(ListBox插件)

标签： jquery listbox plugin | 发表时间：2011-09-28 17:26 | 作者：think8848 We_Get
出处：http://www.cnblogs.com/

转载请注明作者(think8848)和出处(http://think8848.cnblogs.com)。未经作者同意，请勿擅自修改本文内容。

这两天项目中要用到类似于ListBox的功能了，本以为有很多jQuery插件，没有想到的是，居然没有搜到好用的，咋办呢，自已动手丰衣足食吧，于是花了一个晚上的时间做出来一个，上效果图：

该ListBox插件支持拖放，多选。

应用说明:

HTML:

<ul id="left"></ul>

Javascript:

            $('#left').listbox({
                data: '/Data/Index?' + new Date().getTime(),
                width: 200,
                height: 300
            });

默认选项说明:

Options:

　　dnd: 是否支持拖放，默认false

　　dndscope: 支持拖放时相关的作用域，举例来说，即，A ListBox和B ListBox的dndscope相同，则这两个ListBox中的元素是可以相互拖放的

　　height: 地球人都知道，默认'auto'

　　width: 火星人也知道了，默认'auto'

　　data: 数据源，即可以是url也可以是对象数组，默认为[]；

　　　　无论是远程还是本地数据均有两种格式：

　　　　1. ｛value: '', text: ''}

　　　　2. ['', '']，在这种情况下，请将value置于第一个元素

　　multiselect: 是否允许多选，默认false

　　ajaxsettings: 如果需要从远程获取数据，这里定义了$.ajax的默认选项

　　　　默认:

　　　　type: 'GET'

　　　　dataType: 'json'

　　　　success: funtion(jsonData){}

Events:

　　itemselected: ListBox中的元素选中的被触发；

　　　　定义：function(data){}，参数data为选中的元素数组

Methods:

　　addItem: 添加一个元素；

　　　　定义：function(data){}，其中data类型为{value: '', text: ''}或['', '']

　　　　示例：　　　　

            $('#btnAddItem').click(function () {
                $('#left').listbox().addItem({ value: 3, text: 'c' });
            });

　　addRange: 添加元素数组;

　　　　定义：function(data){}，其中data类型为由{value: '', text: ''}或['', '']组成的数组

　　　　示例:　　

            $('#btnAddRange').click(function () {
                $('#left').listbox().addRange([{ value: 4, text: 'd' }, ['5', 'e']]);
            });

　　clear: 清除所有元素

　　　　定义: function(){}

　　　　示例:

            $('#btnClear').click(function () {
                $('#left').listbox().clear();
            });

　　getData: 获取与指定jQuery对象关联的数据

　　　　定义:function(a){},参数a为ListBox元素的a标签，ListBox元素的DOM结构为<li><a></a></li>

　　　　示例:

            $('#btnGetData').click(function () {
                var a = $('#left a:first');
                if (a.size() > 0) {
                    var data = $('#left').listbox().getData(a);
                    alert("{value: '" + data.value + "', text: '" + data.text + "'}");
                }
            });

　　getDatas: 获取所有数据

　　　　定义: function(){}

　　　　示例:

            $('#btnGetDatas').click(function () {
                alert($('#left').listbox().getDatas().length);
            });

　　getSelected: 获取所有选中的数据

　　　　定义:function(){}

　　　　示例:

            $('#btnGetSelected').click(function () {
                alert($('#left').listbox().getSelected().length);
            });

　　removeItem: 删除指定value值的元素

　　　　定义:function(data){}，参数data可以为单个值，也可以为{value:''}对象

　　　　示例:

            $('#btnRemoveItem').click(function () {
                $('#left').listbox().removeItem({ value: 1 });
            });

　　removeRange: 删除指定value值数组的元素

　　　　定义:function(data){}，参数data为单个值，或{value:''}对象的数组

　　　　示例:

            $('#btnRemoveRange').click(function () {
                var datas = $('#left').listbox().getDatas();
                $('#left').listbox().removeRange(datas);
            });

　　setSelection: 选中指定value值的元素

　　　　定义: function(value){}，参数value为单个值

　　　　示例:

            $('#btnSetSelection').click(function () {
                $('#left').listbox().setSelection(1);
            });

调用方法时，可以也可以使用$('#selector').listbox('methodName',arguments)方式，例:

            $('#btnCallMethod').click(function () {
                var a = $('#left a:first');
                if (a.size() > 0) {
                    var data = $('#left').listbox('getData', a);
                    alert("{value: '" + data.value + "', text: '" + data.text + "'}");
                }
            });

　　

OK,至此我的需求基本满足了，就先这样吧，欢迎在试用过程中提交bug或者改进建议，谢了

源代码与示例下载(VS2010 ASP.NET MVC 3)

　　

　　

　　

作者: think8848 发表于 2011-09-28 17:26 原文链接

评论: 2　查看评论　发表评论

最新新闻：
· Google炮轰微软：专利授权就是在敲诈(2011-09-29 08:13)
· 下一代Android运行视频曝光(2011-09-29 08:11)
· 诺基亚澄清缩减传闻 支持塞班到2016年(2011-09-29 08:10)
· Amazon 的梦幻夜 — 内容与终端(2011-09-29 08:08)
· Windows运行时的设计细节(2011-09-29 08:07)

编辑推荐：Web前端开发中的MCRV模式

网站导航：博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [jquery listbox plugin] 推荐：

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意，请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了，本以为有很多jQuery插件，没有想到的是，居然没有搜到好用的，咋办呢，自已动手丰衣足食吧，于是花了一个晚上的时间做出来一个，上效果图：.

使用 jQuery Easing Plugin 增强动画过渡效果

- - 我爱水煮鱼
jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ，可以实现很多动画效果. 为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化.

Jenkins的plugin开发

- - CSDN博客研发管理推荐文章
       Jenkins强大的功能主要靠其丰富的plugin体现，之前的一篇博客《 Jenkins安装plugin》中介绍了如何找到并安装需要的plugin. 虽然目前已经有大量非常优秀的plugin可供使用，但是有时候仍需要自己开发一些满足项目特殊要求的plugin. 下面通过一个简单实例，介绍Jenkins的plugin的整个开发过程.

[译]InnoDB官方博客：InnoDB Plugin的性能和可伸缩性

- Eneri - P.Linux Laboratory
本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.penglixun.com/tech/database/plug-in-for-performance-and-scalability.html. 原文地址：http://blogs.innodb.com/wp/2009/03/plug-in-for-performance-and-scalability/.

Eclipse的Mat Plugin查找OOM使用一例

- - CSDN博客推荐文章
最近接手了一个老项目比较头痛. 头痛的原因是这个代码的编写者已经离开了公司，而且代码基本没有注释，结构混乱并且还有严重的内存泄漏问题. 其实接手这个项目最大需要解决的问题就是内存泄漏问题. 由于这个老项目使用JDK1.5，所以像JDK1.6自带很多内存检测工具都派不上用场了. 比如：jdk1.5 使用的jmap -heap 生成的dump文件用eclipse的mat就打不开.

Internet Explorer 10 將分成兩個版本，Metro 版本將不支援 plugin

- SotongDJ - Engadget 中文版
至於支援的形式，相信聰明的讀者們應該也猜到了，就是 Windows 8 的 Metro 介面將會使用「新世界」的瀏覽器，也就是像 Windows Phone 7 一樣，不會支援 Flash（當然介面也相近），至於在傳統的 Windows 介面上，使用體驗將會和現在的 Internet Explorer（或者是其他的瀏覽器）一樣，將繼續提供 Flash 和其他插件的支援.

Internet Explorer 10 将分成两个版本，Metro 版本将不支持 plugin

- 夜の猫 - Engadget 中国版
至于支持的形式，相信聪明的读者们应该也猜到了，就是 Windows 8 的 Metro 界面将会使用「新世界」的浏览器，也就是像 Windows Phone 7 一样，不会支持 Flash（当然接口也相近），至于在传统的 Windows 接口上，使用体验将会和现在的 Internet Explorer（或者是其他的浏览器）一样，将继续提供 Flash 和其他插件的支持.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.