[转]jQuery ListBox Plugin(ListBox插件)-白红宇

[转]jQuery ListBox Plugin(ListBox插件)

阅读量：6315 次

发布时间：2019-06-22

本文共 3345 字，大约阅读时间需要 11 分钟。

本文转自：

转载请注明作者(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 + 
"'}"
);
    
}
});
         
       