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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序如何连接Java后台
Aug 08 Javascript
js+html实现点名系统功能
Nov 05 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
跟老齐学Python之复习if语句
2014/10/02 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
numpy基础教程之np.linalg
2019/02/12 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python代码中怎么换行
2020/06/17 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
银行领导证婚词
2014/01/11 职场文书
电台编导求职信
2014/05/06 职场文书
学生党员公开承诺书
2014/05/28 职场文书
经销商年会策划方案
2014/05/29 职场文书
消防宣传口号
2014/06/16 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014年审计工作总结
2014/11/17 职场文书
情人节活动总结范文
2015/02/05 职场文书
爱护环境建议书
2015/09/14 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python