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 相关文章推荐
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
JavaScript中如何调用Java方法
Sep 16 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/09/04 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python内置函数locals和globals对比
2020/04/28 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
合作意向协议书
2015/01/29 职场文书
工程部文员岗位职责
2015/02/04 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers