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 相关文章推荐
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
微信小程序progress组件使用详解
Jan 31 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.ini中文版
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
小程序转发探索示例
2019/02/19 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
浅谈Python中带_的变量或函数命名
2017/12/04 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
七年级英语教学反思
2014/01/15 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
法人委托书范本格式
2014/09/15 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
喋血孤城观后感
2015/06/08 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python