今天在项目中看到了一个easyui的布局相关的,就找了下网上的例子,自己仿写了个,结合tabs和accordor
结果图如下:
其中上面相当于logo部分,中间是左边菜单栏(accordor)点击后添加的tabs,下面是底部的说明相关,右边是空白
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript"
src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js">
</script>
<!-- 简单的样式 -->
<style type="text/css">
.footer .foot {
background: url("img/foot_bg.jpg");
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body class="easyui-layout">
<!-- 顶部放那个主页信息什么的 -->
<div class="head" region="north" title="North Title" split="true"
style="height: 100px;">
<p style="position: absolute; right: 18px; top: 20px;">
<a href="javascript:void(0);" class="easyui-menubutton"
iconCls="icon-ok">更换皮肤</a> 登录身份:
<strong>肥猫钓鱼</strong>  欢迎您访登录!
<a href="#">退出</a>
</p>
<p style="position: absolute; right: 18px; top: 55px;">
今天是:2014年2月14号星期天
</p>
</div>
<!-- 底部一般放版权什么的 -->
<div class="footer" region="south" split="true" style="height: 23px;">
<div class="foot">
Copyright © 2012 - 2018 All Rights Reserved 肥猫钓鱼 版权所有
湘ABC备88888888号-8
</div>
</div>
<div region="east" iconCls="icon-reload" title="East" split="true"
style="width: 100px;"></div>
<!-- 左边可以放菜单栏,来显示菜单,可以用tree形式显示,我们项目中就是用的tree -->
<div region="west" split="true" title="West" style="width: 150px;">
<div class="easyui-accordion"
data-options="border:false,fit:true" animate="false">
<!-- 可用c标签的foreach来读取后台的菜单树 -->
<div title=" 菜单1">
<!--ul的id可以设置成ul${item.id},这样就能出发点击事件或者别的事件 -->
<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单1-1</ul>
</div>
<div title=" 菜单2" >
<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单2-1</ul>
</div>
<div title=" 菜单3" >
<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单3-1</ul>
</div>
<div title=" 菜单4" >
<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单4-1</ul>
</div>
</div>
</div>
<!-- 中间可以用来存放tabs,通过左边点击事件来填充tabs -->
<div region="center" title="center title"
style="padding: 5px; background: #eee;">
<div id="tts" class="easyui-tabs"
data-options="border:false,fit:true">
</div>
</div>
</body>
<script type="text/javascript">
//官方demo
function addTab(title, url){
if ($('#tts').tabs('exists', title)){
$('#tts').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tts').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
//下面是我项目中的代码,不知道是不是js的问题,tabCount一直说没定义,然后就是
//在打开多个tab标签时候,不能打开多个,只能打开一个,而官方的demo则是可以打开
//多个,我看了下好像是href的原因
function acc_AddTab(title, href, reload) {
var tabCount = $('#tts').tabs('tabs').length;
alert(tabCount);
var hasTab = $('#tts').tabs('exists', title);
alert(hasTab);
if (tabCount > 2 && !hasTab) {
var msg = '您当前打开太多页面,如果继续打开,会降低页面加载速度!'
alert("系统提示")
} else {
ttt(title, href, hasTab, reload);
}
}
function ttt(title, href, hasTab, reload) {
if (!hasTab) {
add_tab(title, href);
} else {
if (reload) {
$('#tts').tabs('close', title);
add_tab(title, href);
} else {
$('#tts').tabs('select', title);
}
}
}
function add_tab(title, href) {
$('#tts').tabs('add', {
title : title,
href : href,
closable : true,
scroll : true,
cache : true
});
}
</script>
</html>
- 大小: 31.6 KB
分享到:
相关推荐
用EasyUi实现简单的布局,主要是用EasyUi里的Layout 跟Tabs选项卡
NULL 博文链接:https://cping.iteye.com/blog/2174449
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了使用jquery-easyui的布局layout写后台管理页面的代码详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery EasyUI Layout是一种基于jQuery的布局框架,今天初次使用Jquery EasyUi,简单的做了个布局页面感觉还不错,特此分享脚本之家平台供大家学习
使用easyUI创建一个border layout在你的web页面 使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs ...
今天在用easyui做布局时,碰到了一个疑惑的问题。 问题:当把class=“easyui-layout”写在一个独立的div中时,layout的样式无法显示,也不报错。 例如: 代码如下: <span xss=removed><body > ”easyui-layout...
EasyUI1.4+zTree3.5.16完美结合框架布局,都是最新的,如果好的话请点评下,有什么意见也可以提出来
本篇文章小编为大家介绍JQueryEasyUI Layout布局框架的使用,有需要的朋友可以参考一下
主要为大家详细介绍了jQuery布局组件EasyUI Layout的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
<div class="easyui-layout" ,split:true" ,split:true,title:'East',collapsible:true" <table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', ...
在本书中,读者不但可以学到搜索框(searchbox)、进度条(progressbar)、提示框(tooltip)等功能性插件,还可以掌握布局(layout),以及强大的数据网格(datagrid)和分页(pagination)等插件。
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
基于EasyUI写的一个Web界面框架, 1、页面根据窗口自动计算布局。 2、应用Plan、datagrid、easyui-layout、tree等组件 初学者很有用。
jQuery EasyUI源码、demo合集、离线api、个性化的layout布局!