位置: 编程技术 - 正文

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

  • 租车属于经营租赁吗
  • 赠送客户的产品计入销售费用的二级科目
  • 减免城建税税款会计分录
  • 委托加工物资属于企业资产吗
  • 国有企业驻外人员待遇
  • 退股分红什么意思
  • 办公室购置空调的词语
  • 不交社保的单位违法吗?
  • 网上支付的三种类型
  • 企业所得税收入大于增值税收入的原因
  • 遗失发票如何处理
  • 增值税月报时间
  • 融资租赁 车辆
  • 工业企业税负率一般控制在多少?
  • 出口退税收汇凭证号
  • 享受高新技术企业优惠的条件之一
  • 物业公司代收电费会计分录
  • 多交的增税怎么做账
  • 母公司如何将子公司转让
  • 应付质保金到期怎么办
  • 一般纳税人兼营不同税率的货物或应税劳务
  • 单位社保部分会扣吗
  • 查找我的mac怎么打开
  • windows11咋样
  • 如果注册资本没有到账如何处理
  • iphone和电脑同步
  • PHP:xml_set_default_handler()的用法_XML解析器函数
  • php 钩子
  • linux中的文件
  • php数组函数,选班长
  • elementuiicon
  • 建造一座污水处理池投资了45万元
  • 金融资产减值的账务处理
  • 进项票留底怎么做分录
  • php中统计单词个数
  • 倾向得分匹配后怎么进行回归
  • 多模态特征融合pytorch
  • openssl 加密套件
  • thinkphp apidoc
  • 怎么把其他应收款的转到其他应付款
  • 其他收益在利润表填在哪里
  • 织梦怎么用模板建站
  • 进程 python
  • 织梦使用手册
  • 汇算清缴调增都有哪些项目
  • sql server 自定义排序
  • 工资总额主要包括
  • 初始数据都录入什么意思
  • 知识产权fa
  • 生产车间的会计科目
  • 进项税额转出缴税放在什么科目里
  • 现金日记账谁负责
  • 房地产公司开发的商品房应作为固定资产核算
  • 制造费用影响什么
  • 无形资产投资入股是否缴纳企业所得税
  • 办公家具可以一次性抵扣吗?
  • 期间费用是啥
  • 电子秤计入什么费用
  • 税控盘网上抄报税的步骤
  • 固定资产公司
  • macos sierra怎么升级到big sur
  • 写出linux安装的详细步骤
  • win8一键恢复出厂设置
  • winxp 共享设置
  • centos7修改远程登录端口
  • 关闭windows怎么关
  • linux源于
  • Extjs4 Treegrid 使用心得分享(经验篇)
  • css并集
  • 教你一行代码
  • html中的表格
  • Unity3D游戏开发(第2版)
  • package.json里面的配置
  • 税务分享风险如何解决
  • 浙江国税qzzn
  • 车船税是电子版的怎么年检
  • 青海国税局领导班子
  • 企业收取承包费如何缴纳增值税
  • 上海市税务局发票怎么开
  • 矿产资源税怎样征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设