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