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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript读取RSS数据
Jan 20 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
使用javascript插入样式
Mar 14 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
Vue渲染函数详解
Sep 15 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
对python中return与yield的区别详解
2020/03/12 Python
python numpy实现rolling滚动案例
2020/06/08 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
爱耳日活动总结
2014/04/30 职场文书
工作目标责任书
2014/07/23 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书