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>

显示第一个selected定义为true的搜索类别。

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&amp;progressbar(搜索框,进度条)的更多相关文章

  1. Android零基础入门第51节:进度条ProgressBar

    原文:Android零基础入门第51节:进度条ProgressBar 不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有AP ...

  2. ⑿bootstrap组件 缩略图 警告框 进度条 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. easyui源码翻译1.32---ProgressBar(进度条)

    前言 使用$.fn.progressbar.defaults重写默认值对象.下载该插件翻译源码 进度条提供了一个反馈显示一个长时间运行的操作进展.可以更新的进展条,让用户知道当前正在执行操作. 源码 ...

  4. Android的ProgressBar以及自定义进度条

    1.xml文件 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  5. easyui在table单元格中添加进度条

    function XR_jd(alue, rowData, rowIndex){ var value; ...... var htmlstr = '<div class="easyui ...

  6. 第二百一十节,jQuery EasyUI,SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  7. Android零基础入门第62节:搜索框组件SearchView

    原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当 ...

  8. SearchBox( 搜索框) 组件

    一. 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width: ...

  9. EasyUI Progressbar 进度条

    通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...

随机推荐

  1. finalize过程

    之前说过case有两个 switch (startOpt) { case FORMAT: boolean aborted = format(conf, true); System.exit(abort ...

  2. 最短路知识点总结(Dijkstra,Floyd,SPFA,Bellman-Ford)

    Dijkstra算法: 解决的问题: 带权重的有向图上单源最短路径问题.且权重都为非负值.如果采用的实现方法合适,Dijkstra运行时间要低于Bellman-Ford算法. 思路: 如果存在一条从i ...

  3. 更好的自动ssh登录

    更好的自动ssh登录 解决~/.ssh/known_hosts 过期问题. bash + expect bash:ssh.sh #!/bin/bash help(){ echo "usage ...

  4. “HTTP 错误 401.1 - 未授权:登录失败” iis配置和权限问题

    今天,将项目发布到IIS服务器上,出现此问题,本地IIS访问正常. 登录失败说明根本登录不了,谈何访问网页,所以要从两方面下手,一.账户:二.账户权限: 一.设置你网站属性的时候,目录安全性-匿名访问 ...

  5. uva--562Dividing coins +dp

    题意: 给定一堆硬币,然后将他们分成两部分,使得两部分的差值最小;输出这个最小的差值. 思路: 想了好久都没想到一个合适的状态转移方程.后面看了别人的题解后,才知道能够转成背包问题求解. 我们将全部的 ...

  6. C++易vector

    很长一段时间没有动手编写C++计划.无非就是模仿后STL对,虽然达不到标准STL该程序.但简单的功能来实现. STL事实上,深刻:泛型编程.容器.算法.适配器...有的是内容能够学.以下是依据STL源 ...

  7. 二进制搜索方法C++通用执行

    算法很easy.直接附着到代码它 #include <iostream> using namespace std; template<typename T> int binar ...

  8. System单元对所有与COM相关的声明就这么多,需要倒背如流

    是首先是VM表,但是和COM相关的函数地址都废弃了,这几个VM函数具体放在哪里,还得在研究: { Virtual method table entries } vmtSelfPtr = -; vmtI ...

  9. HDU 4611 Balls Rearrangement (数学-思维逻辑题)

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4611 题意:给你一个N.A.B,要你求 AC代码: #include <iostream> ...

  10. 斯坦福ML公开课笔记15—隐含语义索引、神秘值分解、独立成分分析

    斯坦福ML公开课笔记15 我们在上一篇笔记中讲到了PCA(主成分分析). PCA是一种直接的降维方法.通过求解特征值与特征向量,并选取特征值较大的一些特征向量来达到降维的效果. 本文继续PCA的话题, ...