Jquery EasyUI的Resizable、Searchbox 和Progressbar插件

水深无声 2022-05-09 09:26 206阅读 0赞

中文网帮助文档：[http://www.jeasyui.net/plugins/154.html][http_www.jeasyui.net_plugins_154.html]

### 一、EasyUI Resizable 可调整尺寸    ###

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>如果设置为 true，则禁止调整尺寸。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>handles</td> 
   <td>string</td> 
   <td>指可调整尺寸（resizable）的方向，'n' 是北，'e' 是东，等等。</td> 
   <td>n, e, s, w, ne, se, sw, nw, all</td> 
  </tr> 
  <tr> 
   <td>minWidth</td> 
   <td>number</td> 
   <td>调整尺寸时最小宽度。</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>minHeight</td> 
   <td>number</td> 
   <td>调整尺寸时最小高度。</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>maxWidth</td> 
   <td>number</td> 
   <td>调整尺寸时最大宽度。</td> 
   <td>10000</td> 
  </tr> 
  <tr> 
   <td>maxHeight</td> 
   <td>number</td> 
   <td>调整尺寸时最大高度。</td> 
   <td>10000</td> 
  </tr> 
  <tr> 
   <td>edge</td> 
   <td>number</td> 
   <td>被调整尺寸的边框的边缘。</td> 
   <td>5</td> 
  </tr> 
 </tbody> 
</table>

事件  方法 见文档

使用 javascript 创建可调整尺寸（resizable）对象。

**1. 基础可调整div大小：$("\#rr").resizable()**

<div id="rr"></div>	
    
    --index.css--
    @charset "UTF-8";
    #rr {
    	margin: 10px;
    	width: 300px;
    	height: 200px;
    	border: 1px solid #ff0000;
    	background: #808040;
    }
    
    --index.js--
    
    $(function(){	
    	$("#rr").resizable({
    		maxWidth: 500,
    	});
    
    });

** ** ![70][]

### 二、EasyUI Searchbox 搜索框 ###

搜索框（searchbox）提示用户输入搜索值。它可以结合一个菜单，允许用户选择不同的搜索类别。当用户按下 ENTER 键时或者点击组件右侧的搜索按钮时，搜索动作将被执行。

中文网帮助文档：[http://www.jeasyui.net/plugins/156.html][http_www.jeasyui.net_plugins_156.html]

**1. 普通搜索框**

<div>
    		<input type="text" id="ss" />
    	</div>	
    
    --index.css--
    @charset "UTF-8";
    #ss {
    	width: 300px;
    }
    
    --index.js--
    
    $(function(){	
    	$("#ss").searchbox({
    		searcher: function(value){ //参数为搜索文本框的内容
    			//根据value使用ajax访问后台
    			alert(value);
    		}
    	});
    
    });

![70 1][]

**2. 带分类的搜索框**

<div>
    		<input type="text" id="ss" />
    		<div id="category">
    			<div name="clothes" iconCls="icon-ok">衣服</div>
    			<div name="computer" iconCls="icon-ok">电脑</div>
    		</div>
    	</div>	
    
    --index.css--
    @charset "UTF-8";
    #ss {
    	width: 300px;
    }
    
    --index.js--
    $(function(){	
    	$("#ss").searchbox({
    		menu: "#category",
    		searcher: function(value, name){ //value:为搜索文本框的内容，name: 为分类的name值
    			alert(value +", name="+ name);
    		}
    	});
    
    });

![70 2][]    ![70 3][]

### 三、EasyUI Progressbar 进度条 ###

进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>string</td> 
   <td>设置进度条（progressbar）的宽度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>组件的高度。该属性自版本 1.3.2 起可用。</td> 
   <td>22</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">value</span></td> 
   <td>number</td> 
   <td>百分比值。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>显示在组件上的文本模板。</td> 
   <td>{value}%</td> 
  </tr> 
 </tbody> 
</table>

## 事件 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onChange</td> 
   <td>newValue,oldValue</td> 
   <td>当值改变时触发。<br> 代码实例： <pre>
<code>&nbsp;</code></pre> 
    <ol> 
     <li>$('#p').progressbar({ </li> 
     <li>onChange: function(value){ </li> 
     <li>alert(value)</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>width</td> 
   <td>调整组件尺寸。<br> 代码实例： <pre>
<code>&nbsp;</code></pre> 
    <ol> 
     <li>$('#p').progressbar('resize'); // 调整进度条为初始宽度</li> 
     <li>$('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">getValue</span></td> 
   <td>none</td> 
   <td>返回当前的进度值。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">setValue</span></td> 
   <td>value</td> 
   <td>设置一个新的进度值。</td> 
  </tr> 
 </tbody> 
</table>

使用 javascript 创建进度条（ProgressBar）。

**1、流式进度条**

<div id="q"></div>	
    		进度条：<div id="bar" style="width:300px;">
    	</div>	
    	<a id="start" href="javascript:void(0)">开始进度</a>
    
    --index.css--
    
    --index.js--
    $(function(){	
    	$("#bar").progressbar({
    		value: 0
    	});
    });
    
    $("#start").on("click",function add(){
    	var value = $('#bar').progressbar('getValue');
    	if (value < 100){
    		value += Math.floor(Math.random() * 10);
    		$('#bar').progressbar('setValue', value);
    		setTimeout(arguments.callee, 200);//arguments.callee 是获取当前调用函数的本体
    	}
    });

![70 4][]

[http_www.jeasyui.net_plugins_154.html]: http://www.jeasyui.net/plugins/154.html
[70]: /images/20220509/c2802c3941494067bf1d5ea2b706708a.png
[http_www.jeasyui.net_plugins_156.html]: http://www.jeasyui.net/plugins/156.html
[70 1]: /images/20220509/39e53bec67234bdbb53a82d7ee8fa611.png
[70 2]: https://img-blog.csdn.net/20181005175809377?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220509/46a9b3f341fb4894abde7cdb678be9c4.png
[70 4]: /images/20220509/e0b41ac3136d4de1bd3ebb2ab87264da.png