boostrap selectpicker 用法


1、.html中先引用

<link href="{{ url_for('static', filename='css/bootstrap-select.css') }}" rel="stylesheet">
<script src="{{ url_for('static',filename='js/bootstrap-select.js') }}"></script>
2、flask 模板中寫法:
{{ form2.cron_name(class='form-control show-tick  selectpicker') }}

3、js代碼:

$(".selectpicker").selectpicker({
liveSearch:true,
});


4、selectpicker其他屬性

參數名 類型 默認值 描述
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]

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM