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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
js实现select跳转功能代码
Oct 22 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
信息管理专业推荐信
2013/10/29 职场文书
安阳殷墟导游词
2015/02/10 职场文书
公司规章制度范本
2015/08/03 职场文书
找规律教学反思
2016/02/23 职场文书
Python绘制分类图的方法
2021/04/20 Python
七个非常实用的Python工具包总结
2021/06/15 Python