位置: 编程技术 - 正文

jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

编辑:rootadmin

推荐整理分享jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。

效果展示 源码下载

使用方法

使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。

HTML结构

一个选项带图标级带分组选项的下拉列表的HTML结构如下:

初始化插件

在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。

你也可以直接使用标签来初始化它:

jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

配置参数

其它可用的属性标签

通过使用data-left、data-right和data-subtitle标签你可以扩展下拉列表的显示信息。它们可以通过CSS来设置样式,CSS的前缀为:prefix_title、prefix_left、prefix_right和prefix_subtitle。这些数据都是纯HTML代码,所以你也可以使用图片代码。

上的代码会显示为类似下面的结构:

CSS类

class 描述 prefix_element 这是一个新的下拉列表框。它带有相同的额外class类:single 和 multiple ,它们用于设置是单选还是多选。另外 options-visible 和 options-hidden 用于设置选项是否可见 prefix_chosen_items 被选择的选项的容器 prefix_chosen_item 当前被选择的选项的容器 prefix_chosen_item_title 当前被选择的选项的标题 prefix_chosen_item_left 当前被选择的选项的左侧的内容 prefix_chosen_item_right 当前被选择的选项的右侧的内容 prefix_chosen_item_subtitle 当前被选择的选项的子标题 prefix_chosen_item_remove 当前被选择的选项的移除按钮 prefix_input This is the input box for the selectator. This is used together with options-visible or options-hidden to show and style it differently if it is a multiple selection box or a single selection box. prefix_textlength 用于计算多项选择框中input的尺寸 prefix_options 选项列表容器 prefix_group_header 分组标题 prefix_group 分组容器 prefix_option 结果选项。它使用class active 来表明当前激活的选项 prefix_option_title 结果选项的标题 prefix_option_left 结果选项左侧的内容 prefix_option_right 结果选项右侧的内容 prefix_option_subtitle 结果选项右侧的子标题 prefix_dimmer dimmer

方法

方法 描述 refresh 该方法用于刷新插件 destroy 该方法用于销毁插件

jquery.selectator-custom下拉列表插件的github地址为:

jQuery实现点击水纹波动动画 jQuery点击水纹波动动画原理:1.在需要实现水波纹效果的标签中添加XXXclass="ripple-wrapper"/XXX2.代码会定位鼠标相对与标签的位置,以鼠标点为圆心画圆3.圆

JQuery导航菜单选择特效 一、实现效果1.初始化效果:未添加样式和特效2、添加CSS样式3、最终效果二、JQuery代码!--编写JQuery代码--scripttype="text/javascript"$(document).ready(function(){$(".l

详解jQuery中的empty、remove和detach 通过一张对比表来解释几个方法之间的不同三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同。最权威的解释当然是jQuery_API咯,下面

标签: jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

本文链接地址:https://www.jiuchutong.com/biancheng/384916.html 转载请保留说明!

上一篇:javascript里的条件判断(javascript如何)

下一篇:jQuery实现点击水纹波动动画(jquery点击事件写法)

  • 固定资产待抵扣进项税
  • 摊余成本的构成内容
  • 普通发票被作废的话财务会发现吗
  • 小企业会计准则2023电子版
  • 资本公积只能转现金吗
  • 机耕道属于水利还是土地整治
  • 铁路大票抵扣几个点
  • 国有资产转让房产
  • 分批收款收据怎么写
  • 补贴收入计入哪个科目
  • 存货跌价卖出需要进项转出吗
  • 长期股权投资的明细科目有哪些
  • 销售企业需要交的营业税
  • 增值税发票处理流程
  • 固定资产折旧在资产负债表属于什么
  • 费用结转到本年利润是手动还自动结转?
  • 股东以个人名义签订租赁合同
  • 应交税金的明细科目
  • 房屋盘盈入账须要交税吗
  • 重点税源财务指标有哪些
  • 现金清查制度的内容包括
  • 电脑美式键盘怎么设置
  • 姑娘果的功效与作用百度百科
  • deepin如何
  • php实现的中秋博饼游戏之掷骰子并输出结果功能详解
  • 个体户个人所得税免征额是多少
  • PHP+Mysql+jQuery中国地图区域数据统计实例讲解
  • 发票失控进项转出所得税
  • 孕妇不能吃哪些水果?
  • 前端大屏适配几寸显示器
  • 委托代销双方账务处理
  • 若依框架使用
  • 在我国,企业可以用税前利润弥补几年内的损失
  • Bàu Cá Cái的红树林,越南广义 (© Robert Harding World Imagery/Offset)
  • 公司向股东借的钱怎么还
  • react by
  • 企业所得税核定征收方法有哪两种
  • thinkphp框架介绍
  • vue3的
  • php给图片加水印
  • 劳务公司账务处理流程简易计税
  • 长期应收款如何核算
  • sqlsever修改数据
  • 现金溢余涉及的科目
  • 购买商品或服务的人称为
  • 企业发生的各项融资费用中,不属于借款费用
  • mysql中的索引有
  • 需要计提坏账准备的有哪些科目
  • 补交所得税会计处理方法包括
  • 企业稳岗返还使用情况明细表
  • 拆迁补偿款收税吗
  • 小规模免征增值税到什么时间止
  • 同一控股下并合并的股票
  • 如果对装修费用有异议怎么办
  • 财务费用科目余额
  • 公认会计原则是哪个国家的?
  • centos 7.0截屏快捷键有冲突该怎么更换?
  • xp系统超级终端机在哪
  • winxp软件双击后没有反应
  • Ubuntu 8.10 Intrepid Ibex Alpha4 官方正式版下载
  • win10rs2是哪个版本
  • win10系统无法运行exe文件
  • windows7回收站图标没了
  • mac命令行终端快捷键
  • win7升级win10系统要多久
  • linux文件系统的根目录的i节点号为
  • cocos引擎教程
  • [置顶]游戏名 TentacleLocker
  • ie6怎么设置兼容性
  • asp.net 4.8
  • javascript 触发事件列表 比较不错
  • python解译器
  • python中的文件
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法
  • 烟叶处理
  • 河南办税服务厅
  • 广州市税务局官网电话
  • 广州税务局前局长是谁
  • 供热企业税收优惠政策执行情况
  • 税务登记证发证机关名称
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设