【EasyUI】輸入框box、linkbutton、menubutton、提示控件

EasyUI使用

1.引入JS

1. validate.js：各種輸入框的驗證方法
2. easyui-default.js：重寫datagrid默認屬性
3. common.js：通用的datagrid選擇、點擊方法
4. 包含的文件將在下一個文章中統一給出

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/easyui.css">   
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/icon.css">   
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/validate.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui-default.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script>

2.textbox

	電話/手機<input name="mobile"  class="easyui-textbox"   data-options="validType:'telOrMobile'"/><br/>
	最短長度  <input name="length1" class="easyui-textbox"   data-options="validType:'minLength[5]'"/><br/>
	最長長度  <input name="length2" class="easyui-textbox"   data-options="validType:'maxLength[10]'"/><br/>
	長度範圍  <input name="length3" class="easyui-textbox"   data-options="validType:'length[5,10]'"/><br/>
	多行輸入 <input name="bz"       class="easyui-textbox" data-options="multiline:true,validType:['maxLength[250]'],required:false,width:550,height:70"/><br/>

3.numberbox

數字 <input name="number"    class="easyui-numberbox" data-options="min:0,max:500,precision:1,prefix:'a',suffix:'b'"/><br/>

4.datebox/datetimebox

日期1  <input name="date1" class="easyui-datebox"      data-options="editable:false,required:false,icons:[{iconCls:'icon-clear',handler : function(e) { $(e.data.target).datebox('clear'); }}]"/><br/>
日期2 <input name="date2" class="easyui-datetimebox"   data-options="editable:false,required:false,showSeconds: false" />

5.combobox

	下拉框 <input class="easyui-combobox" name="combox"   
					data-options="valueField:'code',textField:'name',
							data:[
								{'code':'a','name':'a'},
							    {'code':'b','name':'b'},
								{'code':'c','name':'c'}
							],
							editable:true,panelHeight:80,icons:[{iconCls:'icon-cross',handler : function(e) { $(e.data.target).combobox('clear'); }}]" />

6.linkbutton+confirm+alert+showMsg+progress+windows

	按鈕<a id="add"   class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-accept'">新增</a><br/>
	進度<a id="progress"   class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-accept'">進度</a><br/>
	按鈕彈窗<a id="addwin" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-add'">彈窗</a>

		$("#add").bind("click",function(){
			$.messager.confirm("提示","歐克歐克",function(r){
				if(r){
					$.messager.alert("提示","點擊確認");
					showMsg("確認");
				}else{
					$.messager.alert("提示","點擊否認");
					showMsg("否認");
				}
			});
		});
		function showMsg(msg){//提出公用方法
			$.messager.show({
				msg : msg,
				title : "系統提示"
			});
		}

		$("#progress").bind("click",function(){
			$.messager.progress({
				title : "aaaa",
				msg : "bbb",
				text : "ccc",
				interval: 100  //刷新頻率ms
			}); 
			setTimeout(function(){
				$.messager.progress("close");
			}, 5000);//延遲測試
		});

		$("#addwin").bind("click",function(){
			var win = $("<div id='win'></div>").window({
				title : "新增",
				width : 300,
				height: 200,
			    href : "newWin.jsp",
				onLoad : function(){
					//加載其他東西
				},
				onClose : function(){
					win.window('destroy');
				}
			});
		});

7.menubutton

	下拉菜單<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#btn',iconCls:'icon-help',plain:false">幫助</a>   
		  <div id="btn">  
		  		<div id="btn1"  data-options="iconCls:'icon-help'">幫助1</div>  
		  		<div class="menu-sep"></div>   
		  		<div id="btn2"  data-options="iconCls:'icon-help'">幫助2</div>
		  		<div class="menu-sep"></div>   
		  		<div id="btn3"  data-options="iconCls:'icon-help'">幫助3</div>   
		  		<div id="btn3"  data-options="iconCls:'icon-help'">幫助3</div>   
		  		<div data-options="iconCls:'icon-help'"> 
		  			<span>類型</span>   
      				<div>   
            			<div id="btn41">Word</div>   
           			 	<div id="btn42">Excel</div>   
            			<div id="btn43">PowerPoint</div>   
       				</div>
		  		</div>
		  </div>

		$("#btn").menu({
		    onClick:function(item){
		    	var id = item.id;
		    	alert(id);
		    	//其他操作
		    }
		});

8.效果圖

 

github:https://github.com/BeHappyWsz/easyui-validate.git

資源下載：http://download.csdn.net/download/qq_33560169/10159211#

包含了1000個圖標，無法直接放在百度盤內，若需要也可留言。