（二）EasyUI 使用——常用组件
1. EasyUI常用组件的基本用法
1.1 layout布局
<!-- 布局面板 大小自适应父容器 -->
<div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;">
<!-- 区域面板 -->
<div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'east',title:'东',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'center',title:'中',iconCls:'icon-reload',collapsible:false" style="padding:5px;background:#eee;"></div>
</div>
Js实现页面小功能
<script type="text/javascript">
//浏览器加载web页面时触发
$(function() {
//将北边面板折叠，字符串双引单引均可
$('#cc').layout('collapse', 'north');
//休息3秒
window.setTimeout(function() {
//将南边面板折叠，字符串双引单引均可
$('#cc').layout('collapse', 'south');
}, "3000");
});
</script>
实现页面嵌套
<body class="easyui-layout">
<!-- 北 -->
<div data-options="region:'north'" style="height:150px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<!-- 将中拆分边西和中二部份 -->
<!-- center里增加新的嵌套时，需要将新的嵌套内容包含在新的div里
声明class为easyui-layout fit为true
<div class="easyui-layout" data-options="fit:true">
</div>
-->
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west'" style="width:200px">西部</div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- center里的div要求必须有一个设置宽或高，否则显示不出 -->
<div data-options="region:'north'" style="height:200px">中北部</div>
<div data-options="region:'center'"></div>
</div>
</div>
</div>
</body>
1.2 accordion 分类
<!-- 容器 -->
<div data-options="border:true,animate:true,multiple:false,selected:-1"
id="aa" class="easyui-accordion" style="width:300px;height:500px;"> <!-- 面板 -->
<div title="Title1" data-options="iconCls:'icon-save'"
style="overflow:auto;padding:10px;">内容1</div>
<div title="Title2" data-options="iconCls:'icon-reload'"
style="padding:10px;">内容2</div>
<div title="Title3"
data-options="iconCls:'icon-reload',collapsible:true">内容3</div> </div>
几点属性：
增加一个4号面板并。。。。。
<script type="text/javascript">
$(function() {
//增加一个面板
$("#aa").accordion("add", {
"title" : "Title4",
"content" : "内容4",
"selected" : false,
"iconCls" : "icon-search"
}); //休息3秒
window.setTimeout(function() {
//删除4号面板
$("#aa").accordion("remove", 3);
//取消选择1号面板
$("#aa").accordion("unselect", 0);
}, "3000");
});
</script>
1.3 linkbutton 按钮
<a id="btn-add" class="easyui-linkbutton"
data-options="iconCls:'icon-add'"> 增加 </a>
<a id="btn-find" class="easyui-linkbutton"
data-options="iconCls:'icon-search'"> 查询 </a>
<a id="btn-update" class="easyui-linkbutton"
data-options="iconCls:'icon-edit'"> 修改 </a>
<a id="btn-delete" class="easyui-linkbutton"
data-options="iconCls:'icon-remove'"> 删除 </a> <script type="text/javascript">
/*
$("#btn-add").click(function(){
//将该按失效
$("#btn-add").linkbutton("disable");
});
$("#btn-add").dblclick(function(){
//将该按失效
$("#btn-add").linkbutton("disable");
});
*/ //参数一：字符串类型的事件，多个事件之间通过空格分隔，事件名称符合jquery事件名写法
//参数二：处理函数
$("#btn-add").bind("click dblclick", function() {
//将该按失效
$("#btn-add").linkbutton("disable");
});
</script>
1.4 tabs 选项卡
<!-- 容器面板 -->
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"
data-options="plain:false,border:true,tools:[{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},{
iconCls:'icon-remove',
handler:function(){
alert('删除')
}
}],selected:-1"> <!-- 选项卡面板 -->
<div title="Tab1" data-options="closable:true" style="padding:20px">
tab1</div>
<div title="Tab2" data-options="closable:true"
style="overflow:auto;padding:20px;">tab2</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
style="padding:20px;">tab3</div> </div>
页面加载时增加一个tab4（属性用 Json 格式）
<script type="text/javascript">
$(document).ready(function(){
$("#tt").tabs("add",{
"title":"Tab4",
"content":"tab4",
"selected":false,
"closable":true
});
});
</script>
1.5 pagination（分页）
<!--
total：记录总数100
pageSize：每页显示多少条记录5
pageNumber：当前页号1
pageList:[5,10,15]表示可供选择中每页显示多少条记录，
注意：pageSize的值必须是pageList数组值之一
-->
<div
id="pp"
class="easyui-pagination"
data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'"
style="background:#efefef;border:1px solid #ccc;width:400px">
</div>
该功能实现
<script type="text/javascript">
$("#pp").pagination({
//pageNumber当前页号，例如1
//pageSize获取多少条记录，例如：5
//以上二个参数，需要谁，就接收谁，不一定二个都同时出现，参数名可以任意
"onSelectPage":function(pageNumber,pageSize){
alert(pageNumber + ":" + pageSize);
}
});
</script>
实现中文显示可通过引入 easyui-lang-zh_CN.js 文件
（二）EasyUI 使用——常用组件的更多相关文章
- JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
- EasyUI常用组件（基础）
---------------------------------------------------------------------------------------------------- ...
- Android常用组件
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- Android常用组件【转】
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- 第18讲- UI常用组件之EditText
第18讲UI常用组件之EditText 三.文本输入框EditText EditTex类继承自TextView.EditText是接受用户输入信息的最重要控件.在html当中,相当于<input ...
- 第17讲- UI常用组件之ImageView图片浏览
第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...
- SWT入门-常用组件的使用(转)
转自:http://www.cnblogs.com/kentyshang/archive/2007/08/16/858367.html swt的常用组件button ,text ,combo,list ...
- Ionic 常用组件解析
Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...
- Atitit easyui翻页组件与vue的集成解决方案attilax总结
Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...
随机推荐
- hdu6127
hdu6127 题意 二维平面上存在一些点,每个点都有权值,任意两点组成的线段的权值为这两点权值的乘积,选定一条经过原点的直线,问怎样使得它经过的线段的权值之和最大. 分析 题目等价于用一条直线将平面 ...
- JVM的内存布局
JVM的内存布局包括,其中: Java虚拟机在执行Java程序的过程中会把它所管理的内存(线程相关?)划分为若干个不同的数据区域.有些区域随着虚拟机进程的启动而存在,有些区域则是依赖用户线程的启动和结 ...
- BZOJ 3524 [Poi2014]Couriers（可持久化线段树）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3524 [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个 ...
- [CF915F]Imbalance Value of a Tree
[CF915F]Imbalance Value of a Tree 题目大意: 一棵\(n(n\le10^6)\)个结点的树,每个结点有一个权值\(w_i\).定义\(I(i,j)\)为\(i\)到\ ...
- Problem K: 数字菱形
#include<stdio.h> int main() { int n,i,j,k,t,x,q,p; while(scanf("%d",&n)!=EOF) ; ...
- OC语言基础之类的本质
一.类的本质 1: // 类本身也是一个对象,是个Class类型的对象,简称类对象 2: 3: /* 4: 利用Class 创建 Person类对象 5: 6: 利用 Person类对象 创建 Per ...
- Ubuntu 14中，Foxmail关联163邮箱账号时，总提示“密码错误”的解决方案
不知道在什么时候,网易邮箱搞了个“客户端授权密码”功能,也就是说,原先输入自己设置的邮箱密码即可完成登录,但是现在需要输入官方产生的“授权密码”,方可完成登录授权! 相关路径: 设置 -> PO ...
- centos系统的时间时区和MySQL的时间时区问题
原文:http://1567045.blog.51cto.com/1557045/1074971 centos系统的时间时区和MySQL的时间时区问题 年轻人做事要细心,特别我们这些搞IT的千万不莽 ...
- 【POI】对于POI无法处理超大xls等文件，官方解决方法【已解决】【多线程提升速率待定】
本次使用POI处理xlsx文件,莫名的遇到了一个无法逾越的问题. 总共71个xlsx文件,单个文件最大达到50M以上,71个xls文件摆在那里就有3-4G的大小. 在起始处理的时候,发现原本适用于正常 ...
- 【JVM】调优笔记2-----JVM在JDK1.8以后的新特性以及VisualVM的安装使用
一.JVM在新版本的改进更新以及相关知识 1.JVM在新版本的改进更新 图中可以看到运行时常量池是放在方法区的 1.1对比: JDK 1.7 及以往的 JDK 版本中,Java 类信息.常量池.静态变 ...