转载请注明作者(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(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)
