1、Layout布局的选项
2、Accordion手风琴的选项
3、Tabs选项卡的方法
4、后台布局界面
5、WebContent/jsp/layout_001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String root = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>布局案例</title> <!-- 引入外部样式 --> <link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" /> <!-- 引入easyui依赖库 --> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" /> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { /* 1.后台布局典型案例 1.1 整个布局分为【上、左、右】三部分 1.2 左边一般为菜单栏,region="west",嵌入easyui-accordion手风琴组件 1.3 右边一般为内容区,region="center",嵌入easyui-tabs选项卡组件 1.4 easyui-layout一般设置在<body>标签上,以充满整个区域 2.layout布局组件的属性说明 2.1 title:layout panel的标题文字 2.2 region:定义layout panel的位置,其值是下列之一:north、south、east、west、center 2.3 split:true就显示拆分栏,用户可以用它改变panel的尺寸 2.4 iconCls:在panel头部显示一个图标的CSS类 2.5 fit:true表示自适应父容器 2.6 closable:true表示该选项卡可关闭 */ $('a[title]').click(function(){ var src = $(this).attr('title'); var title = $(this).html(); if($('#tt').tabs('exists',title)){ $('#tt').tabs('select',title); } else { $('#tt').tabs('add',{ title:title, content:'<iframe frameborder=0 style=width:100%;height:100% src=<%=root %>/' + src +' ></iframe>', closable:true }); } }); }); </script> </head> <body class="easyui-layout"> <div region="north" title="布局案例" split="false" style="height:100px;"></div> <div region="west" split="true" title="导航菜单" style="width:200px;"> <div id="aa" class="easyui-accordion" fit=true> <div title="用户管理" iconCls="icon-user" style="overflow:auto;padding:10px;" selected="true" > <a title="jsp/datagrid_004.jsp">用户列表</a><br/> <a title="jsp/form_004.jsp">添加用户</a> </div> <div title="岗位管理"> </div> <div title="权限管理"> </div> <div title="资源管理"> </div> </div> </div> <div region="center" title="主界面"> <div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;"> <div title="首页" closable=true> <div align="center" style="padding-top: 130px;"><font color="red" size="10">欢迎使用后台管理系统</font></div> </div> </div> </div> </body> </html>