jjzjj

BootStrap--selectpicker的使用

派大没有星. 2023-03-28 原文
 

用过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是显示文本的格式countcount > #。{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

从菜单中删除禁用的选项和optgroups data-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',搜索将显示包含搜索到的文本选项。例如,搜索,返回鸭都为PL PL E,PL嗯,和PL antain。当设置为'startsWith',寻找PL只会返回PL UM和PL antain。

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]

 

 

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

有关BootStrap--selectpicker的使用的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

随机推荐