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 相关文章推荐
jquery实现轮播图效果
Feb 13 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
ionic实现底部分享功能
May 11 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
jQuery设计思想
2017/03/07 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python删除文件示例分享
2014/01/28 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python中logging包的使用总结
2018/02/28 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
创新比赛获奖感言
2014/02/13 职场文书
个人银行贷款担保书
2014/04/01 职场文书
法院信息化建设方案
2014/05/21 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
放弃继承权公证书
2015/01/23 职场文书
工程部部长岗位职责
2015/02/12 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
鸡毛信观后感
2015/06/11 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python