位置: 编程技术 - 正文

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点击事件写法)

  • 什么是增值税留底退税
  • 职工享受工伤津贴的条件
  • 产权转让印花税计税依据
  • 企业所得税的代码是什么
  • 去税务局开增值税专用发票需要缴费吗
  • 售后回租利息可以抵税吗
  • 工厂宿舍的水电安装规范图
  • 个体户没有办税务登记,产生的房土两税
  • 暂时没开发票的销项税需要做账吗
  • 间接费用是指
  • 清理往来账管理办法
  • 企业固定资产入账金额标准
  • 出售股票公允价值变动在借方
  • 退股分红什么意思
  • 社会团体收到的投资款怎么入账
  • 财政拨款进项税怎么处理
  • 哪些公司可以开咨询费发票
  • 个人独资企业所得税税率表最新
  • 劳务派遣公司是干嘛的
  • 我们公司春节发工资英文
  • 税控盘服务费每年都可以抵吗
  • 公司关门账上的盈余公积怎么处理?
  • 企业取得免税收入怎么算
  • 一张发票上可以开几行
  • 汇算清缴税务审计报告
  • 支付股息如何做账务处理
  • 租金怎么来计算个税
  • 往年多交的税能退吗
  • 王者荣耀中孙尚香怎么玩
  • 电脑如何修改硬盘模式
  • macOS 11 Big Sur 开发者预览版 Beta 7正式推送
  • macos big sur使用
  • PHP:pg_last_notice()的用法_PostgreSQL函数
  • 加工费入什么会计科目
  • win10蓝牙搜索不到ps4手柄
  • .net core 开发web
  • php防止sql注入的方法
  • vue动态组件component原理
  • 工程竣工决算会计账务处理
  • 企业待报解预算收入的分录
  • 注册资本增加了怎么做账
  • 如何开发客户群体
  • 客户的赔偿金会计分录
  • 预存电费余额怎么突然多了
  • wordpress如何删除导入的主题
  • 国外公司给国内个人汇款
  • 货物样品出口
  • 报税合同
  • 软件公司会计科目
  • 存货和总账不平如何调整
  • 印花税缴纳时间点
  • 电梯折旧率多少
  • 小规模纳税人减按1%账务处理
  • 纳税申报表多缴了怎么办
  • 补发以前年度工资的账务处理
  • 应收票据及应收账款怎么算
  • 已认证的招待费怎么入账
  • 房地产开发企业资质管理规定
  • 三栏式明细账需要结账吗
  • 医院的自助缴费机怎么开具发票
  • 开票和不开票
  • 长期股权投资的成本法和权益法区别
  • 招标付款条件及比例
  • 存在弃置费用的固定资产例题
  • 买新车贷款
  • mysql从5.7升级至8.0
  • Fedora 9 texlive + vim-latex + kile安装配置
  • 笔记本电脑bios更新
  • Windows 7(x64)下安装Ubuntu12.4的方法
  • win10系统浏览器设置主页
  • linux必学的60个命令rar
  • 滚小球的实验过程和材料
  • opengl教程48讲
  • 微信小程序实现微信支付
  • JavaScript中数组包含的属性和方法有哪
  • node.js使用的v8引擎是由哪个公司开发的
  • re engine引擎
  • [置顶] 快来貌相则不达很好skmzx5
  • python搭建平台
  • 上海买房退税政策2023最新
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设