jQuery easyui（上）

最新推荐文章于 2024-05-05 23:47:53 发布

薚＆阳

最新推荐文章于 2024-05-05 23:47:53 发布

阅读量308

点赞数

文章标签：总结

本文链接：https://blog.csdn.net/PathError/article/details/96491138

版权

1.easyui的认识

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

(1)是一组基于jQuery的UI(用户界面)插件集合;
(2)而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
(3)学习的时候，成本不大，easyui知识点由JS+HTML+CSS+jquery，容易上手
(4)开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。--完成页面的构建
(5)学习方法 copy+edit 官网里面有很多示例
(6)Easyui是属于前端框架

  

>  Layui elementui easyui bootstarp vue 。。。

     Bootstrap -- 响应式的jquery框架 快速构建web程序的框架
 Easyui 就是基于jquery做界面的框架，上手容易，学习方式copy+edit

2.easyui应该怎么使用**

步骤：

(1)下载easyui

(2) 在页面引入对应easyui的文件

    <!-- easyui的样式主题文件 -->
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<!-- easyui的系统图标-->   
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<!-- easyui依赖的jquery库-->   
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<!-- easyui的插件库-->      
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<!-- easyui的汉化包 -->
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

3.easy组件的创建方式**

(1)通过HTML来创建  --- class="easyui-组件名"

(2)通过js代码来创建

$("#p1").panel({

title:‘标题’

})

4.easyui加载原理**

使用EasyUI时，有个经常遇到的问题，页面还没有渲染完成的时候，就展现了。

刚刚开始很混乱，等加载完成后，就好了。

$.parser.onComplete，这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候，页面的并不是马上就展现，而是会有一个混乱的过程，之后一闪就又好了。

其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析，当你们布局和组件使用的比较多的时候，完整的解析组件就需要一个过程，而在这个过程中就会出现短暂的界面混乱现象。

要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。

<#include “common/loadingDiv.html”/>（Freemarker的include语法，模版用的.html后缀）loadingDiv.html

<div id='loadingDiv' style="position: absolute; z-index: 1000; top: 0px; left: 0px; 
width: 100%; height: 100%; background: white; text-align: center;"> 
<h1 style="top: 48%; position: relative;"> 
<font color="#15428B">努力加载中···</font> 
</h1> 
t;/div> 
<script type="text/javascript"> 
function closeLoading() { 
$("#loadingDiv").fadeOut("normal", function () { 
$(this).remove(); 
}); 
} 
var no; 
$.parser.onComplete = function () { 
if (no) clearTimeout(no); 
no = setTimeout(closeLoading, 1000); 
} 
</script

在这里插入图片描述

5.easyui常用组件

5.1 Pagination（分页）

使用$.fn.pagination.defaults重写默认值对象

.分页组件是一个比较常用的组件之一，我们可以有两种使用方式，一种是直接在标签上面添加相应的属性，另一种是通过js进行操作。
静态方式创建如下：

动态方式：

5.2、Layout组件的使用

(5.2.1) layout的使用

布局是最常用的组件了，官方提供的是拥有5个布局方向的：北、南、东、西、中.

基本的使用方式如下：

	<!-- 上 -->
	<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" style="height:100px;"></div>   
    
    <!-- 下 -->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
   
   	<!-- 右 -->
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
   	<!-- 左 -->
    <div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>   
    <!-- 中 -->
    
    <div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div>   
	
	
	
	</div>

我们可以为其添加js的属性：

对于布局来说，当然也还是可以进行嵌套处理的，我们可以摘除掉我们不需要的部分，然后将需要的部分进行再次组装。

	 <div data-options="region:'center'"> 
	 	<div  class="easyui-layout"  data-options="fit:true"  >
	 	
	 		<div data-options="region:'west',border:false" style="width:180px"></div>   
        	<div data-options="region:'center'">
        	
        		<div class="easyui-layout"  data-options="fit:true">
        			
        		    	 <div data-options="region:'north'" style="height:100px"></div>   
						 <div data-options="region:'south'" ></div>   

        		</div>
        	</div>   	
	 	</div>
	   </div>
	
	</div>

效果如下：

(5.2.2) 面板的使用
第一种方式：通过标签直接创建。

第二种方式：

panel content.

(5.2.3 )Accordion（分类）
使用$.fn.accordion.defaults重写默认值对象。

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的’href’属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

(5.2.4) Tabs（选项卡）

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

5.3、Menu 和Button组件的使用
LinkButton（按钮）
使用$.fn.linkbutton.defaults重写默认值对象。

按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

增加部门

<a id=“btn_find” href="#" class=“easyui-linkbutton” data-options=“iconCls:‘icon-search’,group:‘sex’,toggle:true”">查找部门

<a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部门</a><br />
<a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">删除部门</a><br />
 
	
<script>
	$("a").click(function(){
		//获取单击的按钮的标题
		var title=$(this).text();
		//去空格
		title=$.trim(title);
		alert(title);
	
	});
</script>

5.4、Form组件的使用

（5.4.1） ValidateBox（验证框）
使用$.fn.validatebox.defaults重写默认值对象。

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

姓名:

邮箱:

密码:

<script>
	$("#nameID").validatebox({
		required:true,
		//validType:'length[1,6]'
		validType:['length[1,6]','chinese'],
		delay:200,
		tipPosition:'left'
	
	});
	//自定义规则，验证是否为汉字
	$.extend($.fn.validatebox.defaults.rules,{
		chinese:{
			//validator表示用户在文本框中输入的内容
			validator:function(value){
				var reg=/^[\u4e00-\u9fa5]/;
				if(reg.test(value)){
					return true;
				}
			},
			//如果不符合中文规则，
			message:'姓名必须是中文'
		}
	
	
	});
	
	$("#emailID").validatebox({
		required:true,
		validType: ['length[1,30]','email']
	
	});
	
	$("#pwdID").validatebox({
		required:true,
		validType: ['length[6,6]','pwdnum']
	
	});
		//自定义规则，验证是否为密码
	$.extend($.fn.validatebox.defaults.rules,{
		pwdnum:{
			//validator表示用户在文本框中输入的内容
			validator:function(value){
				var reg=/^[0-9]/;
				if(reg.test(value)){
					return true;
				}
			},
			//如果不符合中文规则，
			message:'密码必须为数字'
		}
	});
	

</script>

对于表单验证，我们可以对其进行自定义规则。这个时候如果加上正则验证，就完全可以写出一个非常好的验证功能的了。在上面的这个属性中，还可以对提示框的位置进行改变，可以使用的属性是left和right。下面图片中显示的就是一个提示框在left的情况，一般情况下使用默认的right就可以了。

（5.4.2） ComboBox（下拉列表框）

扩展自 $. f n . c o m b o . d e f a u l t s 。使用$ .fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

静态方法创建：

aitem1 bitem2 bitem3 ditem4 eitem5

动态方法创建：

（5.4.3） DateBox（日期输入框）
扩展自 $. f n . c o m b o . d e f a u l t s 。使用$ .fn.datebox.defaults重写默认值对象。

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

日期：

	<script>
	$('#dd').datebox({    
	    required:true   
	});
	
	
	$("#dd").datebox({
		onSelect:function(mydate){
		
			var year=mydate.getFullYear();
			var month=mydate.getMonth()+1;
			var date=mydate.getDate();
		
			alert(year+"年"+month+"月"+date+"日");
		}
	
	});
	
	
	</script>

（5.4.4） Slider（滑动条）
使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

学生成绩:

<script>
	$("#ss").slider({
		mode:"h",
		min:0,
		max:100,
		rule:[0,'|',25,'|',50,'|',75,'|',100],
		showTip:true,
		value:60
	});

	$("#ss").slider({
		onChange:function(newValue){
			if(newValue==60){
				$("#tip").text("合格").css("color","yellow");
			}else if(newValue==70){
				$("#tip").text("中等").css("color","pink");
			}else if(newValue==80){
				$("#tip").text("良好").css("color","blue");
			}else if(newValue==90){
				$("#tip").text("优秀").css("color","green");
			}
		}
	})


</script>

（5.4.5） NumberSpinner（数字微调）
数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值。

商品数量：
<input id="ss" style="width:100px">  <br />  

你一共买了<span id="num">1</span>件商品
	<script>
	$('#ss').numberspinner({    
	  value:1,
	    min:1,
	    max:100   
	});  
		
	$('#ss').numberspinner({
		onSpinUp:function(){
			var value=$("#ss").numberspinner("getValue");
			//将当前值设置到span标签
			$("#num").text(value).css("color","red");
		},
		onSpinDown:function(){
			var value=$("#ss").numberspinner("getValue");
			//将当前值设置到span标签
			$("#num").text(value).css("color","red");
		}

	});    	
		
		
		//添加键盘事件
		$('#ss').keyup(function(event){
			//获取按键的unicode编码
			var myevent=event;
			var code=myevent.keyCode;
			if(code==13){
				var value=$(this).val();
				//将当前值设置到span标签
				$("#num").text(value).css("color","red");
			}
		});
		
	</script>

.5.5、窗口组件的使用
（.5.5.1） Window（窗口）
扩展自 $. f n . p a n e l . d e f a u l t s 。使用$ .fn.window.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

静态方法创建：

Window Content

动态创建：

<div id="win1"></div>  
<div id="win2"></div>

（5.5.2） Dialog（对话框窗口）

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<div id="win1"></div>

（5.5.3） Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

<script>
	$("input").click(function(){
	
		//定位button按钮，提供单击事件
		var tip=$(this).val();
		tip=$.trim(tip);
		if("警告框"==tip){
			$.messager.alert("警告框","警告处分","waring",function(){
				//alert("关闭");
			});
		}
		
		if("确认框"==tip){
		$.messager.confirm("确认框","你确认要删除么",function(value){
			alert(value);
		});
		}
		
		if("输入框"==tip){
		$.messager.prompt("输入框","请输入你的姓名",function(name){
			alert(name);
		});
		}
		
		if("显示框"==tip){
		$.messager.show({
			showType: "slide",
			showSpeed: 600,
			width:300,
			height:300,
			title:"显示框",
			timeout:5000,
			msg:'消息将在5秒后关闭。'
			
		}
		
		);
		}
	});



</script>

5.6、表格和树组件的使用
使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

第一章
- 第一节
  - 第一条
  - 第二条
- 第二节
第二章

<script type="text/javascript">
	$(function(){
		//收起所有的选项
		$("#treeID").tree("collapseAll");
	});
</script>

我们还可以引入外部文件，使用json格式的文件来添加到这个tree中。

json格式为：
[
{
“id”:1,
“text”:“广东”,
“state”:“closed”,
“children”:[
{
“id”:11,
“text”:“广州” ,
“state”:“closed”,
“children”:[
{
“id”:111,
“text”:“天河”
},
{
“id”:112,
“text”:“越秀”
}
]
},
{
“id”:12,
“text”:“深圳”
}
]
},
{
“id”:2,
“text”:“湖南”
}
]

6.组件的三要素

6.1 属性

属性：用来描述组件的信息，比如title，closable

属性的注意事项：

(1)属性在使用，在创建的时候去指定属性，创建完之后修改属性不能达到预期的效果

(2) 属性都是有默认的值，一般不会去修改默认，要改的话，在创建的时候去指定属性

（3）属性创建方式

a.可以直接在标签上面写属性名=“属性值”

			  b.通过data-options这个里面进行指定属性  ，data-options tools:[{},{}],就不要放到data-options外面

c. a和b结合起来使用

d.通过js在创建的时候指定

6.2 方法

什么情况下是调用方法、

$("#id").panel(‘open’)；

$("#id").panel(‘close’)；

$("#id").panel('refresh‘)；

什么情况下创建组件

$("#id").panel({参数})

6.3 事件

怎么给组件添加事件

$("#tree").tree({

事件名:function(){}

onClick:function(node){

alert(node.text);

}

})

薚＆阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery easyui（上）

1.easyui的认识easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui...
复制链接

扫一扫