首页 > 代码库 > EasyUI基础入门之searchbox&progressbar(搜索框和进度条)

EasyUI基础入门之searchbox&progressbar(搜索框和进度条)

      easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar、tooltip了,有点小激动呢。本偏文章将对searchbox和pargressbar做一个学习。鉴于两者的内容都不会太多,这里就直接将之合并在一起啦!

searchbox

     不用过多解释,只要用于用户对数据的搜索。使用$.fn.searchbox.defaults重载默认值。

     依赖组件:菜单按钮。

     searchbox提示用户输入搜索值。它可以设定一个类别菜单,允许用户选择不同的搜索类别。当用户点击确认按钮时将执行搜索动作。

属性

名称类型描述信息                                               默认值
widthnumber控件的宽度auto
heightnumber控件的高度,1.3.222
promptstring搜索框内容提示信息‘‘
valuestring用户输入的值‘‘
menuselector

搜索类型菜单。每个菜单项可以有以下属性:

   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
searcherfunction(name,value)当用户点击搜索按钮或者按下ENTER见得时候搜索函数将被调用。null
disableboolean定义搜索框是否能够被使用。1.3.6,默认是能使用的。false


方法

名称参数描述信息                                  
optionsnone返回参数对象
menunone

返回搜索类型菜单对象。下面的例子显示了如何修改菜单项图标

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返回文本框对象。
getValuenone返回当前搜索关键字。
setValuevalue设置新的搜索关键字。
getNamenone返回当前搜索类型。
selectNamename

选择当前的搜索类型名称

示例:

$(‘#ss‘).searchbox(‘selectName‘, ‘sports‘);




destroynone清楚搜索框组件
resizewidth重新设置搜索框宽度。
disablenone禁用搜索框。1.3.6
enablenone启用搜索框。1.3.6
clearnone清空搜索框中的value。1.3.6
resetnone重置搜索框的值。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重载默认值。

属性

名称类型描述信息                            默认值
widthstring设置进度条的宽度auto
heightnumber设置进度条的高度.1.3.222
valuenumber设置进度条的值0
textstring今天条上显示的文本{value}%

事件

名称参数描述信息                      
onChangenewValue,oldValue

当进度条的值改变的时候触

例子:


$(‘#p‘).progressbar({

onChange: function(value){

alert(value)

}

});


方法

名称参数 描述信息                                                           
optionsnone 返回参数对象           
resizewidth

改变组件的大小:

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

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


getValuenone得到进度条的值
setValuevalue设置进度条的值

使用方式

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=http://www.mamicode.com/"jquery-easyui-1.3.6/themes/metro/easyui.css">>

        运行情况见如下截图:

                                                   QQ截图20140604165945

                                                 

                                                  QQ截图20140604170001


                                                 QQ截图20140604170014

         OK!演示就到这里了.over