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: