MultiSelect左右选择控件的设计与实现介绍_jquery

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

怎奈自己写一个吧,费了我半天的劲,总算搞定了,贴出来与大家分享一下吧:
 
这个既满足了我功能的需求也满足了我对样式的要求。
关于颜色选择我引用了第三方的一个插件jquery.colorPicker.js,我比较喜欢简单实用并且美观的东西。
关于code,太多了不方便贴出来,说一下我的实现吧,左右的控件用的是jQuery easy UI的datagrid控件,我也是尝试了几个控件,只有这个符合我的要求,当然了对于datagrid也做了一些去掉标题、手动修改样式的一些处理。左右选择和上下控制基本上的逻辑是一样的,就是调用的datagrid的一些方法来实现了,当然这块控制灰掉button也做了很多的逻辑控制,目的就是让用户使用起来更加方便。

时间: 2024-10-24 18:15:02

MultiSelect左右选择控件的设计与实现介绍_jquery的相关文章

为ASP.NET控件添加设计时支持

asp.net|控件|设计 简介 Microsoft ASP.NET 为开发人员提供了一种适用于 Web 开发的.功能最为强大的新工具:服务器控件.服务器控件使开发人员能够在短时间内开发出响应速度快而且功能强大的 Web 应用程序,所需的时间与在典型的 ASP 中创建类似应用程序的时间差不多. ASP.NET 服务器控件之所以能够提供生产效率,关键原因之一在于它为 Microsoft Visual Studio .NET 开发环境中的服务器控件提供了丰富的设计时支持.开发人员可以将服务器控件从

WinForm控件开发总结(十一) 调试控件的设计时行为

前面的一些文章绝大部分都是要讲控件的设计时的行为,既然涉及到这么多的设计时行为的代码编写 ,那么就有必要就一下如何来调试控件的设计行为. 调试控件的设计时行为和调试DLL的方式非常的相似,因为DLL是不能够单独运行的,而一般的控件也 会在一个DLL里.当然如果你不考虑类的可复用性而把控件写在一个Windows Application里面也无可厚非 ,这样调试倒也变的简单了.但是我们还是要考虑更通常的情况.一般来说,我们调试DLL时,都是创建 一个可独立运行的应用程序,在这个应用程序里引用你希望调

可支持快速搜索筛选的Android自定义选择控件

Android 自定义支持快速搜索筛选的选择控件使用方法,具体如下 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz/SearchSelect 这个控件是由Dialog+SearchView+ListView实现的.Dialog用来承载选择控件,SearchView实现输入,ListView展示结果.设计概要图如下: 一.自定义Dialog Dialog布局文件 <?xml version=&quo

网页图片下拉选择控件使用实例

控件|网页|下拉 上周五在大富翁上看到如何在网页的下拉列表中显示图片一文,便做了一个mark,准备用周末思考一下.谁知道昨天出去玩一天,今天来收到邮件,问题解决了. 不想看内容的,请下载rar文件.下面是转贴: 相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有.但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的. 我们先来看下做出这个控件需要解决哪些问题. 第一,图片下拉列表框是一个层,它在选择提示

ASP.net下DataGrid的单项选择控件

asp.net|datagrid|控件 #region 声明//----------------------------------------------------------------------//// 作者: 李淼(Nick.Lee)//// ASP.net下DataGrid的单项选择控件 // 时间:2005-3-15 // boyorgril@msn.com// QQ:16503096//注意:引用请标明出处,谢谢//-------------------------------

silverlight控件模型之选择控件和列表控件

选择控件:checkbox控件和radiobutton控件 <StackPanel Background="White" VerticalAlignment="Center"> <CheckBox Content="中间状态" IsThreeState="True" IsChecked="" Margin="20"></CheckBox> <Ch

Windows Phone 8.1新特性:控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件. 在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显示.比如通讯录中,按照名字首字母进行分组,点击分组标题后跳转到该标题对应的分组. 而Windows Phone 8.1 中会利用 ListView和 SemanticZoom 来实现,下面我们来看看实现过程. 首先我们来认识一下ListView 和 SemanticZoom: ListView 从字

Android开发入门(十一)选择控件 11.2 DatePicker

DataPicker和上一节讲的TimePicker很相似.使用DatePicker,可以让用户选择一个特定的日期.下面展 示如何使用DatePicker. 1. 使用上一节的工程,BasicViews4,修改main.xml. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and

Android开发入门(十一)选择控件 11.1 TimePicker

使用TimePicker,可以让用户去选择一天中的事件,包括24小时制和AM/PM制.下面的例子将会展示如何 使用TimePicker. 1. 创建一个工程:BasicViews4. 2. main.xml中的代码. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q