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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
js常见遍历操作小结
2019/06/06 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python字符串循环左移
2019/03/08 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python是怎样处理json模块的
2020/07/16 Python
名词解释型面试题(主要是网络)
2013/12/27 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
制定岗位职责的原则
2013/11/08 职场文书
应届生保险求职信
2013/11/11 职场文书
警示教育活动总结
2014/05/05 职场文书
法定代表人身份证明书
2014/09/10 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2019年工作总结范文
2019/05/21 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python