[转]jQuery ListBox Plugin(ListBox插件)

本文转自：http://www.cnblogs.com/think8848/archive/2011/09/28/2193990.html

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

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

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

应用说明:

HTML:

?

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

Javascript:

?

$('#left').listbox({

    data: '/Data/Index?' + new Date().getTime(),

     200,

    height: 300

});

默认选项说明:

Options:

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

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

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

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

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

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

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

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

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

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

　　　　默认:

　　　　type: 'GET'

　　　　dataType: 'json'

　　　　success: funtion(data){}

Events:

　　2011.9.30 1.1版删除

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

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

　　2011.9.30 1.1版新增

　　selectchange: 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);

});

　　2011.9.30 1.1版新增

　　reload: 重新加载ListBox中的数据

　　　　定义:function(data,ajaxsettings){}，参数data，ajaxsettins定义同Options中同名属性data的定义

　　　　示例:　　　　

?

$('#btnReload').click(function () {

    $('#left').listbox().reload({ data: '/Data/Index', ajaxsettings: {

        data: { id: 'a' }

    }

    });

});

　　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)