首页IT科技bootstrap 多选框组(BootStrap–selectpicker的使用)

bootstrap 多选框组(BootStrap–selectpicker的使用)

时间2025-05-05 12:36:54分类IT科技浏览4953
导读:用过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 });
参数名 类型 默认值 描述 actionsBox bool false

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

container string|false false

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

countSelectedText string| function function

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

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

deselectAllText string Deselect All

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

dropdownAlignRight bool |auto false

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

dropupAuto bool true

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

header string false

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

hideDisabled bool false

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

iconBase string glyphicon

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

liveSearch bool false

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

liveSearchNormalize bool false

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

liveSearchPlaceholder string null

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

liveSearchStyle string contains

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

maxOptions integer |false false

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

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

maxOptionsText string| array|function function

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

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

mobile bool false

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

multipleSeparator string ,

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

noneSelectedText string Nothing selected

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

selectAllText string Select All

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

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

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

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

selectOnTab bool false

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

showContent bool true

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

showIcon bool true

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

showSubtext bool false

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

showTick bool false

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

size auto|integer |false auto

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

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

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

style string|null null

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

tickIcon string glyphicon-ok

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

title string|null null

对于selectpicker的默认标题                   。

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

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

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

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

windowPadding integer | array 0

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

声明:本站所有文章                   ,如无特殊说明或标注            ,均为本站原创发布             。任何个人或组织,在未征得本站同意时                   ,禁止复制            、盗用                   、采集       、发布本站内容到任何网站            、书籍等各类媒体平台      。如若本站内容侵犯了原著者的合法权益                  ,可联系我们进行处理                  。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
帝国cms演示(关于帝国cms提高网站网页打开速度的方法) js背景图片平铺(教你用JavaScript实现背景图像滑动)