位置: 编程技术 - 正文

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

  • 企业可以一次性补交员工十年养老保险吗
  • 销售费用计入产品生产成本吗
  • 可以向国外账户汇人民币吗
  • 误餐费没有发票怎么说明
  • 公司年底奖金怎么算
  • 本月采购下月付款怎么记账
  • 补税款的分录应该怎么写
  • 不动产发票如何开具
  • 2016年红冲发票流程
  • 无偿赠送资产需要交哪些税
  • 其他货币资金明细科目有哪些
  • 赠品如何做兑换码
  • rsrcmtr.exe - rsrcmtr是什么进程 有什么用
  • 实收资本可以大于注册资本嘛
  • PHP:stream_context_create()的用法_Stream函数
  • 股份支付如何缴纳个人所得税?
  • keyemain.exe是什么进程
  • windows未能正常启动
  • 增值税税率调整为13%的文件
  • 材料入库款项未付会计分录
  • php 自动加载
  • unet网络的优缺点
  • 企业自查补税怎么报税
  • 先发货再开票
  • phpxdebug
  • 预处理数据的方法
  • gpt指标
  • win11预览版22000.51
  • 公司股东与公司往来怎么处理
  • js array()
  • 织梦的css样式在哪
  • 本月进项税额可以下月抵扣吗
  • 其他应收款如何平账
  • 个税系统经营所得人员怎样添加
  • 应交税费在借方怎么调平
  • SQL Server 2012 开窗函数
  • mysql编程一般步骤
  • 应纳税所得额是利润总额还是净利润
  • 公司缴纳残保金的标准
  • 购入车辆发生的费用
  • 开会旅游的费用是多少
  • 已经认证抵扣的发票,要退回,怎么处理
  • 合伙企业分红怎么做账
  • 结转利润分配的二级明细账户
  • 信用卡账单最低还款额是什么意思
  • 固定资产处置怎么报税
  • 旅游服务住宿费可以抵扣吗
  • 固定资产报废如何记账
  • 法人转移公司资产怎么办
  • 为什么委托代销业务受托方要反映或有负债
  • sql server2012操作步骤
  • sql server real
  • centos查看某个端口
  • 装win7系统步骤
  • 磁盘清理win10
  • 笔记本xp无线网络连接禁用启用不了
  • 让xp系统自动修复软件
  • ScanMailOutLook.exe - ScanMailOutLook是什么进程 有什么用
  • 怎么优化win10系统
  • 装win8.1
  • javascript编程规范
  • bootstrap步骤
  • JavaScript中的变量名不区分大小写
  • 批处理copy合并文件
  • jquery.min.js源代码
  • unity资源管理机制
  • python itcast
  • unity text
  • javascript中的splice
  • javascript基础笔记
  • js如何截取中文字符
  • js实现字符串和数字对齐
  • 基于javascript的毕业设计
  • 面向对象的三大特征
  • 成都税务局发票查询
  • 企业吸收合并资质转移办理
  • 电子税务平台怎么红冲纸质发票
  • 什么督导组词
  • 依法行政的观念
  • 广州市地方税务局 社保费申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设