使用MultiSelect左右选择控件的一些设计

简介: 项目中用到左右选择的控件,网上查找了一些相关的实现,结合了一下

网上查找了一些相关的实现,基本上有两个:
1、基于JQuery UI的控件:
image.png
这个看起来样式不错,而且使用起来功能也比较齐全,但是与传统的左边选择到右边的方式不同,有点别扭。
2、某个程序员手写的一个控件:
image.png
这个符合我的需求,简单实用,但是不满足我的另一个需求,我的需求是右边的选择框需要能选择不同颜色的图片,而且这个样式有点不美观。

怎奈自己写一个吧,费了我半天的劲,总算搞定了,贴出来与大家分享一下:
image.png
这个既满足了我功能的需求也满足了我对样式的要求。

关于颜色选择我引用了第三方的一个插件jquery.colorPicker.js,我比较喜欢简单实用并且美观的东西。

关于code,太多了不方便贴出来,然后就说一下我的实现吧;
左右的控件用的是jQuery easy UI的datagrid控件,我也是尝试了几个控件,只有这个符合我的要求,当然了对于datagrid也做了一些去掉标题、手动修改样式的一些处理。
左右选择和上下控制基本上的逻辑是一样的,就是调用的datagrid的一些方法来实现了,当然这块控制灰掉button也做了很多的逻辑控制,目的就是让用户使用起来更加方便。

相关文章
|
4月前
|
容器
Element UI 自定义环形进度条里的内容
Element UI 自定义环形进度条里的内容
184 2
|
存储 数据可视化 程序员
Window Form 控件基础
在开始正式介绍如何开发自定义控件之前,有必要先了解一下控件开发的基础知识。下面从控件的概念、分类和开发模式上对控件做一个基本的概述。
865 0
Window Form 控件基础
|
Android开发
GridView基于pulltorefresh实现下拉刷新 上拉加载更多功能
GridView基于pulltorefresh实现下拉刷新 上拉加载更多功能
|
API
对dwz的combox组件扩展属性
对dwz的combox组件扩展属性
118 0
|
C#
WPF支持OneWay,TwoWay,OneTime,Default和OneWayToSource
原文:WPF支持OneWay,TwoWay,OneTime,Default和OneWayToSource 无论是目标属性还是源属性,只要发生了更改,TwoWay 就会更新目标属性或源属性。
1480 0
|
C# 虚拟化
WPF之VirtualizingStackPanel.IsVirtualizing="False"
原文:WPF之VirtualizingStackPanel.IsVirtualizing="False" 相信从winform转到wpf的人都遇到过这样的困惑,在处理DataGrid时,我想让某一单元格根据格式校验的不同情况显示不同的颜色,以便于用户区分。
1615 0
UWP 下拉刷新控件(PullToRefreshControl)
原文:UWP 下拉刷新控件(PullToRefreshControl) 最近项目里面有下拉刷新的需求,自己做了一个,效果还不错。 ...
1283 0