EasyUI基礎入門之searchbox&progressbar(搜尋框和進度條)

      easyui基礎部分的學習(八大部分)隻剩下searchbox和pargressbar、tooltip了,有點小激動呢。本偏文章将對searchbox和pargressbar做一個學習。鑒于兩者的内容都不會太多,這裡就直接将之合并在一起啦!

     不用過多解釋,隻要用于使用者對資料的搜尋。使用$.fn.searchbox.defaults重載預設值。

     依賴元件:菜單按鈕。

     searchbox提示使用者輸入搜尋值。它可以設定一個類别菜單,允許使用者選擇不同的搜尋類别。當使用者點選确認按鈕時将執行搜尋動作。

名稱

類型

描述資訊                                               

預設值

width

number

控件的寬度

auto

height

控件的高度,1.3.2

22

prompt

string

搜尋框内容提示資訊

‘‘

value

使用者輸入的值

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>

顯示第一個selected定義為true的搜尋類别。

null

searcher

function(name,value)

當使用者點選搜尋按鈕或者按下ENTER見得時候搜尋函數将被調用。

disable

boolean

定義搜尋框是否能夠被使用。1.3.6,預設是能使用的。

false

參數

描述資訊                                  

options

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

傳回文本框對象。

getValue

傳回目前搜尋關鍵字。

setValue

設定新的搜尋關鍵字。

getName

傳回目前搜尋類型。

selectName

name

選擇目前的搜尋類型名稱。

示例:

destroy

清楚搜尋框元件

resize

重新設定搜尋框寬度。

禁用搜尋框。1.3.6

enable

啟用搜尋框。1.3.6

clear

清空搜尋框中的value。1.3.6

reset

重置搜尋框的值。1.3.6    

1、使用标簽建立。對input标簽引用‘easyui-searchbox‘類。

2、使用js腳本建立:

    對于searchbox的學習就到這兒了,searchbox使用起來還是較為簡單的。官網的例子也就是上述的建立方式,這裡就不再贅述了。

         進度條可以提供回報一個長時間運作的操作的顯示進展。這個程序可以更新,能夠讓使用者知道目前操作執行的進度,提高使用者體驗。

         使用$.fn.progressbar.defaults重載預設值。

描述資訊                            

設定進度條的寬度

設定進度條的高度.1.3.2

設定進度條的值

text

今天條上顯示的文本

{value}%

描述資訊                      

onChange

newValue,oldValue

當進度條的值改變的時候觸發

例子:

$(‘#p‘).progressbar({

onChange: function(value){

alert(value)

}

參數 

描述資訊                                                           

 傳回參數對象           

改變元件的大小:

$(‘#p‘).progressbar(‘resize‘);  // 不改變大小

$(‘#p‘).progressbar(‘resize‘, 350);  // 改變大小

得到進度條的值

1、使用标記建立

       對于進度條的使用demo,這裡參照官網的例子,模拟下檔案上傳的效果。代碼如下:

        運作情況見如下截圖:

         OK!示範就到這裡了.over