jQuery EasyUI
1.1. 介绍
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
1.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>
1.3创建组件
方式有两种：
-
HTML创建组件的方式
<div id="p1" class="easyui-panel" style="width: 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;" title="我的面板" iconCls="icon-ok" collapsible="true"> <h1>内容xxxx</h1> </div>
2.JS创建
$(function() {
/*Js创建组件方式*/
$("#p2").panel({
//面板属性
title : "你的面板",
tools: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
});
1.4 easyui中linkbutton组件的使用
按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
<script type="text/javascript">
$(function() {
/*Js创建组件方式*/
$('#btn1').linkbutton({
//定义属性
//表示图标
iconCls: 'icon-cut' ,
//宽度为80px
width:"80px",
//为true时禁用按钮,点击时绑定的事件不执行
//disabled:"true"
//定义按钮图标位置
iconAlign:'bottom',
//改变按钮大小
//size:"large",
});
});
//是否自动解析EasyUI组件
//$.parser.auto = false;
</script>
</head>
<body>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">ok</a>
<!--绑定事件：弹出cut-->
<a id="btn1" href="#" onclick="javascript:alert('cut')">cut</a>
<div style="padding:5px;border:1px solid #ddd;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ,group:'m2',toggle:'true'">测试</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ,group:'m2',toggle:'true'">测试</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ,group:'m2',toggle:'true'">测试</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ,group:'m2',toggle:'true'">测试</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ,group:'m2',toggle:'true'">测试</a>
</div>
</body>
1.5 penal组件的使用
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置，需要通过
进行创建。
<style type="text/css">
.pm{
position: absolute;
}
</style>
<script type="text/javascript">
$(function(){
/**
* 一个组件创建完，就可以去改变属性的值，但是不一定会改变组件属性的值，比如//修改body的宽度,title的宽度没有办法修改$("#p").css('width','1000px');
*
*/
$("#p").panel({
left:'100px',
cls:'pm'
});
//修改body的宽度,title的宽度没有办法修改
$("#p").css('width','1000px');
//只能隐藏body
//$("#p").hide();
//修改body，所以title没变化
$("#p").attr('title','收到');
});
</script>
</head>
<body>
<!--penal组件： title：名字 iconCls：图标 width：宽度 padding：内容距离上边界
collapsible：定义是否显示可折叠按钮。
closable：定义是否显示关闭按钮。
tools:自定义工具菜单，可用值：
1) 数组，每个元素都包含'iconCls'和'handler'属性。
2) 指向工具菜单的选择器。
fit：当设置为true的时候面板大小将自适应父容器
loadingMessage：在加载远程数据的时候在面板内显示一条消息。
-->
<div id="p" class="easyui-panel" title="面板1"
style="width: 300px; height: 200px; padding: 100px;"
iconCls="icon-save"
collapsible="true"
minimizable="false"
maximizable="true"
closable="true"
tools="#tt"
fit="false"
loadingMessage="加载中..."
href="123.txt"
<!--远程数据-->
>
<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>
</body>
1.6组件三要素
Easyui组件都具有属性、方法、事件这三个要素
属性：
(1)所有的属性都定义在jQuery.fn.{plugin}.defaults里面。
如果创建组件的时候,我们没有设置组件的属性,那么就使用默认属性.
(2)属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效；
如：$("#p1").attr("title","你的面板");无效
$("#p1").attr("closed","true");无效
（3）html定义属性方式：
（a）直接作为标签的自定义属性，如：<div id="p" class="easyui-panel" title="面板1"></div>
（b）data属性. data-options,如：<div class="easyui-panel" data-options="title:'面板标题',closed:true"></div>
（c）以上两种混合使用 ，如：<div class="easyui-panel" title="面板标题" data-options="closed:true"></div>
区别：自定义属性的值只能是一个普通的字符串,不能写事件函数名和json数组.
（4）使用js来创建时，定义属性
$("#p1").panel({
title:"标题",
closed:false
});
方法：
$('selector').plugin('method', [parameter]);
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
如：//关闭面板
$("#p").panel('close');
事件：如果组件发生了什么事情，那么它就会通过事件反应给我们。
如：/事件：onCollapse（在面板折叠之后触发）
$("#p").panel({
onCollapse:function(){
alert('已关闭')
}
});
代码：
$(function(){
//事件：onCollapse（在面板折叠之后触发）
console.log($.fn.panel.defaults);
$("#p").panel({
onCollapse:function(){
alert('已关闭')
}
});
$("#button1").click(function(){
//清除面板信息
$("#p").panel('clear');
});
//点击事件
$("#button2").click(function(){
//关闭面板
$("#p").panel('close');
});
});
</script>
</head>
<body>
<!--penal组件： title：名字 iconCls：图标 width：宽度 padding：内容距离上边界
collapsible：定义是否显示可折叠按钮。
closable：定义是否显示关闭按钮。
tools:自定义工具菜单，可用值：
1) 数组，每个元素都包含'iconCls'和'handler'属性。
2) 指向工具菜单的选择器。
fit：当设置为true的时候面板大小将自适应父容器
loadingMessage：在加载远程数据的时候在面板内显示一条消息。
-->
<div id="p" class="easyui-panel" title="面板1"
style="width: 300px; height: 200px; padding: 100px;"
iconCls="icon-save"
collapsible="true"
minimizable="false"
maximizable="true"
closable="true"
tools="#tt"
fit="false"
loadingMessage="加载中..."
href="123.txt"
>
<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="tt">
<a id ="button1" href="javascript:void(0)" class="icon-add" ></a>
<a id ="button2" href="javascript:void(0)" class="icon-ok" ></a>
</div>
</body>
1.7树状菜单
Tree（树）
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
</head>
<body>
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
1.8右键菜单(上下文菜单)
<script type="text/javascript">
contextmenu : 右键菜单(上下文菜单)
$(document).on('contextmenu', function(event) {
event 事件对象: 描述了事件发生时所有的信息,包含事件名,事件源,触发事件的坐标.
* */
$(function(){
//当前整个文档作为对象
$(document).on('contextmenu',function(event){
//阻止浏览器默认的右键事件
event.preventDefault();
//显示快捷菜单
$("#mm").menu('show',{
left:event.pageX,
top:event.pageY
})
})
});
</script>
</head>
<body>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
</body>
1.9选项卡面板页签
<script type="text/javascript">
/*Tabs（选项卡）：
* 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮
*/
//添加选项卡
function addPanel(){
$('#tt').tabs('add',{
title: '新选项卡面板',
selected: false,
closable:true
});
}
//删除选项卡
function removePanel(){
var tab = $('#tt').tabs('getSelected');
//获取当前选项卡的索引值
var index = $('#tt').tabs('getTabIndex',tab);
//调用方法:colse关闭对应索引值的选项卡
$("#tt").tabs('close',index);
}
</script>
</head>
<body>
<!--设置选项卡组件-->
<div id="tt" tools="#tab-tools" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
</body>
1.10 Messager（消息窗口）
<script type="text/javascript">
/*
Messager（消息窗口）：
消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。
所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
* */
$(function(){
/*
* $.messager.alert()
显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数
* */
/*$.messager.alert('警告','警告消息');
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
alert('确认删除');
}
}); */
/*$.messager.show()
在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：
showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
showSpeed：定义窗口显示的过度时间。默认：600毫秒。
width：定义消息窗口的宽度。默认：250px。
height：定义消息窗口的高度。默认：100px。
title：在头部面板显示的标题文本。
msg：显示的消息文本。
style：定义消息窗体的自定义样式。
timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。
* */
/*setInterval(function(){
$.messager.show({
title:'温馨提示',
width:350,
showSpeed:3000,
msg:'你的余额已不足，请及时充费',
showType:'slide', //show=从右下角往左上角 slide=滑动 fade=淡入
//消失时间
timeout:500
})},3000);*/
/*
显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。
* */
/* $.messager.confirm('温馨提示', '亲，您真的狠心删除我？', function(r){
if (r){
alert('删除工作。。。');
}
});*/
/* 显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(val): 在用户输入一个值参数的时候执行的回调函数。*/
/*$.messager.prompt('提示信息', '请输入你的姓名：', function(r){
if (r){
alert('你的姓名是：' + r);
}
});*/
/*
显示一个进度消息窗体。
属性定义为：
title：在头部面板显示的标题文本。默认：空。
msg：显示的消息文本。默认：空。
text：在进度条上显示的文本。默认：undefined。
interval：每次进度更新的间隔时间。默认：300毫秒。
* */
$.messager.progress();
setInterval(function(){
$.messager.progress('close');
},3000);
});
</script>
</head>
<body>
</body>
1.11 Form组件
<script type="text/javascript">
/*
*Form表单：
* form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。
* 当提交表单的时候可以调用validate方法检查表单是否有效。
* */
//加载本地数据
function loadLocal(){
//加载
$('#ff').form('load',{
name:'张三',
email:'123@qq.com',
subject:'语文',
message:'首都师范IE'
});
}
//加载设置的数据
function loadRemote(){
//加载
$('#ff').form('load','data.json');
}
//清理数据
function clearForm(){
$('#ff').form('clear');
}
$(function(){
$("#submitBtn").on('click',function(){
$('#ff').form('submit', {
url:'123.txt',
onSubmit: function(){
return true;
},
success:function(data){
alert(data)
}
});
});
});
</script>
</head>
<body>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadLocal()">加载本地数据</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">加载远程数据</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清理</a>
</div>
<div id="employeeDialog" class="easyui-dialog"
style="width: 300px; height: 300px; padding: 10px"
data-options="title:'用户信息',buttons:'#bs'">
<!--创建form表单-->
<form id="ff" method="get" action="/xxx">
<table cellpadding="5">
<tr>
<td>姓名:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>科目:</td>
<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
</tr>
<tr>
<td>信息:</td>
<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
</tr>
</table>
</form>
</div>
<div id="bs">
<a class="easyui-linkbutton" iconCls="icon-ok" onclick="$('#ff').submit();">提交[方式一]</a>
<a class="easyui-linkbutton" iconCls="icon-ok" id="submitBtn">提交[方式二]</a>
</div>
</body>
扫一扫
2711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
