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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
vue ssr 指南详读
Jun 29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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 foreach循环使用详解与实例代码
2010/05/08 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
javascript下function声明一些小结
2007/12/28 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
img标签中onerror用法
2009/08/13 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
介绍Python中的__future__模块
2015/04/27 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python正则表达式如何匹配中文
2020/05/27 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python如何实现机器人聊天
2020/09/10 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
幼儿园元旦亲子活动方案
2014/02/17 职场文书
药学职务聘任书
2014/03/29 职场文书
团队口号大全
2014/06/06 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
结婚老公保证书
2015/02/26 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS