BootStrap--selectpicker的使用_ZenDei技術網路在線

BootStrap--selectpicker的使用

-Advertisement-

bootstrap-select,selectpicker 用法詳細：通過官方文檔翻譯用過selectpicker的都說好~但是網上中文的教程又找不到比較完整的用法，於是去官網看了下順便弄過來翻譯一下：選項可以通過數據屬性或JavaScript傳遞。對於數據屬性，附加選項名稱data-，如 d ...

bootstrap-select,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`	從菜單中刪除禁用的選項和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]`。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

TDSQL｜就業難？騰訊雲資料庫微認證來幫你

6月29日，騰訊雲資料庫聯合CSDN舉辦的“數啟揚帆，智聚人才”峰會順利舉行。本次會議重磅發佈了騰訊雲聯合CSDN推出的資料庫工程師能力認證——騰訊雲資料庫微認證，旨在助力資料庫人才體系建設，造福產業發展，打通在校和在職的能力銜接，強化人才全生命周期的培養方案和技能提升，優秀者還可獲得騰訊雲面試直通 ...
Spark快速上手(2)Spark核心編程-RDD簡介

Spark計算框架為適應高併發和高吞吐的數據處理需求，封裝了三大數據結構，以處理不同應用： 1）RDD:彈性分散式數據集 2）累加器：分散式共用只寫變數 3）廣播變數：分散式共用只讀變數 ##RDD(1) ###什麼是RDD RDD(Resilient Distributed Dataset)彈性分 ...
高仿Android網易雲音樂OkHttp+Retrofit+RxJava+Glide+MVC+MVVM

這是一個使用Java（以後還會推出Kotlin版本）語言，從0開發一個Android平臺，接近企業級的項目（我的雲音樂），包含了基礎內容，高級內容，項目封裝，項目重構等知識；主要是使用系統功能，流行的第三方框架，第三方服務，完成接近企業級商業級項目。 ...
華為HMS Core攜手超圖為三維GIS註入新動能

6月30日，在2022（第五屆）GIS軟體技術大會GIS基礎軟體新技術板塊論壇上，華為聯合超圖推出了基於HMS Core 3D Engine開發的高保真三維GIS插件，通過3D渲染技術助力三維GIS實現更高清、更具真實感的數字世界場景。本次大會以“地理智慧多維築基”為主題，旨在分享GIS軟體的最 ...
如何輕鬆實現線上K歌房，與王心凌合唱《山海》

如果能開發一個線上K歌應用，就能與王心凌線上合唱實現追星自由。如何快速實現合唱功能？即構科技提供了實時合唱一站式解決方案和技術實現流程。 ...
使用閉包實現點擊按鈕切換 toggle

前言我以往在實現點擊按鈕切換DOM元素樣式的時候，使用的是在全局範圍內定義一個flag變數，然後用true和false來對應不同的狀態。 const btn = document.querySelector('#btn'); //獲取按鈕元素 let flag = false; //flag是全局 ...
vue2.0 雙向綁定原理及簡單實現

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 var length = 10; function fn () { return this.length + 1; } var obj = { length: 5, test1: function () { return fn(); } ...
純CSS 斑馬投影文字

效果展示思路分析層級思路從展示的效果可以猜到這個效果由3層文字組成。錶面一層黑色文字中間一層白色文字最低的一層是斑馬條紋文字要實現多層文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投個純色出來。於是思路要改一下，黑色和白色層是投影，斑馬條 ...