easyui笔记

1、入门

1.1. 简介

封装大量的jQuery插件(简化ajax，jquery，css样式，布局)

• 学习内容

插件实现:
   ① HTML标签+插件的class样式。
       <a href="#" class="easyui-linkbutton">我是讲文明</a>
   ② HTML标签+基于编程的插件实现
       <a href='#' id="btn">我是洪世鹏</a>
       js代码： $("#btn").linkbutton();

插件内容：
   属性：设置插件的样式。图标，宽度，高度。
   事件：单击事件，双击
   方法：修改插件属性，状态。

• 学习方法

1. 掌握easyui插件开发模板[记住]
2. 通过文档配合，学习他的属性 事件 方法。[查看文档]

1.2. 环境搭建

• 资源文件介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qBrpBa8n-1632141642930)(https://static01.imgkr.com/temp/3f4fcc3d9c494f198775fe7e96f12dc0.png)]

• 搭建环境的步骤

1. 导入需要的css样式文件。easyui.css    icon.css

2. 导入相关的js文件
   jquery.min.js
   jquery.easyui.min.js
   jquery.easyui-lang-zh_CN.js

3. 注意：
   themes中的文件相对路径不能变。

2、第一个插件

2.1. linkbutton 按钮

• 标准开发步骤

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUbZeKF5-1632141642933)(https://static01.imgkr.com/temp/687f11eb007745feb430d14fa6c17a61.png)]

标签： <a href="#">按钮</a>

样式名： 规范: easyui-样式名
       <a href="#" class="easyui-linkbutton">按钮</a>
js插件名：
   $("选中超链接").插件名();
   $("a").linkbutton();

2.2. 代码模板

• 实现方式1

HTML标签+样式

• 实现方式2

HTML标签+编程插件方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RHjYi8dC-1632141642937)(https://static01.imgkr.com/temp/b4d4186900b54112b90b4d3e70b740c2.png)]

实例：

	<!-- HTML标签 + esyui-样式 -->
  	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">黄浩</a>

  	<!-- HTML标签+ easyui 插件方法 -->
  	<a style="color:green;" id="btn1" href="#">王惠凯</a>

  	<script>
  		//使用easyui按钮插件
  		$("#btn1").linkbutton({
     
  			onClick:function(){
     
  				//alert("王惠凯，被点了。");
  				//调用改变大小的resize方法。
  				$("#btn1").linkbutton('resize',{
     width:300,height:100});
  			}
  		});
		
		
		function testEvent(){
     
			alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
			//调用按钮的 disable方法。
			//$("按钮").linkbutton('disable');
			$("a:first").linkbutton('disable');
		}
  	</script>

2.3. EasyUI插件核心模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVymOgOi-1632141642938)(https://static01.imgkr.com/temp/8f5c0292ac1d49ec89114181a0406b44.png)]

• 属性

基于标签规范：
<标签 class="easyui-样式名" data-options="属性名:值,属性名:值"></标签>

基于编程的规范：
<标签 id="tag"></标签>

$("#tag").插件名({
   属性名:值,
   属性名:值,
   ……
}

• 事件

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bisbGFoJ-1632141642939)(https://static01.imgkr.com/temp/29d031bfc3024f7795e9c6d2e2461206.png)]

基于标签的规范:
<标签 class="easyui-样式名" data-options="属性名:值,属性名:值,事件名:事件函数名"></标签>

基于编程的方式:
<标签 id="tag"></标签>

$("#tag").插件名({
   属性名:值,
   属性名:值,
   事件名:事件函数名，
   事件名:function(){
   ……
   }
});

• 方法

调用模板：[重要]
$("标签").easyui插件('方法名',方法传入的参数);

例如:
$("a").linkbutton('resize',{width:300,height:100});

3、基本插件库

3.1. Panel面板

• 效果

• 代码

标签: div

class样式名: easyui-panel

插件方法: $("div").panel();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmPz4hv4-1632141642940)(https://static01.imgkr.com/temp/d2adc234d8a540b6a4dbe4ffa5d9bc5b.png)]

实例：

	<!-- 标签div+easyui-panel -->
  	<div class="easyui-panel" data-options="title:'我是标题',iconCls:'icon-man'">路征信</div>
  	<hr />
  	<!-- 准备按钮 -->
  	<div id="tt">
  		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
  	</div>
  	<!-- div+panel() -->
  	<div id="p1">刘远远远远远远远远远远远远远远远远远远，来啦老弟。</div>
  	<script>
  		/* 生效一个panel插件 */
  		
  		$("#p1").panel({
   
  			title:"玉龙标题",//标题
  			iconCls:"icon-man",//标题图标
  			width:600,//宽度 400
  			height:300,//高度 300
  			closable:true,//显示关闭按钮
  			maximizable:true,//最大化按钮
  			tools:'#tt',//引用按钮组
  			href:"${pageContext.request.contextPath}/index.jsp",//引用远程页面,写目标页面的URI
  		});
  	</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8ovG1BY-1632141642941)(https://static01.imgkr.com/temp/5afacd4213294a5ea346ab3ba06d7e17.png)]

3.2. window面板

• 代码

标签 div

样式名 easyui-window

插件方法名 $("div").window()

重要:

window继承panel,panel的属性，事件，方法都可以在window中使用

实例：

	<!-- 定义按钮组 -->
	<div id="tt1">
		<a href="#" class="easyui-linkbutton" data-options="iconCls: