- 浏览: 2151245 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
sunzeshan:
找了很久,用了这个插件解决问题啦。谢谢
eclipse jetty debug source not found -
xiaosong0112:
您好,请问为什么要这样设置呢,原理是什么?在网上很多转帖都没有 ...
maven的jetty插件提示No Transaction manager found导致启动慢的解决方法 -
eimhee:
tjzx 写道畅搜谷歌:http://dian168.cc/打 ...
Google 镜像站搜集 -
tjzx:
畅搜谷歌:http://dian168.cc/打开的是“最火源 ...
Google 镜像站搜集 -
eimhee:
finallygo 写道你这属于"头痛医头脚痛医脚& ...
解决linux下too many file问题
In my work, I came across the need for a web control that would allow me to have two <select>
elements, and be able to easily transfer <option>
elements between them. The idea is to have a base list of options, from which you can choose a subset to be saved, or whatever you might wish to do with them. As a perk, I decided to add the extra feature of filters, which can be used to search for items contained within either box. Because the application I was developing this for was a legacy ASP app, I decided the easiest way to accomplish this goal would probably be javascript. To this end, I created the Dual Listbox plug-in. With this plug-in, all you have to do is create the HTML structure, in whatever configuration you like, and give the elements of the control IDs. The plug-in will do the rest of the work for you. If you like this plug-in (or I suppose even if you don't), please do me a favor by heading over to its project page on jQuery's website
and rating it, so that other users can benefit from your experience.
Implementation
To get started, you will need the following:
- The Dual Listbox plug-in source (both uncompressed and minified versions)
- The latest version of jQuery
Once you have these, and have included them in your project and the file you intend to use them in, Dual Listbox is as easy as:
$.configureBoxes();
Yup, that's it! Of course, if you don't want to use the default settings, you'll have to get a bit fancier but that's the basic idea. If you do want to rock the boat a little I've provided an options
parameter, which is a JSON object which will allow you to pick and choose the settings you like. See section Options
for a full listing and description of the available options.
Demo
A brief description of how to use this control: Select one or more items from one of the boxes, then click the ">" or "<" button to move the selected items to the opposite box. Click the ">>" or "<<" button to move all items from one box to the other. You may also double-click an individual item to move it to the other box. Type into either filter box to limit the values in the corresponding <select>
to those items that contain the string that you enter. Note that while you are filtering, all move operations affect ONLY visible elements (aka, if you filter box one, then move all from one to two, elements that did not match your filter will not be moved to box two). Click the "X" button to clear the filter.
- Dual Listbox Plug-in for jQuery Demo (default options)
- Dual Listbox Plug-in for jQuery Demo (in 'copy' mode, filtering removed)
- Dual Listbox Plug-in for jQuery Demo (multiple instances, with different options)
Transfer Modes
This plug-in allows you to "transfer" the <option>
elements between the <select>
s in two distinct ways:
-
Move
- In this mode,
<option>
elements will be removed from the<select>
in which they currently reside and moved to the other<select>
. This is the default. -
Copy
- In this mode, items in the first
<select>
will ALWAYS remain in the first<select>
(unless they are hidden by filtering). When they are selected for transfer they will be copied to the second<select>
and will be given the class 'copiedOption' in the first<select>
(my default styling for this class is yellow background but you may choose whatever styling suits you). If they are then transferred from the second<select>
, they disappear from the second<select>
, and the 'copiedOption' class is removed from the corresponding<option>
in the first<select>
.
Document Structure
Here is the default document structure (which I used to develop this plug-in):
000. | | | < table > |
001. | | | < tr > |
002. | | | < td > |
003. | | | Filter: < input type = "text" id = "box1Filter" /> |
004. | | | < button type = "button" id = "box1Clear" > X</ button > < br /> |
005. | | | < select id = "box1View" multiple = "multiple" style = " height :500px ;width :300px ;" > </ select > < br /> |
006. | | | < span id = "box1Counter" class = "countLabel" > </ span > |
007. | | | < select id = "box1Storage" > </ select > |
008. | | | </ td > |
009. | | | < td > |
010. | | | < button id = "to2" type = "button" > > </ button > |
011. | | | < button id = "allTo2" type = "button" > >> </ button > |
012. | | | < button id = "allTo1" type = "button" > << </ button > |
013. | | | < button id = "to1" type = "button" > < </ button > |
014. | | | </ td > |
015. | | | < td > |
016. | | | Filter: < input type = "text" id = "box2Filter" /> |
017. | | | < button type = "button" id = "box2Clear" > X</ button > < br /> |
018. | | | < select id = "box2View" multiple = "multiple" style = " height :500px ;width :300px ;" > </ select > < br /> |
019. | | | < span id = "box2Counter" class = "countLabel" > </ span > |
020. | | | < select id = "box2Storage" > </ select > |
021. | | | </ td > |
022. | | | </ tr > |
023. | | | </ table > |
<noscript></noscript>
You might be wondering why there are four <select>
boxes, instead of just two, as you might expect. These are there to allow the filtering functionality to operate smoothly in all browsers. I would like to have just added style="display:none;"
to elements that shouldn't be visible, but several browsers do not support hiding <option>
elements. Thus, the filtering works by moving elements that have been filtered out to this second hidden <select>
. If you are not planning on using filtering, you may omit the "storage" boxes (as well as the counters, filters, and clear buttons if you wish). Note that this structure is not required, as the plug-in relies on the ids of the elements to locate and manipulate them. I simply found this configuration easiest to work with while developing, but you should feel free to get creative.
Options
The following table has a listing of all the possible option settings, their default values, their valid values, and a brief description of each.
box1View | 'box1View' | Any valid HTML id string. | The id attribute of the first visible <select>
element. |
box1Storage | 'box1Storage' | Any valid HTML id string. | The id attribute of the first hidden <select>
element. (See section Document Structure
for an explanation of visible/hidden <select>
elements.) |
box1Filter | 'box1Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the first <select>
element. |
box1Clear | 'box1Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the first <select>
element. This is typically a button, but can technically be any element. |
box1Counter | 'box1Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>
s in the first <select>
element. (used when filtering). |
box2View | 'box2View' | Any valid HTML id string. | The id attribute of the second visible <select>
element. |
box2Storage | 'box2Storage' | Any valid HTML id string. | The id attribute of the second hidden <select>
element. |
box2Filter | 'box2Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the second <select>
element. |
box2Clear | 'box2Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the second <select>
element. This is typically a button, but can technically be any element. |
box2Counter | 'box2Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>
s in the second <select>
element. (used when filtering). |
to1 | 'to1' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>
s from the second <select>
to the first. |
to2 | 'to2' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>
s from the first <select>
to the second. |
allTo1 | 'allTo1' | Any valid HTML id string. | The id attribute of the element used to transfer ALL <option>
s from the second <select>
to the first. |
allTo2 | 'allTo2' | Any valid HTML id string. | The id attribute of the element used to transfer ALL <option>
s from the first <select>
to the second. |
transferMode | 'move' | 'move','copy' | The type of transfer to perform on moved items. See section Transfer Modes for a full description of each. |
sortBy | 'text' | 'text','value' | The value to sort <option>
elements by. 'text' causes them to sort alphanumerically (ascending) by the visible text of the option. 'value' causes them to sort alphanumerically (ascending) by their 'value' attribute. |
useFilters | true | true,false | True to enable filtering, false to disable it. If this setting is false, it is recommended that useCounters also be set to false, as the counters will not serve a purpose. |
useCounters | true | true,false | True to enable counters, false to disable them. |
useSorting | true | true,false | Sorting enforces a consistent sort order on the <option>
elements, regardless of what order they are transferred in. Set this to false if you do not want them to (or do not care if they) maintain a consistent order. |
- DualListbox-1.2.zip (4.3 KB)
- 下载次数: 38
- dual_preview.zip (22.8 KB)
- 下载次数: 34
发表评论
-
Start PageIndexHistoryLast Change
2010-12-15 00:22 1048The specifications should provi ... -
ajax upload
2010-11-19 13:22 0ajax upload The following cri ... -
兼容IE和FF获取Referer的JS方法
2010-11-11 10:11 4556众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准 ... -
jQuery优化
2010-09-16 08:30 5522之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。 ... -
jQuery add table row
2010-08-23 13:39 0The approach you suggest is not ... -
Add and Remove items with jQuery
2010-08-23 13:25 0Add and Remove items with jQuer ... -
extjs和struts、json的整合
2009-08-13 09:52 4542使用extjs配合struts的MVC架构是目前流行的做法,两 ... -
extra 1px space in dialog handle style - Ext JS
2009-04-20 23:33 1592Im developing a new style and h ... -
Grid - Custom header renderer? - Ext JS
2009-04-20 23:33 2095Is it possible to create a cust ... -
Inputs to DatePicker - Ext JS
2009-04-20 23:33 2186I thought I had read that you c ... -
dateFormat with timezone - Ext JS
2009-04-20 23:33 3617If I create JSON data on server ... -
How to use Ext.each? - Ext JS
2009-04-20 23:33 4505I'm trying to use Ext.each. It ... -
afteredit event ... new value? - Ext JS
2009-04-20 23:33 1530the new value is not set before ... -
problem qith iframe's - Ext JS
2009-04-20 23:33 1155I want to have dialogs and wher ... -
[Grid] Ext.data documenation - Ext JS
2009-04-20 23:33 1493I'm porting my grids to use the ... -
Last column to auto-adjust - Ext JS
2009-04-20 23:33 2720I can't see that this is curren ... -
Tree non-async creation "bug" - Ext JS
2009-04-20 23:32 2420When building a tree without us ... -
Bug - reload method of AsyncTreeNode - Ext JS
2009-04-20 23:32 2031Happens when the tree config o ... -
Minor grid paging toolbar issues - Ext JS
2009-04-20 23:32 1544When a grid toolbar is displaye ... -
Grid context menu - Ext JS
2009-04-20 23:32 2118I've made a grid with a context ...
相关推荐
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
在实际应用中,jQuery downList插件通常用于创建导航菜单、选择列表或下拉选项卡等交互式元素。它通过监听用户事件(如鼠标点击或触屏滑动)来触发下拉效果,并能够处理复杂的逻辑,如多级下拉菜单的展开和折叠。这...
而“jQuery的车牌插件”是这个库的一个扩展,专门针对车牌号码输入场景进行优化,提供了更加友好和高效的用户体验。 这款基于jQuery的车牌输入插件设计目标是让用户在网页上输入车牌号码时,能够享受到如同原生应用...
在实际应用中,你可以通过引入jQuery库和selectList插件的JS与CSS文件,然后对HTML中的`<select>`元素进行适当的jQuery选择和调用来实现美化效果。例如,使用`$('select').selectList()`即可初始化插件,对所有选择...
JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座插件.rar JQuery电影选座...
jQuery焦点图插件edslider.rar jQuery焦点图插件edslider.rar jQuery焦点图插件edslider.rar jQuery焦点图插件edslider.rar jQuery焦点图插件edslider.rar jQuery焦点图插件edslider.rar jQuery焦点图插件edslider....
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
而今天我们要探讨的是一个基于Bootstrap的插件——jQuery dualListbox1.3,它为用户提供了一种高效、灵活的双列选择框解决方案。通过对这个插件的研究,我们可以更好地理解和应用它,以满足业务需求。 首先,我们要...
**jQuery图片预览插件详解** 在Web开发中,图片预览功能是用户交互体验的重要组成部分,尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来增强这一功能。本篇文章将深入...
FullscreenGalleryThumbnailFlip.zip FullPageImageGallery.zip MergingImageBoxes.zip buildinternet-mosaic-ef45e11.zip woothemes-FlexSlider-23b22ac.zip jcobb-basic-jquery-slider-...等47个jQuery图片特效插件
本文将深入探讨“jQuery甘特图插件开源”这一主题,包括其功能、优势以及如何使用。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务,使得前端开发更加高效。基于jQuery的甘特...
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
**jQuery1.3 DW插件** 是一个专为Dreamweaver(DW)用户设计的扩展,主要用于提升在DW环境中编写jQuery代码的效率。这个插件是针对DW CS3版本优化的,它集成了jQuery 1.3版本的功能,提供了一个方便的自动提示工具,...
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
《jQuery超级Select插件v4.0版本详解》 在Web开发中,下拉选择框(Select)是最常见的表单元素之一,但在某些场景下,普通的Select可能无法满足复杂的交互需求,例如多选、搜索过滤、自定义样式等。这时,jQuery...
**jQuery-searchableSelect插件详解** 在Web开发中,下拉选择框(`<select>`元素)是常用的数据输入方式,但其默认样式通常较为简陋,且在选项过多时,用户查找所需项效率低下。为此,jQuery社区推出了一款名为...
**jQuery.kxbdmarquee插件详解** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理和动画效果。在这个库的基础上,开发者创建了许多插件来扩展其功能,其中`jquery.kxbdmarquee`...
jquery播放MP3插件jquery播放MP3插件jquery播放MP3插件