easyUI详解
1、EasyUI 是前端框架，封装大量 css和封装大量 JS
2、使用前端框架时，给标签定义class 属性，就会有样式和脚本功能了
3、data-options 属性是定义 easyui 属性的，如果 easyui 提供的属性和 html 标签属性相同,这个属性可以不写在 data-options 中
4、如果效果是静态的建议使用纯 html 标签方式，如果效果是动态建议使用 html 结合 js 方式
5、easyui 中所有脚本功能语法:
如果该效果(组件)是 abc,控制 abc 的语法
$(“jquery 选择器获取到 abc”).abc({
属性名:值,
事件:function([参数]){}
})
6、如果该效果(组件)是 abc,控制 abc 方法的语法
$(“jquery 选择器获取到 abc”).abc(“方法名”);//调用方法
$(“jquery 选择器获取到 abc”).abc(“方法名”,”参数”);//调用方法
7、EasyUI 适用于后台管理界面,不适用于前台项目页面
8、优点:处理服务器传递过来的 json数据能力比较强，只要服务器传回固定格式的json数据，几乎不用写代码，效果就会呈现出来
注：能复制绝对不手写，html为弱规范，就算写错一个字母也不会报错
easyUI项目案例详解
一、登陆界面（login.jsp）
1、Panel（面板） 通过纯 html 标签方式创建面板
<div id="p" class="easyui-panel" title="登录"
style="width:400px;height:200px;padding:10px;background:#fafafa;"
data-options="iconCls:'myicon-login'">
<form action="login" method="post" id="login_form">
<table width="225" align="center">
<tr>
<td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">用户管理系统</td>
</tr>
<tr style="height:40px;">
<td>登录名</td>
<td><input type="text" name="username"/> </td>
</tr>
<tr style="height:40px;">
<td>
密码
</td>
<td><input type="password" name="password"/> </td>
</tr>
<tr>
<td colspan="2" align="right">
<a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a>
</td>
</tr>
</table>
</form>
</div>
2、LinkButton（按钮）
$(function(){
$("#btn").click(function(){
alert('easyui');
});
});
3、Form（表单）
$('#ff').form('submit', {
url:...,
onSubmit: function(){
},
success:function(data){
alert(data)
}
});
4、Messager（消息窗口）
$.messager.alert('警告','警告消息');
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
alert('确认删除');
}
});
二、主界面（main.jsp）
1、Layout（布局）
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" 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:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
2、Tree（树） 通过html 结合 js 方式创建树
<ul id="tt"></ul>
$('#tt').tree({
url:'tree_data.json'
});
树控件数据格式化
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
点击树节点
$('#tt').tree({
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
3、Tabs（选项卡）
<div id="tt" 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>
//如果此标题在选项卡中不存在，则新增选项卡，否则选中此标题对应的选项卡
if($("#tt").tabs("getTab",title)==null){
$('#tt').tabs('add',{
title: '新选项卡面板',
//是否选中选项卡
selected: true,
//是否可以关闭
closable:true,
href：……
});
}else{
$("#tt").tabs("select",title);
}
三、角色页面（role.jsp）
1、DataGrid（数据表格）
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
数据表格控件数据格式化，分页时需要具备以下属性：
rows：当前页显示的数据
total：表中总个数
toolbar（定义工具栏）
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}]
});
2、Dialog（对话框窗口）
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: '……',
modal: true
});
四、角色编辑页面（role_edit.jsp）
1、Form（表单）
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
2、Messager（消息窗口）
$.messager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
showType:'slide'
});
easyUI详解的更多相关文章
- jQuery EasyUI 详解
EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...
- easyui下载包详解
easyui包详解: 文件夹: demo--该目录下存放的是 EasyUI PC 版各插件的示例示例.如果不想在官网上查看演示,可以在该目录下找到相应的演示示例 demo-mobile--该目录下存放 ...
- 如约而至，Java 10 正式发布！ Spring+SpringMVC+MyBatis+easyUI整合进阶篇（十四）Redis缓存正确的使用姿势 努力的孩子运气不会太差，跌宕的人生定当更加精彩 优先队列详解(转载)
如约而至,Java 10 正式发布! 3 月 20 日,Oracle 宣布 Java 10 正式发布. 官方已提供下载:http://www.oracle.com/technetwork/java ...
- 基于easyui开发Web版Activiti流程定制器详解（二）——文件列表
上一篇我们介绍了目录结构,这篇给大家整理一个文件列表以及详细说明,方便大家查找文件. 由于设计器文件主要保存在wf/designer和js/designer目录下,所以主要针对这两个目录进行详细说明. ...
- Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）
上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页 了解了LigerUI 中Grid的基本用法 现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解（持续更新） 第十六节：语法总结(3)(C#6.0和C#7.0新语法) 第三节：深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借
ASP.NET MVC深入浅出系列(持续更新) 一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...
- Linq之旅：Linq入门详解（Linq to Objects）
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）
一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...
随机推荐
- webpack学习笔记——解决多次输出的问题&自动编译之启用观察者模式，热重载
[解决多次输出的问题] 昨天学会了用命令打包,如下 webpack entry.js bundle.js 但是会出现多次输出要表现的内容的问题,如下,执行几次上述命令,显示几次,原因是并没有清除之前输 ...
- iframe标签
转载文章:Web前端之iframe详解 iframe基本内涵 通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_ifram ...
- day 9 - 2 函数练习
1.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func(lis): print(lis[1::2]) #取偶数 return lis[::2 ...
- 其他-n个互相独立的连续随机变量中第i小的数值期望
提出问题 有\(n\)个互相独立的\(0\)至\(1\)之间等概率生成的随机变量,求从小到大排序后第\(i\)个数的数值期望 一个简化的问题 我们先来求解一个简化的问题:最大值的数值期望是多少? 我们 ...
- strstr()函数的使用
strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地址:否则,返回NULL. 实例: /** *Descriptio ...
- struts2项目搭建
把strutslib中的所有jar包添加到类路径 在src下创建struts.xml文件 <?xml version="1.0" encoding="UTF-8&q ...
- struts2框架之文件下载（参考第三天学习笔记）
下载 1. 下载是一种响应方式 正常的响应:响应正文是html:response.getWriter().print("html"); 下载的响应: 1.一个流:字节数据:resp ...
- HDU contest808 ACM多校第7场 Problem - 1008： Traffic Network in Numazu
首先嘚瑟一下这场比赛的排名:59 (第一次看到这么多 √ emmmm) 好了进入正文QAQ ...这道题啊,思路很清晰啊. 首先你看到树上路径边权和,然后还带修改,不是显然可以想到 树剖+线段树 维护 ...
- Unity-Rigidbody碰撞穿透
首先,说说碰撞的条件:1.rigidbody(刚体),一般用在主动移动的物体上,比如角色.2.collider,碰撞器,一般用于受力物体上,比如障碍块. 发生概率即触发方式: 1.刚体速度足够快,被撞 ...
- Git如何克隆远程仓库
1.首先选择一个合适的地方创建一个空目录 mkdir learngit 2.通过git Init命令把这个目录变成git可以管理的仓库,瞬间git就把仓库建好了 3.将编写的文件放到 lear ...