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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
vue数据双向绑定原理解析(get & set)
Mar 08 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
什么是MVC,好东西啊
2007/05/03 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
JavaScript小技巧整理
2015/12/30 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python开发的实用计算器完整实例
2017/05/10 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python中创建二维数组
2018/10/17 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
消防安全标语
2014/06/07 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
签字仪式主持词
2015/07/03 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
SpringBoot快速入门详解
2021/07/21 Java/Android
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript