- jQuery EasyUI從零開始學
- 施堯
- 1101字
- 2019-12-06 14:09:02
2.6 其他高級組件
本節(jié)將講解EasyUI中的一些高級組件，這些組件都是由一些基礎(chǔ)組件組合而來，它們的使用非常簡單，但是功能卻非常強大。
2.6.1 標簽框（TagBox）
在前面的章節(jié)中我們介紹了組合框的使用方法，當設(shè)置組合框?qū)傩詍ultiple為true時，組合框支持多選，此時如果需要修改選中內(nèi)容時，可以在文本框中刪除指定內(nèi)容或者在下拉面板中重新選擇。標簽框由組合框擴展而來，它可以在文本框內(nèi)顯示標簽而不是展示值，此時如果用戶需要刪除選中的內(nèi)容，只需在文本框中將標簽刪除即可，而不需要將內(nèi)容一個個地刪除。
標簽框的依賴關(guān)系如下：
- combobox
標簽框擴展于：
- combobox
標簽框的默認配置定義在$.fn.tagbox.defaults中。
1. 創(chuàng)建標簽框
使用標記創(chuàng)建標簽框的方法如下：
<input class="easyui-tagbox" value="標簽元素1,標簽元素2" label="請選擇">
使用JavaScript創(chuàng)建標簽框的方法如下：
01 <input id="tb" type="text" style="width:300px">
02 $('#tb').tagbox({
03 label: '請選擇',
04 value: ['標簽元素1','標簽元素2']
05 });
2. 標簽框?qū)傩?/b>
標簽框常用屬性說明見表2.45。
表2.45 標簽框常用屬性
3. 標簽框事件
標簽框常用事件見表2.46。
表2.46 標簽框常用屬性
4. 標簽框方法
標簽框無新增和重寫的方法。
2.6.2 搜索框（SearchBox）
搜索框由文本框和菜單按鈕組成，用戶可以在菜單按鈕中選擇不同的搜索類型，當用戶單擊搜索框右側(cè)的圖標時就會觸發(fā)搜索行為。
搜索框的依賴關(guān)系如下：
- textbox
- menubutton
搜索框擴展于：
- textbox
搜索框的默認配置定義在$.fn.searchbox.defaults中。
1. 創(chuàng)建搜索框
使用標記創(chuàng)建搜索框的方法如下：
01 <input id="ss" class="easyui-searchbox" style="width:300px"
02 data-options="searcher:qq,prompt:'請輸入搜索內(nèi)容',menu:'#mm'"></input>
03 <div id="mm" style="width:120px">
04 <div data-options="name:'all',iconCls:'icon-ok'">類型一</div>
05 <div data-options="name:'sports'">類型二</div>
06 </div>
07 <script type="text/JavaScript">
08 function qq(value,name){
09 alert(value+":"+name)
10 }
11 </script>
通過JavaScript創(chuàng)建搜索框的方法如下：
01 <input id="ss"></input>
02 <div id="mm" style="width:120px">
03 <div data-options="name:'all',iconCls:'icon-ok'">類型一</div>
04 <div data-options="name:'sports'">類型二</div>
05 </div>
06 $('#ss').searchbox({
07 searcher:function(value,name){
08 alert(value + "," + name)
09 },
10 menu:'#mm',
11 prompt:'請輸入搜索內(nèi)容'
12 });
2. 搜索框?qū)傩?/b>
搜索框常用屬性說明見表2.47。
表2.47 搜索框常用屬性說明
searcher屬性是搜索框最重要的一個屬性，當用戶單擊搜索圖標時，就會運行該屬性內(nèi)定義的方法。其中的參數(shù)value為文本框內(nèi)的值，name參數(shù)為用戶選擇的菜單元素的name屬性。
3. 搜索框事件
搜索框無新增和重寫事件。
4. 搜索框方法
搜索框常用方法說明見表2.48。
表2.48 搜索框常用屬性
2.6.3 文件框（FileBox）
文件框用于用戶上傳表單文件，擴展自文本框。文件框中可以使用文本框的屬性、事件以及方法，但是出于瀏覽器安全的考慮，部分方法如'setValue'可能無法在文件框上使用。本節(jié)將簡單介紹文件框的使用方法，在下一節(jié)表單中將向讀者演示如何利用表單上傳文件。
文件框的依賴關(guān)系如下：
- textbox
文件框擴展于：
- textbox
文件框的默認配置定義在$.fn.filebox.defaults中。
1. 創(chuàng)建文件框
使用標記創(chuàng)建文件框的方法如下：
<input class="easyui-filebox" style="width:300px">
通過JavaScript創(chuàng)建文件框的方法如下：
01 <input id="fb" type="text" style="width:300px">
02 $('#fb').filebox({
03 buttonText: 'Choose File',
04 buttonAlign: 'left'
05 })
2. 文件框?qū)傩?/b>
文件框常用屬性說明見表2.49。
表2.49 文件框常用屬性
accept屬性可以限制用戶選擇的文件類型，例如限制用戶只能選擇圖片，代碼如下：
01 $(‘#file’).filebox({
02 accept: ‘image/*’
03 });
其中符號*的含義是允許用戶選擇所有的image類型文件，常見的accept值見表2.50。
表2.50 常見的accept值
（續(xù)表）
3. 文件框事件
文件框無新增或重寫屬性。
4. 文件框方法
文件框常用方法說明見表2.51。
表2.51 文件框常用方法
- 程序員面試筆試寶典（第3版）
- Boost程序庫完全開發(fā)指南：深入C++”準”標準庫（第5版）
- 自制編譯器
- Java面向?qū)ο笏枷肱c程序設(shè)計
- C#完全自學教程
- Java高手真經(jīng)（高級編程卷）：Java Web高級開發(fā)技術(shù)
- Dependency Injection in .NET Core 2.0
- 人人都懂設(shè)計模式：從生活中領(lǐng)悟設(shè)計模式（Python實現(xiàn)）
- UML 基礎(chǔ)與 Rose 建模案例（第3版）
- Creating Stunning Dashboards with QlikView
- Quantum Computing and Blockchain in Business
- 細說Python編程：從入門到科學計算
- Julia 1.0 Programming Complete Reference Guide
- Solutions Architect's Handbook
- HTML5+CSS3+JavaScript 從入門到項目實踐（超值版）