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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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查询域名状态whois的类
2006/11/25 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue v-model的用法解析
2020/10/19 Javascript
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Pyqt5自适应布局实例
2019/12/13 Python
tornado+celery的简单使用详解
2019/12/21 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python hashlib模块的使用示例
2020/10/09 Python
介绍一下write命令
2014/08/10 面试题
大学生毕业自我鉴定范文
2014/02/03 职场文书
中式婚礼主持词
2014/03/13 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
国庆阅兵观后感
2015/06/15 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
800字作文之大雪
2019/12/04 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers