位置: IT常识 - 正文

BootStrap--selectpicker的使用

编辑:rootadmin
bootstrap-select,selectpicker 用法详细:通过官方文档翻译 用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下: 选项可以通过数据属性或JavaScript传递。对于数据属性,附加选项名称data-,如 d ... bootstrap-select,selectpicker 用法详细:通过官方文档翻译

推荐整理分享BootStrap--selectpicker的使用,希望有所帮助,仅作参考,欢迎阅读内容。

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

用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下:

选项可以通过数据属性或JavaScript传递。对于数据属性,附加选项名称data-,如data-style=""或data-selected-text-format="count"

<select id="selectoffice" class="selectpicker" multiple> <option value=' ' name=' ' li_key=' '> values </option> ...</select> $('.selectpicker').selectpicker({ 'selectedText': 'cat', //header: 'Select a condiment', 'noneSelectedText': 'Selected', 'deselectAllText': '全不选', 'selectAllText': '全选', //'actionsBox': true });参数名类型默认值描述actionsBoxboolfalse

当设置为true,增加了两个按钮,下拉菜单的顶部(全选和取消全选)。

containerstring|falsefalse

当设置为一个字符string,追加选择一个特定的元素或选择器,例如container: 'body' | '.main-body'

countSelectedTextstring| functionfunction

设置当selectedTextFormat是显示文本的格式count或count > #。{0}是所选择的量。{1}是用于选择的总可用。

当设定为一个函数,第一个参数是所选择的选项的数目,并且第二个是选项的总数。该函数必须返回一个字符string。

deselectAllTextstring'Deselect All'

当取消选择所有选项按钮上的文本actionsBox被启用。

dropdownAlignRightbool |'auto'false

对齐菜单,而不是左右。如果设置为'auto',如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。

dropupAutobooltrue

进行检查以查看其具有更多的空间,上方或下方。如果dropup有足够的空间完全打开正常,但上面有更大的空间,在dropup仍能正常打开。否则,就变成了dropup。如果dropupAuto设置为false,dropups必须手动调用。

headerstringfalse

增加了菜单的顶部的头部;默认包含关闭按钮

hideDisabledboolfalse

从菜单中删除禁用的选项和optgroupsdata-hide-disabled: true

iconBasestring'glyphicon'

将基地使用不同的图标字体代替Glyphicons。如果改变iconBase,你也可能要更改tickIcon,以防新的图标字体使用了不同的命名方案。

liveSearchboolfalse

当设置为true,增加了一个搜索框的下拉selectpicker的顶部。

liveSearchNormalizeboolfalse

设置liveSearchNormalize以true允许不区分重音的搜索。

liveSearchPlaceholderstringnull

当设置为一个字符string,一个占位符属性等于该字符string将被添加到实况搜索输入。

liveSearchStylestring'contains'

当设置为'contains',搜索将显示包含搜索到的文本选项。例如,搜索,返回鸭都为PLPLE,PL嗯,和PLantain。当设置为'startsWith',寻找PL只会返回PLUM和PLantain。

maxOptionsinteger |falsefalse

当设置为一个integer ,并在多选择,所选选项的数量不能超过给定值。

该选项还可以存在作为数据属性为<optgroup>,在这种情况下,它仅适用于<optgroup>。

maxOptionsTextstring| array|functionfunction

启用maxOptions时所显示的文本,并为给定的方案选项的最大数量已被选定。

如果使用的功能,它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string,相同的文字用于元素和OPTGROUP两者。

mobileboolfalse

当设置为true,使能选择菜单中的设备的本机菜单。

multipleSeparatorstring', '

坐落在分隔所选选项的按钮显示的字符。

noneSelectedTextstring'Nothing selected'

当多个选择时所显示的文本没有选择的选择。

selectAllTextstring'Select All'

当选择了所有选项,按钮上的文本actionsBox被启用。

selectedTextFormat'values'|'static'|'count'|'count > x'(其中,x是integer )'values'

指定选择如何显示有多个选择。

'values'显示所选择的选项(由分隔的列表multipleSeparator。'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后,它的行为象'count'。

selectOnTabboolfalse

当设置为true,对待像selectpicker下拉列表中输入或空格字符制表符。

showContentbooltrue

当设置为true,显示与该按钮选择的选项(一个或多个)相关联的自定义的HTML。当设置为false,期权价值将被显示。

showIconbooltrue

当设置为true,与在按钮选择的选项(一个或多个)相关联的显示的图标(一个或多个)。

showSubtextboolfalse

当设置为true与所述按钮选择的选项相关联,显示潜台词。

showTickboolfalse

show(没有的项目上选择的选项勾选multiple属性)。

size'auto'|integer |false'auto'

当设置为'auto',菜单始终打开,以显示尽可能多的项目窗口将允许在没有被切断。

当设置为integer 时,菜单将显示项目的给定数量,即使下拉被切断。

当设置为false,菜单会一直显示所有项目。

stylestring|nullnull

当设置为一个字符string,添加值到该按钮的风格。

tickIconstring'glyphicon-ok'

设置要使用的图标旁边显示的“滴答”来选择的选项。

titlestring|nullnull

对于selectpicker的默认标题。

width'auto'|'fit'|css-width|false(其中css-width是单位CSS的宽度,例如100px)false

当设置为auto,所述selectpicker的宽度被自动调节,以适应最宽的选项。

当设置为一个css-宽度,所述selectpicker的宽度内联强制为给定值。

BootStrap--selectpicker的使用

当设置为false,所有宽度信息被删除。

windowPaddinginteger | array0

这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ,同样填充将被添加到四面八方。可替代地,一个integer 数组可以在格式来使用[top, right, bottom, left]。

原文地址:https://www.cnblogs.com/zjhblogs/p/6667695.html

用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下:

选项可以通过数据属性或JavaScript传递。对于数据属性,附加选项名称data-,如data-style=""或data-selected-text-format="count"

<select id="selectoffice" class="selectpicker" multiple> <option value=' ' name=' ' li_key=' '> values </option> ...</select> $('.selectpicker').selectpicker({ 'selectedText': 'cat', //header: 'Select a condiment', 'noneSelectedText': 'Selected', 'deselectAllText': '全不选', 'selectAllText': '全选', //'actionsBox': true });参数名类型默认值描述actionsBoxboolfalse

当设置为true,增加了两个按钮,下拉菜单的顶部(全选和取消全选)。

containerstring|falsefalse

当设置为一个字符string,追加选择一个特定的元素或选择器,例如container: 'body' | '.main-body'

countSelectedTextstring| functionfunction

设置当selectedTextFormat是显示文本的格式count或count > #。{0}是所选择的量。{1}是用于选择的总可用。

当设定为一个函数,第一个参数是所选择的选项的数目,并且第二个是选项的总数。该函数必须返回一个字符string。

deselectAllTextstring'Deselect All'

当取消选择所有选项按钮上的文本actionsBox被启用。

dropdownAlignRightbool |'auto'false

对齐菜单,而不是左右。如果设置为'auto',如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。

dropupAutobooltrue

进行检查以查看其具有更多的空间,上方或下方。如果dropup有足够的空间完全打开正常,但上面有更大的空间,在dropup仍能正常打开。否则,就变成了dropup。如果dropupAuto设置为false,dropups必须手动调用。

headerstringfalse

增加了菜单的顶部的头部;默认包含关闭按钮

hideDisabledboolfalse

从菜单中删除禁用的选项和optgroupsdata-hide-disabled: true

iconBasestring'glyphicon'

将基地使用不同的图标字体代替Glyphicons。如果改变iconBase,你也可能要更改tickIcon,以防新的图标字体使用了不同的命名方案。

liveSearchboolfalse

当设置为true,增加了一个搜索框的下拉selectpicker的顶部。

liveSearchNormalizeboolfalse

设置liveSearchNormalize以true允许不区分重音的搜索。

liveSearchPlaceholderstringnull

当设置为一个字符string,一个占位符属性等于该字符string将被添加到实况搜索输入。

liveSearchStylestring'contains'

当设置为'contains',搜索将显示包含搜索到的文本选项。例如,搜索,返回鸭都为PLPLE,PL嗯,和PLantain。当设置为'startsWith',寻找PL只会返回PLUM和PLantain。

maxOptionsinteger |falsefalse

当设置为一个integer ,并在多选择,所选选项的数量不能超过给定值。

该选项还可以存在作为数据属性为<optgroup>,在这种情况下,它仅适用于<optgroup>。

maxOptionsTextstring| array|functionfunction

启用maxOptions时所显示的文本,并为给定的方案选项的最大数量已被选定。

如果使用的功能,它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string,相同的文字用于元素和OPTGROUP两者。

mobileboolfalse

当设置为true,使能选择菜单中的设备的本机菜单。

multipleSeparatorstring', '

坐落在分隔所选选项的按钮显示的字符。

noneSelectedTextstring'Nothing selected'

当多个选择时所显示的文本没有选择的选择。

selectAllTextstring'Select All'

当选择了所有选项,按钮上的文本actionsBox被启用。

selectedTextFormat'values'|'static'|'count'|'count > x'(其中,x是integer )'values'

指定选择如何显示有多个选择。

'values'显示所选择的选项(由分隔的列表multipleSeparator。'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后,它的行为象'count'。

selectOnTabboolfalse

当设置为true,对待像selectpicker下拉列表中输入或空格字符制表符。

showContentbooltrue

当设置为true,显示与该按钮选择的选项(一个或多个)相关联的自定义的HTML。当设置为false,期权价值将被显示。

showIconbooltrue

当设置为true,与在按钮选择的选项(一个或多个)相关联的显示的图标(一个或多个)。

showSubtextboolfalse

当设置为true与所述按钮选择的选项相关联,显示潜台词。

showTickboolfalse

show(没有的项目上选择的选项勾选multiple属性)。

size'auto'|integer |false'auto'

当设置为'auto',菜单始终打开,以显示尽可能多的项目窗口将允许在没有被切断。

当设置为integer 时,菜单将显示项目的给定数量,即使下拉被切断。

当设置为false,菜单会一直显示所有项目。

stylestring|nullnull

当设置为一个字符string,添加值到该按钮的风格。

tickIconstring'glyphicon-ok'

设置要使用的图标旁边显示的“滴答”来选择的选项。

titlestring|nullnull

对于selectpicker的默认标题。

width'auto'|'fit'|css-width|false(其中css-width是单位CSS的宽度,例如100px)false

当设置为auto,所述selectpicker的宽度被自动调节,以适应最宽的选项。

当设置为一个css-宽度,所述selectpicker的宽度内联强制为给定值。

当设置为false,所有宽度信息被删除。

windowPaddinginteger | array0

这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ,同样填充将被添加到四面八方。可替代地,一个integer 数组可以在格式来使用[top, right, bottom, left]。

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

上一篇:帝国cms7.5快速建站的方法(帝国cms建站实例教程)

下一篇:如何使用python中numpy.append()方法的axis(pythonjam怎么用)

  • 富有哲理的励志小故事(富有哲理的励志短句)

    富有哲理的励志小故事(富有哲理的励志短句)

  • 抖音一起看视频怎么关闭麦克风(抖音一起看视频可以看到微信消息吗)

    抖音一起看视频怎么关闭麦克风(抖音一起看视频可以看到微信消息吗)

  • 奶牛快传怎么转到百度云(奶牛快传怎么扩容)

    奶牛快传怎么转到百度云(奶牛快传怎么扩容)

  • 苹果手机系统在哪里看(苹果手机系统在哪里更新)

    苹果手机系统在哪里看(苹果手机系统在哪里更新)

  • 快手私信怎么发语音(快手私信怎么发图片)

    快手私信怎么发语音(快手私信怎么发图片)

  • 平衡输出比rca输出声音小(平衡输出比rca输出声音小的原因)

    平衡输出比rca输出声音小(平衡输出比rca输出声音小的原因)

  • 电脑上插了音响没声音怎么调(电脑上插了音响没声音有滋滋的声音)

    电脑上插了音响没声音怎么调(电脑上插了音响没声音有滋滋的声音)

  • 微信注销要多久才生效(微信注销需要多久?)

    微信注销要多久才生效(微信注销需要多久?)

  • 电脑如何转换视频格式(电脑如何转换视频格式为amv)

    电脑如何转换视频格式(电脑如何转换视频格式为amv)

  • 收发器是干什么用的(收发器能起到什么作用)

    收发器是干什么用的(收发器能起到什么作用)

  • 华为手机人脸识别不了怎么办(华为手机人脸识别突然失灵了)

    华为手机人脸识别不了怎么办(华为手机人脸识别突然失灵了)

  • 抖音收入音浪多久清零(抖音音浪收入分配)

    抖音收入音浪多久清零(抖音音浪收入分配)

  • 手机扬声器和听筒的区别(手机扬声器和听筒坏了怎么办)

    手机扬声器和听筒的区别(手机扬声器和听筒坏了怎么办)

  • 手机出现竖条纹怎么办(手机出现竖条纹怎么回事)

    手机出现竖条纹怎么办(手机出现竖条纹怎么回事)

  • iphone11卡槽哪个是主卡(苹果11卡槽类型)

    iphone11卡槽哪个是主卡(苹果11卡槽类型)

  • word怎么生成参考文献(word文档制作生成)

    word怎么生成参考文献(word文档制作生成)

  • 华为荣耀7x双卡怎么放(华为荣耀7x双卡双待为什么有个卡无服务)

    华为荣耀7x双卡怎么放(华为荣耀7x双卡双待为什么有个卡无服务)

  • 充电宝的开关有啥用(充电宝开关有什么用途和作用)

    充电宝的开关有啥用(充电宝开关有什么用途和作用)

  • 卓易健康绑定不了微信(卓易健康无法绑定设备)

    卓易健康绑定不了微信(卓易健康无法绑定设备)

  • pu口袋校园显示用户不存在(pu口袋校园显示是团员)

    pu口袋校园显示用户不存在(pu口袋校园显示是团员)

  • word用于处理什么(word可以用来处理)

    word用于处理什么(word可以用来处理)

  • 为什么wps不能用qq发送(为什么wps不能用宏)

    为什么wps不能用qq发送(为什么wps不能用宏)

  • doc文档是word文档吗(doc是word文档吗?)

    doc文档是word文档吗(doc是word文档吗?)

  • iphone7电源键结束通话(苹果7电源键)

    iphone7电源键结束通话(苹果7电源键)

  • 微博怎么成为大v(微博怎么变成大v)

    微博怎么成为大v(微博怎么变成大v)

  • 外贸企业出口流程图
  • 企业净利润怎么分配
  • 保险公司报销修手机
  • 实缴资本需要存放多久
  • 资产负债表的货币资金根据什么填
  • 关税计入存货成本分录
  • 胶水开票开什么类目
  • 损益平准基金
  • 劳务费专票数量和单价要写吗
  • 对公账户发工资1万要交税吗
  • 设计服务需要交文化建设费吗
  • 记账凭证按其适用的交易和事项分类可以分为
  • 计件工资的计算
  • 租的办公室要交税么
  • 外账的作用
  • 软件开发服务费可以计入无形资产吗
  • 城建税教育费附加税率怎么计算
  • 采用审计软件有什么优缺点
  • 旅行社差额征收的会计处理
  • 高新加计扣除怎么做账
  • 视同销售的计税依据
  • 公司年度财务报告怎么写
  • 定期结汇会计分录?
  • 原材料计入资产成本吗
  • 业绩补偿协议
  • 出口企业取得失业保险
  • 建筑工地伙食费会计分录
  • 已达到计算机的连接数最大值win7
  • 高新技术企业研发费占比
  • 防伪税控开票系统技术维护费
  • mac如何恢复到出厂系统版本
  • 合作社实际没有法人代表
  • linux设置壁纸的命令
  • 借款成坏账了怎么处理
  • 绿化费会计科目
  • 计提未支付的费用
  • mac m1 rosetta编译
  • 开办分公司
  • 图书发票怎么报销的
  • 一个用于表示特定的web页的标识符url称为
  • js工厂模式创建对象
  • 办完外经证怎么交税
  • 视频制作发票属于什么经营范围
  • 增值税发票完税证明图片
  • 物流公司账务处理特点
  • 第二季度所得税可以弥补以前年度亏损吗
  • 计入当期损益的
  • 金蝶软件做账流程图片
  • 血液制品增值税税率
  • 收据上面盖公章有用吗
  • 残疾人开公司要交税吗
  • 预付账款期末可能有余额吗
  • 公司对员工的罚款用途
  • 固定资产如何计提折旧
  • 转出未交增值税和未交增值税区别
  • 无偿划转资产需要挂其他应收款吗
  • 企业职工福利费使用范围和标准
  • 基于Sql Server通用分页存储过程的解决方法
  • mysql字段什么意思
  • mysql 5.7.28安装
  • sql根据名字查询
  • mysql5.7免安装版配置
  • windows怎么用
  • 如何查看电脑型号及配置
  • window照片无法预览
  • win8系统怎么更改无线网络IP
  • win8如何删除登录密码
  • win7系统怎样设置
  • python的文件操作中找不到文件应该如何处理
  • android studio string函数
  • AngularJS2 与 D3.js集成实现自定义可视化的方法
  • android需要学什么
  • shell脚本定时任务怎么写
  • pdb settrace
  • 两个fragment之间传值
  • jquery插件开发方法
  • 消防咨询电话24小时
  • 山西国家税务总局
  • 在税务局代开增值税票如何入账?
  • 经济增长的术语
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设