MultiSelect左右选择控件的设计与实现介绍


Posted in Javascript onJune 08, 2013

由于项目中用到左右选择的控件,网上找了一些相关的实现,基本上有两个:
1、基于JQuery UI的控件:
MultiSelect左右选择控件的设计与实现介绍 
这个看起来样式不错,而且使用起来功能也比较齐全,但是与传统的左边选择到右边的方式不同,有点别扭。
2、某个兄弟手写的一个控件:
MultiSelect左右选择控件的设计与实现介绍 
这个符合我的需求,简单实用,但是不满足我的另一个需求,我的需求是右边的选择框需要能选择不同颜色的图片,而且这个样式有点不美观。

怎奈自己写一个吧,费了我半天的劲,总算搞定了,贴出来与大家分享一下吧:
MultiSelect左右选择控件的设计与实现介绍 
这个既满足了我功能的需求也满足了我对样式的要求。
关于颜色选择我引用了第三方的一个插件jquery.colorPicker.js,我比较喜欢简单实用并且美观的东西。
关于code,太多了不方便贴出来,说一下我的实现吧,左右的控件用的是jQuery easy UI的datagrid控件,我也是尝试了几个控件,只有这个符合我的要求,当然了对于datagrid也做了一些去掉标题、手动修改样式的一些处理。左右选择和上下控制基本上的逻辑是一样的,就是调用的datagrid的一些方法来实现了,当然这块控制灰掉button也做了很多的逻辑控制,目的就是让用户使用起来更加方便。

Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 #Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 #Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 #Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 #Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 #Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 #Javascript
JavaScript String.replace函数参数实例说明
Jun 06 #Javascript
You might like
建立文件交换功能的脚本(一)
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
对Django url的几种使用方式详解
2019/08/06 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
应用英语专业自荐信
2014/01/26 职场文书
大学活动总结模板
2014/07/10 职场文书
企业挂职心得体会
2014/09/10 职场文书
实习单位意见
2015/06/04 职场文书
客户答谢会致辞
2015/07/30 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL