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 相关文章推荐
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
javascript实现连续赋值
Aug 10 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
微信小程序实现横向滚动导航栏效果
Dec 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
php无限级评论嵌套实现代码
2018/04/18 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
js获取域名的方法
2015/01/27 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
原生JS实现首页进度加载动画
2016/09/14 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
办理生育手续介绍信
2014/01/14 职场文书
护士求职信范文
2014/05/24 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
微信搭讪开场白
2015/05/28 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python