本文转自：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)

转载于:https://www.cnblogs.com/freeliver54/p/7682096.html

[转]jQuery ListBox Plugin(ListBox插件)相关推荐

  1. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  2. 8 个 jQuery 的 PDF 浏览插件

    尽管在web设计师眼里 jQuery PDF 查看器不是一个受欢迎的资源,但是它们在适当的项目里非常有用.这篇文章不是浮华的一个巨大的资源列表,这是真正有用的资源.你无翻阅多少 Google 搜索页面 ...

  3. 流行的jQuery信息提示插件(jQuery Tooltip Plugin)

    流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning, by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好,会 ...

  4. 如何写一个Jquery 的Plugin插件

    JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插 ...

  5. 30个非常流行的提示信息插件（jQuery Tooltip Plugin）

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  6. jQuery Media Plugin 插件实现在线视频播放业务

    jQuery Media 简介 Jquery Media Plugin是一款页面内容嵌套多媒体的插件.支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows ...

  7. 流行的jQuery信息提示插件(jQuery Tooltip Plugin)【转】

    流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning , by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好, ...

  8. （转）jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  9. Jquery JQZoom Plugin 放大鏡效果 Two

    Jquery JQZoom Plugin 放大鏡效果 Two Jquery1.3.2Lib下載地址:http://files.cnblogs.com/davidzhou/jquery-1.3.2.ra ...

最新文章

  1. 考前自学系列·计算机组成原理·查询方式/中断方式/DMA方式的适用范围及判断
  2. 【机器学习基础】前置知识（一）：数学符号及希腊字母
  3. php把400个数组建二维,请教怎么将多维数组转换为二维数组
  4. LVS（3）——针对于真实主机的增删改操作
  5. Linux环境下Flume的安装
  6. 主表的引用字段中找不到唯一的索引_不用找了，大厂在用的分库分表方案，都在这里！...
  7. jwt如何防止token被窃取_如何使用 NodeJS 实现 JWT 原理
  8. LoadRunner11录制APP脚本（2）
  9. Kafka follower副本为什么不对外提供服务
  10. 转载python操作wps V9 API,测试好用
  11. 互联网公司的敏捷开发是怎么回事？这一份软件工程书单送给你！
  12. c语言电机正反转,步进电机正反转(单片机C语言程序设计).doc
  13. 三星s6如何打开位置服务器,三星S6开发者选项在哪里？怎么打开
  14. matlab海龟交易策略,海龟交易策略
  15. 电影资源 BT PT下载的电影命名 规则 资源 详解
  16. 计算机蓝屏无法启动不了系统怎么办,电脑蓝屏重启开不了机怎么回事_电脑蓝屏之后启动不了的处理办法－系统城...
  17. 美通社企业新闻汇总 | 2019.3.1 | 东京是亚洲商务休闲最佳目的地；贺恩霆担任赛诺菲中国区总裁...
  18. python气象实时监控系统_Python绘图 | 国家气象局开源预报检验库（多图预警）
  19. Excel表格的密码设置与取消
  20. TcaplusDB君 · 行业新闻汇编（12月20号）

热门文章

  1. openssl lhash 数据结构哈希表
  2. DP练习（初级）：ZigZag
  3. JavaScript 中 2个等号（==）和 3个等号（===）之间的区别
  4. apache简单安全配置
  5. 自动启动和关闭Oracle 脚本
  6. windows系统下，双网卡电脑更改默认路由的命令-转
  7. [sed] linux sed 批量替换字符串-转
  8. id长度 雪花算法_分布式系统中唯一ID算法之雪花算法
  9. L1-061 新胖子公式 (10 分)-PAT 团体程序设计天梯赛 GPLT
  10. LeetCode199. Binary Tree Right Side View