- 浏览: 2112286 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 1005The specifications should provi ... -
ajax upload
2010-11-19 13:22 0ajax upload The following cri ... -
兼容IE和FF获取Referer的JS方法
2010-11-11 10:11 4461众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准 ... -
jQuery优化
2010-09-16 08:30 5479之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。 ... -
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 4497使用extjs配合struts的MVC架构是目前流行的做法,两 ... -
extra 1px space in dialog handle style - Ext JS
2009-04-20 23:33 1560Im developing a new style and h ... -
Grid - Custom header renderer? - Ext JS
2009-04-20 23:33 2051Is it possible to create a cust ... -
Inputs to DatePicker - Ext JS
2009-04-20 23:33 2147I thought I had read that you c ... -
dateFormat with timezone - Ext JS
2009-04-20 23:33 3574If I create JSON data on server ... -
How to use Ext.each? - Ext JS
2009-04-20 23:33 4463I'm trying to use Ext.each. It ... -
afteredit event ... new value? - Ext JS
2009-04-20 23:33 1498the new value is not set before ... -
problem qith iframe's - Ext JS
2009-04-20 23:33 1121I want to have dialogs and wher ... -
[Grid] Ext.data documenation - Ext JS
2009-04-20 23:33 1453I'm porting my grids to use the ... -
Last column to auto-adjust - Ext JS
2009-04-20 23:33 2687I can't see that this is curren ... -
Tree non-async creation "bug" - Ext JS
2009-04-20 23:32 2380When building a tree without us ... -
Bug - reload method of AsyncTreeNode - Ext JS
2009-04-20 23:32 1993Happens when the tree config o ... -
Minor grid paging toolbar issues - Ext JS
2009-04-20 23:32 1503When a grid toolbar is displaye ... -
Grid context menu - Ext JS
2009-04-20 23:32 2061I'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 插件jquery 插件jquery 插件jquery 插件
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery表单验证插件
jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件
一款基于jQuery车牌输入插件,网上找到的,自己用着挺好的,分享给大家!
jQuery下拉框美化插件selectList是一款简单、轻量级、跨浏览器的jquery下拉框模拟插件,支持键盘操作选项、支持ESC关闭下拉框。
FullscreenGalleryThumbnailFlip.zip FullPageImageGallery.zip MergingImageBoxes.zip buildinternet-mosaic-ef45e11.zip woothemes-FlexSlider-23b22ac.zip jcobb-basic-jquery-slider-...等47个jQuery图片特效插件
jQuery城市级联插件 jQuery城市级联插件 jQuery城市级联插件
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
超级漂亮简单实用jQuery天气预报插件下载。一款界面设计扁平化,简洁大气的世界各地天气预报插件。支持手动输入城市(支持英文或中文拼音)获取天气信息。这款jQuery天气预报插件的特点在于可以动态切换城市,通过...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery树形插件jquery树形插件jquery树形插件jquery树形插件jquery树形插件jquery树形插件 非常美观,功能强大,代码简单易读
可直接运行, Jquery消息通知插件,消息提示,消息弹窗。
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
jquery图片轮播插件 左右、上下轮播jquery插件
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...