EasyUi的使用方法
EasyUi
我们可以在easyui的官网下载它,下载完成后,将文件导入项目,我么需要引入五个重要的文件
<!--EasyUI的核心样式--> <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" /> <!--EasyUI的图标样式--> <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" /> <!--jquery的核心JS--> <script type="text/javascript" src="js/easyui/jquery.min.js"></script> <!--jquery EasyUI的核心JS--> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <!-- 信息本地化js文件 --> <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
我们首先使用easyui实现一个小的对话框:
<div class="easyui-dialog" title="对话" style="width: 300px;height: 300px;">
你好
</div>
实现的效果:
Parser 解析器:Parser 解析器是专门解析渲染各种 UI 组件了,一般来说,我们并不需要使用 它即可自动完成 UI 组件的解析工作。当然,有时可能在某些环境下需要手动 解析的情况。 手动解析一般是使用 class 的情况下有效,比如设置 class="easyui-dialog"。默认解析器是打开的 如果设置为 false 此时组件不被解析,样式就会丢失!
解析指定 ui 组件解析时,必须要设置父类容器才可以解析到。
<script type="text/javascript"> //关闭解析 $.parser.auto=false; //解析指定节点 $(function(){ $.parser.parse("#dialog1"); }) </script>
easyui-draggable 拖动组件,具有这个属性的元素都可以被拖动。
$("#draggable").draggable({ //edge:500 //axis:"h", // 纵轴v 横轴 h //disabled:false,//是否可以进行拖动 //deltaX:200, revert:true, //拖动停止时返回起始位置 handle:"#zt"
//当然也可以在这里面定义事件
//true时 拖动执行 false 时取消拖动
onBeforeDrag:function(e){
alert("返回true时,在拖动前触发该事件..");
return true; },
//拖动时触发
onStartDrag:function(e){
alert("拖动时触发。。。");
},
//拖动停止时触发
onStopDrag:function(e){
alert("拖动停止时触发!");
}
});
easyui-resizable 可调整大小
<div id="rr1" class="easyui-resizable" dataoptions="maxWidth:300,maxHeight:500" style="width:100px; height:100px;background-color: red">
这里是可调整大小区域
</div>
maxWidth , maxHeight 可用于限定大小!
easyui-linkbutton 按钮组件
$("#btn").linkbutton({ iconCls:"icon-search" }); $("#btn").linkbutton('disable');
easyui-panel 面板组件
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
closable boolean 定义是否显示关闭按钮。
$("#p").panel({ iconCls:"icon-help", /*width:800, height:400,*/ /*fit:true, // 子容器自适应父容器的大小*/ border:true, collapsible:true, minimizable:true, maximizable:true, closable:true, tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} } ], collapsed:true, // 默认面板折叠 href:"js/data.json", loadingMessage:"正在加载中...", extractor:function(data){ // 解析json格式的数据 data = eval("("+data+")"); console.log(data); var html = "姓名:<input type='text' value='"+data.uname+"'/>"; return html; }, onExpand:function(){ alert("数据加载完毕!"); } });
easyui-tabs 选项卡
<body> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;" href="js/data.json"> 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> </body> <script type="text/javascript"> $("#tt").tabs({ plain:false, // 如果设置为true,将不显示面板的背景 fit:true, // 自适应父容器大小 tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }], toolPosition:"left", tabPosition:"top", headerWidth:300, tabHeight:50 }); </script>
easyui-accordion 手风琴组件
<body> <div id="aa" class="easyui-accordion" style="width:150px;height:400px;" animate=true> <div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生学分</a> </div> <div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师绩效</a> </div> <div title="专业管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a> </div> <div title="系统管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a> </div> </div> </body>
easyui-layout 布局组件
//此处在body中添加class easyui-layout 然后在创建五个div,分别对应不同的位置,可根据自己的需要删除添加div
<body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;" border=false></div> <div data-options="region:'south',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:'菜单导航栏',split:true" border=false style="width:170px;"></div> <div data-options="region:'center'" style="padding:5px;background:#eee;"></div> </body>
easyui-layout,tabs,accordions联合组成的简单页面
<body class="easyui-layout" > <!--上面 logo start --> <div data-options="region:'north',split:true" style="height:100px;" border=false> <img src="img/logo.png" style="height:100px;width: 100%;"/> </div> <!--上面 logo end --> <div data-options="region:'south',split:true" style="height:70px;text-align: center;font-size: 15px;color: gray;"> 上海尚学堂松江校区地址:上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层 咨询电话:021-67690939 <br /> Copyright 2006-2017 上海尚学堂智能科技有限公司 的icp备案号 (沪ICP备16053543号) </div> <!--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> --> <!--左边 菜单导航栏 start--> <div data-options="region:'west',title:'菜单导航栏',split:true" border=false style="width:170px;"> <div id="aa" class="easyui-accordion" fit=true animate=true> <div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生信息','student.html')">学生信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生学分','student_score.html')">学生学分</a> </div> <div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教师信息')">教师信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教师绩效')">教师绩效</a> </div> <div title="专业管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a> </div> <div title="系统管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a> </div> </div> </div> <!--左边 菜单导航栏 end--> <div data-options="region:'center'" style="padding:5px;" border=false> <div id="tt" class="easyui-tabs" fit=true > <div title="主页" style="padding:20px;"> <h1>欢迎来到XXX系统!!!</h1> </div> </div> </div> </body> <script type="text/javascript"> /** * 打开选项卡 * 判断选项卡是否存在 exists 表明指定的面板是否存在,'which'参数可以是选项卡面板的标题或索引。 * 不存在 新建选项卡 * 如果存在 选中当前选项卡 select 选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 * @param {Object} title */ function openTabs(title,url){ console.log(title); // 判断选项卡是否存在 var exists = $("#tt").tabs("exists",title); if (exists) { //如果返回true,说明选项卡存在,选中当前选项卡 $("#tt").tabs("select",title); } else { //如果返回false,说明选项卡不存在,新建选项卡 $('#tt').tabs('add',{ title: title, selected: true, closable:true, iconCls:'icon-edit', href:url }); } } /** * 添加新的面板 */ function addPanel() { $("#aa").accordion("add",{ title:"新的面板", selected:false, iconCls:"icon-tip", href:"js/data.json" }); } function removePanel() { $("#aa").accordion("remove","新的面板"); } </script>