標籤：
easyui學習的基本組成部分(八個部分)碩果僅存searchbox和pargressbar、tooltip該,有一點興奮。本文將偏向searchbox和pargressbar做一個探討。鑒於雙方的內容不會太多,在這裡，直接此事合并!
searchbox不用過多解釋,僅僅要用於使用者對資料的搜尋。使用$.fn.searchbox.defaults重載預設值。
相依元件:菜單button。
searchbox提示使用者輸入搜尋值。它能夠設定一個類別菜單,同意使用者選擇不同的搜尋類別。當使用者點擊確認button時將運行搜尋動作。
屬性| 名稱 | 類型 | 描寫敘述資訊 | 預設值 |
| width | number | 控制項的寬度 | auto |
| height | number | 控制項的高度,1.3.2 | 22 |
| prompt | string | 搜尋方塊內容提示資訊 | ‘‘ |
| value | string | 使用者輸入的值 | ‘‘ |
| menu | selector | 搜尋類型菜單。每一個功能表項目能夠有下面屬性: name：搜尋類型的名稱。 selected:當前選擇的搜尋類型的名稱 以下範例顯示了怎樣定義一個選定的搜尋類型名稱。 <input class="easyui-searchbox" style="width:300px" data-options="menu:‘#mm‘" /> <div id="mm" style="width:150px"> <div data-options="name:‘item1‘">Search Item1</div> <div data-options="name:‘item2‘,selected:true">Search Item2</div> <div data-options="name:‘item3‘">Search Item3</div> </div> |
null |
| searcher | function(name,value) | 當使用者點擊搜尋button或者按下ENTER見得時候搜尋函數將被調用。 | null |
| disable | boolean | 定義搜尋方塊是否可以被使用。1.3.6,預設是能使用的。 | false |
| 名稱 | 參數 | 描寫敘述資訊 |
| options | none | 返回參數對象 |
| menu | none | 返回搜尋類型菜單對象。以下的範例顯示了怎樣改動功能表項目表徵圖。
var m = $(‘#ss‘).searchbox(‘menu‘); // get the menu object var item = m.menu(‘findItem‘, ‘Sports News‘); // find the menu item // change the menu item icon m.menu(‘setIcon‘, { target: item.target, iconCls: ‘icon-save‘ }); // select the searching type name $(‘#ss‘).searchbox(‘selectName‘, ‘sports‘); |
textbox |
none | 返迴文本框對象。 |
| getValue | none | 返回當前搜尋keyword。 |
| setValue | value | 設定新的搜尋keyword。 |
| getName | none | 返回當前搜尋類型。 |
| selectName | name | 選擇當前的搜尋類型名稱。
示範範例: $(‘#ss‘).searchbox(‘selectName‘, ‘sports‘); |
| destroy | none | 清楚搜尋方塊組件 |
| resize | width | 又一次設定搜尋方塊寬度。 |
| disable | none | 禁用搜尋方塊。 1.3.6 |
| enable | none | 啟用搜尋方塊。1.3.6 |
| clear | none | 清空搜尋方塊中的value。1.3.6 |
| reset | none | 重設搜尋方塊的值。 1.3.6 |
使用方式
1、使用標籤建立。對input標籤引用‘easyui-searchbox‘類。
<script type="text/javascript"> //當使用者點擊搜尋時啟動並執行函數 function doSearch(value,name){ alert(value+":"+name) } </script> <input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:doSearch,prompt:'Please Input Value',menu:'#mm'"></input> <div id="mm" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div>
2、使用js指令碼建立:
<input id="ss"></input> <div id="mm" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div>
$('#ss').searchbox({ searcher:functionvalue,name){ alert(value + "," + name) }, menu:'#mm', prompt:'Please Input Value' });
對於searchbox的學習就到這兒了,searchbox使用起來還是較為簡單的。官網的範例也就是上述的建立方式,這裡就不再贅述了。
progressbar進度條能夠提供反饋一個長時間執行的操作的顯示進展。
這個進程能夠更新,能夠讓使用者知道當前操作執行的進度,提高使用者體驗。
使用$.fn.progressbar.defaults重載預設值。
屬性| 名稱 | 類型 | 描寫敘述資訊 | 預設值 |
| width | string | 設定進度條的寬度 | auto |
| height | number | 設定進度條的高度.1.3.2 | 22 |
| value | number | 設定進度條的值 | 0 |
| text | string | 今天條上顯示的文本 | {value}% |
| 名稱 | 參數 | 描寫敘述資訊 |
| onChange | newValue,oldValue | 當進度條的值改變的時候觸發 範例: $(‘#p‘).progressbar({ onChange: function(value){ alert(value) } }); |
| 名稱 | 參數 | 描寫敘述資訊 |
| options | none | 返回參數對象 |
| resize | width | 改變組件的大小: $(‘#p‘).progressbar(‘resize‘); // 不改變大小 $(‘#p‘).progressbar(‘resize‘, 350); // 改變大小 |
| getValue | none | 得到進度條的值 |
| setValue | value | 設定進度條的值 |
1、使用標記建立
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
2、使用js指令碼建立:
<div id="p" style="width:400px;"></div> $('#p').progressbar({ value: 60 });
Demo
對於進度條的使用demo,這裡參照官網的範例,類比下檔案上傳的效果。
代碼例如以下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>進度條示範</title><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"><script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script></head><body><script type="text/javascript">function start() {var value = $('#p').progressbar('getValue');if (value < 100) {value += Math.floor(Math.random() * 10);$('#p').progressbar('setValue', value); setTimeout(arguments.callee, 200);if (value >= 100) {$('#button').linkbutton('disable');//檔案上傳成功之後禁用按鈕$('#p').progressbar('disable');//檔案上傳成功之後禁用進度條}}}</script><div id="p" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div></br><a onclick="start()" id="button" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-refresh'">檔案上傳</a><script>$('#p').progressbar({text: '檔案上傳{value}%',});</script></body></html>
OK!示範就到這裡了.over
著作權聲明：本文部落格原創文章，部落格，未經同意，不得轉載。
EasyUI基礎searchbox&progressbar(搜尋方塊，進度條)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
