(二)EasyUI 使用——常用组件
2024-10-20 20:43:12
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 文件
最新文章
- 【转载】JS中bind方法与函数柯里化
- 加密方式&;数字签名
- 前端开发工程师:网易web前端课程,价值1499元【无水印版】
- FineUI第一天
- android 项目学习随笔十四(WebView)
- (六)6.11 Neurons Networks implements of self-taught learning
- Codeforces Round #226 (Div. 2)C. Bear and Prime Numbers
- struts2+ajax
- LeetCode 58 Spiral Matrix II
- KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上
- Unity3D 打包Standalone(exe文件) Shader丢失
- Hello,World!!----来自半个新OIer的问候
- mysql触发器new和old
- webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)
- iOS日期问题
- 理解 Linux 的虚拟内存
- Git 与SVN
- 小程序url传参如何写变量
- shell进阶函数
- FireDac 组件说明二