位置: 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怎么用)

  • 传统企业怎样才能玩转微博营销(传统企业怎么转型)

    传统企业怎样才能玩转微博营销(传统企业怎么转型)

  • 最实用的网络推广四种方法(常用的网络推广平台有哪些呢)

    最实用的网络推广四种方法(常用的网络推广平台有哪些呢)

  • 单元格边距在哪里设置(单元格边距在哪里设置2016)

    单元格边距在哪里设置(单元格边距在哪里设置2016)

  • 华为mate30和华为p30的区别(华为mate30和华为nova10哪个好)

    华为mate30和华为p30的区别(华为mate30和华为nova10哪个好)

  • iphone11中国上市时间(iphone11中国上市时间价格)

    iphone11中国上市时间(iphone11中国上市时间价格)

  • 闲鱼小法庭卖家胜利钱多久到账(闲鱼小法庭卖家赢了后怎么处理)

    闲鱼小法庭卖家胜利钱多久到账(闲鱼小法庭卖家赢了后怎么处理)

  • med-al20是华为什么型号(华为med-al20是华为什么型号及价格)

    med-al20是华为什么型号(华为med-al20是华为什么型号及价格)

  • 芒果tvpc端是什么意思(芒果tv pc端)

    芒果tvpc端是什么意思(芒果tv pc端)

  • 网易账号为什么会锁定(网易账号为什么不能改实名认证)

    网易账号为什么会锁定(网易账号为什么不能改实名认证)

  • mh182zp/a是什么型号(mh182zp/a是什么型号是那一年)

    mh182zp/a是什么型号(mh182zp/a是什么型号是那一年)

  • typec接口手机有哪些(typec接口手机有哪些vivo)

    typec接口手机有哪些(typec接口手机有哪些vivo)

  • 电脑显示adiskreaderroroccurred如何解决(电脑显示屏不亮但是主机已开机)

    电脑显示adiskreaderroroccurred如何解决(电脑显示屏不亮但是主机已开机)

  • 苹果6s plus有投屏功能吗(苹果6splus怎么投影)

    苹果6s plus有投屏功能吗(苹果6splus怎么投影)

  • 苹果手机来电没声音是什么原因(苹果手机来电没有铃声怎么办)

    苹果手机来电没声音是什么原因(苹果手机来电没有铃声怎么办)

  • qq关联是什么意思(qq关联是什么意思怎么取消)

    qq关联是什么意思(qq关联是什么意思怎么取消)

  • 怎么把手机软件传到另一个手机(怎么把手机软件变成安装包)

    怎么把手机软件传到另一个手机(怎么把手机软件变成安装包)

  • 内存超频用xmp还是手动(内存超频性能)

    内存超频用xmp还是手动(内存超频性能)

  • qq音乐密码怎么改(qq音乐设置密码)

    qq音乐密码怎么改(qq音乐设置密码)

  • 苹果手机XR怎么退出当前应用(苹果手机xr怎么关机和开机)

    苹果手机XR怎么退出当前应用(苹果手机xr怎么关机和开机)

  • 软件危机的主要表现(软件危机的主要原因)

    软件危机的主要表现(软件危机的主要原因)

  • airpods有黑色吗(airpod 黑色)

    airpods有黑色吗(airpod 黑色)

  • 圈厨是不是小米(圈厨这个牌子好吗)

    圈厨是不是小米(圈厨这个牌子好吗)

  • iphone6plus微信如何置顶(iphone6s 微信)

    iphone6plus微信如何置顶(iphone6s 微信)

  • qq提示音怎么设置(qq提示音怎么设置全部人)

    qq提示音怎么设置(qq提示音怎么设置全部人)

  • Linux系统中ps命令和gitps命令的使用教程(linux的ps命令用法)

    Linux系统中ps命令和gitps命令的使用教程(linux的ps命令用法)

  • 最贵租金的苹果商店是什么(最贵的一个苹果多少钱)

    最贵租金的苹果商店是什么(最贵的一个苹果多少钱)

  • php使用header()禁止缓存的方法(php headers)

    php使用header()禁止缓存的方法(php headers)

  • 预收货款需要缴纳消费税吗?缴纳消费税的时间应该是?
  • 离职补偿的扣税比例
  • 怎么收购股份公司
  • 对公跨行转账汇款(非柜面)手续费单笔 9折
  • 账面现金可以转出吗
  • 工资单上的retro
  • 利润表中财务费用是负数怎么算营业利润
  • 进项税加计抵减生产性服务
  • 成品油购进数据未同步怎么办
  • 支付费用可以通过应收账款
  • 资产负债表各项目的填列依据是
  • 房贷抵扣个税如何设置100%
  • 如何确定企业
  • 本年利润,利润分配
  • 小规模纳税人汇算清缴要填什么表
  • 合同履约成本合同结算如何处理抵消
  • 农产品收购发票开错了
  • 免税企业可以开具有税率的增值税专用发票吗
  • 企业租车费用怎么处理方法
  • 增值税税负率高于预警值
  • 所得税清算时坏账怎么算
  • 无产权车位20年到期后还收费吗
  • 出售专利权属于什么科目
  • 进项留抵退税会计科目
  • 支付现金未给发票怎么做账?
  • 软件开发开增票几个点
  • 企业报表里面利润怎么填
  • macos升级报错
  • 销售净利率的计算公式有哪些
  • 社保公积金代缴
  • 捐赠口罩的人
  • 在win7系统中,怎么把D盘里的文件移到C盘里?
  • linux abi
  • win10任务栏颜色怎么调
  • 什么级别的cpu需要水冷
  • 文竹发黄怎么挽救?
  • 销售汇总怎么做分录
  • php炫酷代码
  • 钉钉工资表如何生成工资条?
  • css案例教程
  • cnn卷积神经网络python代码
  • 研发费用加计扣除75%还是100%
  • 预缴和缴纳的区别
  • 被投资的公司注销后投资公司怎么处理
  • 工会经费是应付职工薪酬的借方还是贷方
  • etcd4
  • 增值税开票系统客服电话
  • 差旅费计入工资合理吗
  • 税务已注销工商如何注销
  • 个人独资企业最新税收政策
  • sql cell函数
  • mysql中的语法
  • 支付航天信息服务费未收到发票怎么处理
  • 房地产项目公司组织架构
  • 退货占销售比
  • 收到其他公司款项会计分录
  • 公司每个月申报怎么报的
  • 存放在仓库中的原材料
  • 报销没有消费凭据怎么办
  • 总资产周转率多少算正常
  • win8如何调整电脑屏幕亮度
  • u盘里装pe系统
  • linux界面显示
  • linux wget curl
  • webrtc opus
  • shell脚本tr
  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
  • cocos2dx 3.0 quick lua schedler
  • 置顶的朋友圈屏蔽的人能看到吗
  • Node.js中的全局变量有哪些
  • 淘宝python基础教程
  • 使用jQuery加载html页面到指定的div实现方法
  • python和微信交互
  • android ui自动化测试
  • Python中使用装饰器来优化尾递归的示例
  • 国家税务总局会议管理办法
  • 增值税进项发票勾选时间
  • 公路客运购票
  • 中华人民共和国成立于1949年10月1日到今年是多少周年
  • 关于增值税和消费税两者之间关系的说法错误的是
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设