当前位置:主页 > jquery教程 >

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

发布:2022-06-14 21:35:21 123


给网友们整理MultiSelect相关的编程文章,网友隗明远根据主题投稿了本篇教程内容,涉及到MultiSelect、左右选择相关内容,已被357网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

由于项目中用到左右选择的控件,网上找了一些相关的实现,基本上有两个:

1、基于JQuery UI的控件:

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

这个看起来样式不错,而且使用起来功能也比较齐全,但是与传统的左边选择到右边的方式不同,有点别扭。

2、某个兄弟手写的一个控件:

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

这个符合我的需求,简单实用,但是不满足我的另一个需求,我的需求是右边的选择框需要能选择不同颜色的图片,而且这个样式有点不美观。

怎奈自己写一个吧,费了我半天的劲,总算搞定了,贴出来与大家分享一下吧:

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

这个既满足了我功能的需求也满足了我对样式的要求。

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

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


相关文章

  • pandas中MultiIndex和对象实际索引不一致解决方法

    发布:2019-11-18

    这篇文章主要介绍了详解pandas中MultiIndex和对象实际索引不一致问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习


  • 实例详解PHP数组函数array_multisort()使用方法

    发布:2020-03-05

    这篇文章主要介绍了PHP数组函数array_multisort()用法,结合实例形式详细分析了array_multisort函数的功能,定义及进行数组排序过程中的使用技巧,需要的朋友可以参考下


  • 实例分析Python多进程池 multiprocessing Pool的使用

    发布:2020-03-05

    这篇文章主要介绍了Python多进程池 multiprocessing Pool用法,结合实例形式分析了多进程池 multiprocessing Pool相关概念、原理及简单使用技巧,需要的朋友可以参考下


  • jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效

    发布:2019-08-01

    本文给大家分享的是一款jQuery整屏(全屏)滚动插件网页特效,滚动鼠标滚轮整屏一屏滚动切换代码,可设置文字/图片绝对上下左右居中显示JS代码,时下最流行的jQuery全屏滚动插件!(兼容测


网友讨论