頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

靈活為目標的WEB下拉組件

表單 HTML我幫您 1年前  次瀏覽

TinySelect 是一個以靈活為目標的WEB下拉組件。旨在通過靈活的接口和用法,適應各種不同的場景

  • 單選/多選
  • 提供過濾框以通過關鍵字簡單過濾數據
  • 編程顯示/隱藏下拉框
  • 編程過濾數據,可以是關鍵字或函數
  • selectunselectready事件
  • 支持設置初始值
  • 支持后加載數據/重新加載數據
  • 編程設置下拉組件只讀屬性
  • 豐富的初始化選項,并且可以通過選項設置樣式
  • 提供多種渲染器的自定義支持,如:下拉項,header,footer和選中結果
  • 可以設置部分數據的顯示模板
  • 支持數據項的異步渲染
  • 支持多種顯示模式:下拉(dropdown, 默認)、列表(list)、彈出(popup)
  • 支持多種數據項布局:列表(list, 默認)、網格(grid)、表格(table)
  • 支持鍵盤操作移動與選擇項

[MENU]

快速上手

dist目錄復制到你的項目中,然后在頁面上添加引用

 

HTML結構

 

數據

var data = [{ "id": 0, "text": "一月" }, { "id": 1, "text": "二月" }, { "id": 2, "text": "三月" }, { "id": 3, "text": "四月" }, { "id": 4, "text": "五月" }, { "id": 5, "text": "六月" }, { "id": 6, "text": "七月" }, { "id": 7, "text": "八月" }, { "id": 8, "text": "九月" }, { "id": 9, "text": "十月" }, { "id": 10, "text": "十一月" }, { "id": 11, "text": "十二月" }];

最簡單的用法

單選

var ts = tinyselect('#tinyselectcontext', data);

多選

var ts = tinyselect('#tinyselectcontext', data, true);

注:參數 true僅在第二個參數為數據數組時有效。

加點選項的用法

var ts = tinyselect('#tinyselectcontext', { css: 'custom-select-style', style:{ width: 400 }, item:{ data: data, render: function(data, index){ return (index + 1) + ':' + data.text; } } });

這里指定了自定義的樣式類custom-select-style,這個類會被附加到下拉組件的頂層容器上,可以通過.tinyselect-container.custom-select-style這樣的方式來重寫樣式。

更多用法,請看示例。

選項

創建下拉組件的默認選項。這里列出了所有可用的項,這些項會被附加到TinySelect上面,可以通過修改tinyselect.defaults 來改變這些默認配置,如: tinyselect.defaults.result.multi = true 這樣的寫法會讓頁面內之后創建的下拉組件都默認啟用多選模式。

{ // 組件是否是只讀的 readonly: false, // 顯示模式,可以設置的值為: dropdown(默認下拉模式), list(列表模式), popup(彈出模式) mode: mode_dropdown, // 是否支持鍵盤操作,默認為 true keyboard: true, // 附加的樣式類名稱 css: NULL, // 下拉框容器的樣式 style: { // 這個行高是必須的,覆蓋這些樣式時,需要注意, // 其值需要是可以轉換成整數的類型,因為下拉的項會使用這個作為默認的行高 // 例外的情況:設置了項的行高(即下面的 item.line-height) lineHeight: '28px' }, // 下拉框的頭部 header: { // 頭部渲染器,其this上下文就是其DOM對象, // 直接操作這個對象來改變頭部 // 這個是在執行完其初始化,添加到容器前調用的 render: false, // 過濾框 filter: { // 觸發過濾的動作,可以設置為 change 或 enter(默認)。 // 為change時,輸入有變化時執行 // 為enter時,按下回車時執行 trigger: 'enter', // 此值表示在輸入框經過指定時間后沒有鍵盤輸入時,觸發過濾動作 // 單位是毫秒,默認值為 618 // 當 trigger 為change時有效 // 設置這個是為了防止使用亞洲輸入法時(比如:中文,日文等)時,文字輸入中將字母上屏導致的事件觸發 delay: 618, // 過濾框的提示文字 placeholder: '輸入后按回車過濾', // 附加的樣式類名稱 css: NULL, // 過濾框的樣式 style: {} }, // 附加的樣式類名稱 css: NULL, // 頭部樣式 style: {} }, // 下拉項容器 box: { // 下拉列表沒有數據時顯示的文字 empty: '沒有數據', // 數據項的布局方式 // 可設置的值有: list(列表布局,默認值), grid(網格布局), table(表格布局) layout: layout_list, // 附加的樣式類名稱 css: NULL, // 下拉項容器的樣式 style: {} }, // 數據項分組設置 group: { // 分組值字段 // 設置此值時才會分組 valueField: false, // 分組文本字段,不設置時使用 valueField // 相同的 valueField 而 textField不同時,只會取第一個 textField的值 textField: false, // 數據項不包含指定的 valueField字段時的分組名稱 unknown: '未分組', // 分組的渲染器 render: false, // 附加的樣式類名稱 css: NULL, // 下拉項容器的樣式 style: {} }, // 下拉項 item: { // 下拉項數據的數組,每一項需要對象結構的數據 data: [], // 默認選中的項 value: false, // 數據對象的值字段,在獲取/設置值時,會使用這個字段 valueField: 'id', // 數據對象的文本字段,下拉項的顯示文字 textField: 'text', // 可見項的數量,數據數量多余此值時出現滾動條 visible: 5, // 下拉項的渲染器,使用返回值設置項的內容 // render: function(itemdata, index, alldata){}  this 指向即將渲染的網頁元素對象。 // itemdata:這一項的數據  // index: 這一項數據的索引 // alldata:下拉的所有數據 // 設置為false 禁用渲染器 render: false, // 是否在數據項比設定的 visible 多時使用異步渲染(true), // 在數據較多時建議設置為true,以避免大量的dom操作阻塞頁面執行 async: TRUE, // 附加的樣式類名稱 css: NULL, // 每一個下拉項的樣式 style: {} }, // 下拉底部DOM footer: { // 底部渲染器,其this上下文就是其DOM對象, // 直接操作這個對象來改變底部 // 需要注意的是,底部分了“左”、“右”兩個區域,以放置不同的東西 // 這個是在執行完其初始化,添加到容器前調用的 render: false, /**
         * 下拉項數量
         */ totalTpl: '共' + str_placeholder + '項', /**
         * 選中的下拉項數據
         */ selectedTpl: '選中' + str_placeholder + '項/', // 附加的樣式類名稱 css: NULL, // 底部的樣式 style: {} }, result: { // 是否啟用多選模式 multi: false, // 渲染選中結果的渲染器,可以通過這個來改變選中結果的渲染 render: false, // 多選結果展示方式,可以設置為 0(顯示選中的數量,默認值) 或者 1(顯示 選中的項列表) // 這是一個預留配置項 type: 0, // 附加的樣式類名稱 css: NULL, // 多選結果的樣式 style: {} } }

注:

  • 以上選項中所有的style項可以使用所有的css樣式,名稱中有連字符的時候可以寫成font-size或者fontSize
  • 多選的結果框始終不會顯示下拉指示器

鍵盤支持

通過選項option.keyboard 設置是否支持鍵盤操作,默認為true 當為true時,可以通過以下鍵操作組件:

  • 上方向鍵,項向上移動一位
  • 下方向鍵,項向下移動一位
  • Space 空格鍵,選中/取消選中當前項
  • Esc Esc鍵,關閉組件

顯示模式選項

目前組件提供了三種顯示模式:

  • dropdown 下拉模式(默認) 示例
  • list 列表模式,此模式沒有選擇結果框 示例
  • popup 彈出模式,這項會彈出框的方式顯示數據項,在彈出框后面,有一個mask層 示例

數據項布局選項

布局是指數據項的排列方式,通過參數option.box.layout來設置,可以設置為

布局gridtable不同之處在于: - grid是所有項以網格方式顯示,每一行顯示的項的數量與每項占用的寬度相關,如果要控制每一行顯示項的數量,那么請設置項的寬度和下拉框的寬度 - table的一行顯示的是一項數據的多個字段

不同的布局基本上都是通過不同的樣式來實現的。

接口

TinySelect 提供了一組易用的操作接口。這些接口除了取值類的,其它都返回了下拉組件的實例,也就是說非取值類的接口可以進行鏈式調用。

show(callback: Function) : TinySelect

顯示下拉組件。

callback 下拉組件顯示后的回調函數。這個回調函數沒有參數,其上下文this對象指向下拉組件的彈出框DOM對象。

hide(callback: Function) : TinySelect

隱藏下拉組件。

callback 下拉組件隱藏后的回調函數。這個回調函數沒有參數,其上下文this對象指向下拉組件的彈出框DOM對象。

value(value: Any, trigger: Boolean) : TinySelect|Any

設置/獲取下拉組件的選中值。當傳了參數時是設置值;不傳參數時,是獲取值,此時若是單選則返回選中的值,多選則返回選中的值的數組。

value 第一個參數是要設置的值,單選時傳入單個值,多選時傳入值數組。

trigger 是否觸發事件。true觸發,false不觸發。在設置值時,如果希望結果框中顯示設置的值,這個參數需要傳入true。默認為false

在初始化下拉組件后立即調用 .value() 設置值的時候,需要確保渲染已經完成,即事件ready已經被觸發。

filter(keyOrFn: String|Function, toggle: Boolean) : Array

根據關鍵字或函數過濾數據項。返回所有命中項的數據組成的數組。

keyOrFn 關鍵字或過濾器函數。當傳入字符串的時候,會在下拉項中查找匹配的文本,若有匹配則返回這項的數據;傳入函數時,通過函數的返回值決定是否命中(返回true表示命中),這個函數的上下文this對象是某一個下拉項的DOM對象,并且有一個參數datadata是這個數據項的數據。

toggle 是否切換顯示狀態,即隱藏未命中項,顯示命中項。默認為false

clear() : TinySelect

清除下拉組件的選中項。

load(data: Array) : TinySelect

加載數據,重新渲染下拉項,調用這個函數前的所有數據項都會在重新渲染前被清空。

data 組件會根據這個數據重新渲染所有的下拉項。

readonly(readonly: Boolean) : Boolean|TinySelect

設置/獲取下拉組件的只讀模式。當傳了參數時是設置模式,不傳參數時為獲取模式。

readonlytrue時設置下拉組件只讀,為false取消下拉組件的只讀模式;不傳時為獲取當前是否是只讀模式。

on(eventType: String, handler: Function) : TinySelect

綁定事件到下拉組件上。

eventType 事件類型名。,目前支持select,unselect,ready,傳入其它值無效。

handler 事件的處理函數。詳見下方 [事件][0] 部分

off(eventType: String, handler: Function) : TinySelect

從下拉組件上取消事件的綁定。參數同上面的on函數。需要注意的是,在調用off的時候,handler需要是函數引用,這個函數引用應該與調用on的時候是同一個引用,所以,調用on時使用了匿名函數,那么在這里無法解除綁定。

事件

TinySelect 目前提供了三個事件:select, unselect, ready

select: Function

下拉項被選中時觸發的事件。上下文this指向下拉組件,處理函數有一個參數e,其結構如下:

{ data: Object, index: Number, target: HtmlElement, type: String }

,其中,data是下拉項的數據,index是下拉項的索引,target是下拉項的DOM元素,type是事件類型。

select: Function

下拉項被取消選中時觸發的事件。參數與用法與select事件相同。

ready: Function

下拉組件的所有下拉項渲染完成后觸發的事件,這個事件觸發后表示下拉組件初始化已經完成,可以正常使用了。

在初始化下拉組件后立即調用 .value() 設置值的時候,需要確保渲染已經完成。

自定義樣式

可以通過重寫這些樣式來實現不同的效果。 如果僅僅想要重設配色,那么可以直接通過修改src/colors.less文件,然后重新編譯。這個文件里面提供了目前組件中的大部分顏色變量。

上下文元素

  • tinyselect-context 用來創建下拉組件的元素
  • tinyselect-context-result 存放選中結果的容器
  • tinyselect-result-item 選中結果項
  • tinyselect-result-item-text 選中結果項的文本
  • tinyselect-result-item-link 選中結果項的移除按鈕
  • tinyselect-context-with-arrow 帶有下拉指示器時候的樣式
  • tinyselect-context-arrow 下拉指示器
  • tinyselect-readonly 下拉框處于只讀模式的樣式

彈出框mask層

僅在popup模式時存在

  • tinyselect-mask 彈出框的mask層,container的父級元素,默認以position: fixed撐滿窗口

彈出框

  • tinyselect-container 下拉框最頂級容器
  • tinyselect-empty 沒有數據項時頂級容器的樣式
  • tinyselect-mode-dropdown 下拉組件作為下拉框顯示時的樣式(默認)
  • tinyselect-mode-list 下拉組件作為列表顯示時的樣式
  • tinyselect-mode-popup 下拉組件作為彈出框顯示時的樣式

頭部

  • tinyselect-header 下拉框頭部元素,過濾框就是放這里面的
  • tinyselect-filter 下拉框的過濾輸入框

底部

  • tinyselect-footer 下拉框底部元素
  • tinyselect-footer-left 底部左側容器
  • tinyselect-footer-right 底部右側容器
  • tinyselect-count-total 底部右側顯示下拉項數量
  • tinyselect-count-selected 底部右側顯示下拉項選中的數量

下拉項

  • tinyselect-box 下拉項的容器
  • tinyselect-box-layout-list 下拉項列表布局
  • tinyselect-box-layout-grid 下拉項網格布局
  • tinyselect-box-layout-table 下拉項表格布局
  • tinyselect-table-proxy 以表格方式布局時的表格元素
  • tinyselect-item 下拉項
  • tinyselect-item-selected 下拉項選中狀態
  • tinyselect-item-before 下拉項文字前的元素
  • tinyselect-item-text 下拉項文字元素
  • tinyselect-item-after 下拉項文字后的元素

相關鏈接

發表評論

经典黑杰克游戏