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异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js替代copy(示例代码)
Nov 27 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
VUE 全局变量的几种实现方式
Aug 22 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
js实现车辆管理系统
2020/08/26 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python九九乘法表的实例
2017/09/26 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
行政总监岗位职责
2013/12/05 职场文书
关于逃课的检讨书
2014/01/23 职场文书
一年级语文教学反思
2014/02/13 职场文书
大学校务公开实施方案
2014/03/31 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
法人委托书范本格式
2014/09/15 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
教师学期末个人总结
2015/02/13 职场文书
校园广播站开场白
2015/06/01 职场文书
实验心得体会范文
2016/01/25 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书