[转]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(),
     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)

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值