[原]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登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.