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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
javascript中Object使用详解
Jan 26 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
轮播图组件js代码
Aug 08 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
javascript编程起步(第七课)
2007/01/10 Javascript
Use Word to Search for Files
2007/06/15 Javascript
简明json介绍
2008/09/28 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python实现简单http服务器功能
2018/09/17 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
网站客服岗位职责
2014/04/05 职场文书
2014教师研修学习体会
2014/07/08 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
自我评价优缺点范文
2015/03/11 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
服务器SVN搭建图文安装过程
2022/06/21 Servers
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技