easyui之layout布局

最新推荐文章于 2023-05-16 14:57:58 发布
程门立雪_
最新推荐文章于 2023-05-16 14:57:58 发布
阅读量2.4k
点赞数
文章标签： layout easyui 布局
本文链接：https://blog.csdn.net/sxj_world/article/details/21236525
版权
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>	
<!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="<%=request.getContextPath() %>/js/jsframework/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jsframework/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/jsframework/easyui/demo.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/jsframework/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> 
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jsframework/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jsframework/ztree/js/jquery.ztree.core-3.3.js"></script> 
</head>
<style>
<style type="text/css">
body {
	font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma;
	padding: 0;
	margin: 0;
}
.layout-split-proxy-h{
	position:absolute;
	width:2px;
	background:#888;
	font-size:1px;
	cursor:e-resize;
	display:none;
	z-index:5;
}

.layout-split-north{
	border-bottom:5px solid #efefef;
}
.layout-split-south{
	border-top:5px solid #efefef;
}
.layout-split-east{
	border-left:0px solid #efefef;
}
.layout-split-west{
	border-right:0px solid #efefef;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:active {
 text-decoration: none;
}
.cs-north {
	height:60px;
}
.cs-north-bg {
	width: 100%;
	height: 100%;
	background: url(themes/gray/images/header_bg.png) repeat-x;
}
.cs-north-logo {
	height: 40px;
	margin: 15px 0px 0px 5px;
	display: inline-block;
	color:#000000;font-size:22px;font-weight:bold;text-decoration:none
}
.cs-west {
	width:200px;padding:0px;
}
.cs-navi-tab {
	padding: 5px;
}
.cs-tab-menu {
	width:120px;
}
.cs-home-remark {
	padding: 10px;
}
.wrapper {
    float: right;
    height: 30px;
    margin-left: 10px;
}
.ui-skin-nav {
    float: right;
	padding: 0;
	margin-right: 10px;
	list-style: none outside none;
	height: 30px;
}

.ui-skin-nav .li-skinitem {
    float: left;
    font-size: 12px;
    line-height: 30px;
	margin-left: 10px;
    text-align: center;
}
.ui-skin-nav .li-skinitem span {
	cursor: pointer;
	width:10px;
	height:10px;
	display:inline-block;
}
.ui-skin-nav .li-skinitem span.cs-skin-on{
	border: 1px solid #FFFFFF;
}

.ui-skin-nav .li-skinitem span.gray{background-color:gray;}
.ui-skin-nav .li-skinitem span.default{background-color:blue;}
.ui-skin-nav .li-skinitem span.bootstrap{background-color:#D7EBF9;}
.ui-skin-nav .li-skinitem span.black{background-color:black;}
.ui-skin-nav .li-skinitem span.metro{background-color:#FFE57E;}
</style>

<body οnlοad="nowdatefunction()" class="easyui-layout">
   
        <div data-options="region:'north'" style="background:#B3DFDA;height:50px">
	      
		
			<b>当前时间：</b><b id="nowdate"></b>
        </div>
        <div data-options="region:'south',split:true" style="background:#B3DFDA;height:50px;"></div>
        <div data-options="region:'east',split:true,collapsed:true" title="右" style="background:#B3DFDA;width:100px;"></div>
        <div data-options="region:'west',split:true" title="左" style="background:#B3DFDA;width:250px;">
        
        	<div class="easyui-accordion" data-options="fit:true,border:false,selected:true">
			
				<div title="第一层" data-options="" style="background:#B3DFDA;padding:10px;">
					<ul class="easyui-tree" 
					data-options="url:'<%=request.getContextPath() %>/customer/menu_MenuAction_menuTreeList.do',
					method:'get',animate:true" 
					id="menuid"></ul>
				
				</div>
				
				<div title="第二层" data-options="" style="background:#B3DFDA;padding:10px;">
				</div>
				
				<div title="第三层" data-options="" style="background:#B3DFDA;padding:10px">
				</div>
				
			</div>
			
        </div>
        <div data-options="region:'center',title:'中'">
        <div class="easyui-tabs" id="tabs" data-options="fit:true">
	        <div title="欢迎" style="background:#E0ECFF;padding:10px" data-options="closable:true">
	            	欢迎，欢迎，热烈欢迎
       		</div>
       	 </div>
        
        </div>
    <div id="mm" class="easyui-menu cs-tab-menu">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseother">关闭其他</div>
		<div id="mm-tabcloseall">关闭全部</div>
	</div>
    
<script type="text/javascript">
$(function(){
    //刷新
    $("#mm-tabupdate").click(function(){
        var currTab = $('#tabs').tabs('getSelected');    //获取选中的标签项
        var url = $(currTab.panel('options').content).attr('src');    //获取该选项卡中内容标签（iframe）的 src 属性
        /* 重新设置该标签 */
        $('#tabs').tabs('update',{
			tab:currTab,
			options:{
				content:createFrame(url)
			}
		})
 
    });
    
    //关闭所有
    $("#mm-tabcloseall").click(function(){
        $(".tabs li").each(function(i, n){
            var title = $(n).text();
            $('#tabs').tabs('close',title);    
        });
    });
    
    //除当前之外关闭所有
    $("#mm-tabcloseother").click(function(){
        var currTab = $('#tabs').tabs('getSelected');
        currTitle = currTab.panel('options').title;    
        
        $(".tabs li").each(function(i, n){
            var title = $(n).text();
            
            if(currTitle != title){
                $('#tabs').tabs('close',title);            
            }
        });
    });
    
    //关闭当前
    $("#mm-tabclose").click(function(){
        var currTab = $('#tabs').tabs('getSelected');
        currTitle = currTab.panel('options').title;    
        $('#tabs').tabs('close', currTitle);
    });
});
$(function(){
    /*为选项卡绑定右键*/
   $(".easyui-tabs").live('contextmenu',function(e){
       
       /* 选中当前触发事件的选项卡 */
       var subtitle =$(this).text();
       $('#tabs').tabs('select',subtitle);
       
       //显示快捷菜单
       $('#mm').menu('show', {
           left: e.pageX,
           top: e.pageY
       });
       
       return false;
   });
});
//注销
function logout()
{
	parent.location.href="<%=request.getContextPath()%>/employee/logout.do";
	//parent.location.href="<%=request.getContextPath()%>/employee/tologin.do";
}
//显示当前时间
function nowdatefunction()
{
	var date1 = new Date().toLocaleDateString();
	var date2 = new Date().toLocaleTimeString();
	document.getElementById("nowdate").innerHTML=date1+date2;
	setTimeout("nowdatefunction()",1000)  
}

    
   $('#menuid').tree({
   	
       onClick:function(node){//单击事件  
       	//获取中间区域的tab对象
       	var tabPanel = $('#tabs');
       	//根据节点的title获取某个节点对象
       	var tab = tabPanel.tabs('getTab',node.text);
       	//如果某个节点的state状态为undefined，表明它是叶子节点
       	if(node.state == undefined){
       	//如果该节点不存在，就进行添加
   		if(tab == null){
       		if(node.attributes.url != undefined)
       		{
   			tabPanel.tabs(
           		        'add',{
           		            title: node.text,
           		            //href:node.attributes.url,
           		           content:'<iframe src='+node.attributes.url+' id="options" width="100%" height="100%"></iframe>',
           		            //是否可以关闭？对应tab页上的关闭图标
           		            closable:true
           		        });
       		}
       	}
       	//若该节点已存在，就进行选中
       	else{
   			tabPanel.tabs('select', node.text);
   		}
       	}
       		
       }  
   });	
    
    
    
  //为每一个节点绑定一个单击事件
	/*$('#treeid').tree({
	
    onClick:function(node){//单击事件  
    	//获取中间区域的tab对象
    	var tabPanel = $('#tabs');
    	//根据节点的title获取某个节点对象
    	var tab = tabPanel.tabs('getTab',node.text);
    	//如果某个节点的state状态为undefined，表明它是叶子节点
    	if(node.state == undefined){
    	//如果该节点不存在，就进行添加
		if(tab == null){
    			
			tabPanel.tabs(
        		        'add',{
        		            title: node.text,
        		            href:node.attributes.text,
        		            style:'font-size: 10px',
        		           //content:'<iframe src='+node.attributes[0].url+'></iframe>',
        		            //是否可以关闭？对应tab页上的关闭图标
        		            closable:true
        		        });
    	}
    	//若该节点已存在，就进行选中
    	else{
			tabPanel.tabs('select', node.text);
		}
    	}
    		
    }  
});	*/
    
    
    $('#treeid').tree({
    	onClick: function(k){
    		alert("姓名："+k.attributes.leadername+",年龄:"+k.attributes.leaderage+",人数："+k.attributes.personcount);  // 在用户点击的时候提示
    	}
    });
    
    var setting = {
    		view: {
    			selectedMulti: false
    		},
    		data: {
    			simpleData: {
    				enable:true,
    				idKey: "id",
    				pIdKey: "pid"
    			},
    			key:{
    				name:"department"
    			}
    		},
    		callback: {
    			onClick:onclick
    			},
    		
    		async: {
    			//异步加载的标志
    			enable: true,
    			//提交的路径
    			url: "<%=request.getContextPath() %>/department/departmentList.do",
    			//提交的参数
    			autoParam: ["id=id"]//异步加载时需要自动提交父节点属性的参数
    		}
    	};
	   function onclick(event, treeId, treeNode) {
		    alert("部门："+treeNode.department + ",人数 :" + treeNode.personNum);
		};

    	$(function(){
    		var ztree = $("#tree");
    		ztree = $.fn.zTree.init(ztree, setting);
    	});
    </script>
</body>



</html>