master

分支 (1)

管理

管理

master

easyui-layout-demo
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>EasyUI通用示例布局模版.</title>
		<link rel="stylesheet" href="plugins/easyui/themes/metro/easyui.css" />
		<link rel="stylesheet" href="plugins/easyui/themes/icon.css" />
		<link rel="stylesheet" href="plugins/easyui/style/metro-black/style.css" />
		<link rel="stylesheet" href="plugins/webfont/css/font-awesome.min.css" />

		<script src="plugins/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="plugins/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="plugins/jquery.jdirk.min.js" ></script>
		<script type="text/javascript" src="plugins/jeasyui.ext.js" ></script>
	</head>

	<body class="easyui-layout" data-options="fit:true" >
		<div id="easyui-header" data-options="region:'north'" style="display: none;">
			<div class="logo-content">
				<span class="logo-icon fa fa-leaf"></span>
				<span class="project-name">EasyUI通用示例布局模版</span>
			</div>
			<div class="quick-link-content">
				<a class="quick-item easyui-linkbutton" plain="true" tree-target="json/tree1.json">
					<center class="top-fa-center"><i class="fa fa-drivers-license-o fa-2x"></i></center>
					<span class="quick-item-name">用户管理</span>
				</a>
				<a class="quick-item easyui-linkbutton" plain="true" tree-target="json/tree2.json">
					<center class="top-fa-center"><i class="fa fa-desktop fa-2x"></i></center>
					<span class="quick-item-name">控制面板</span>
				</a>
				<a class="quick-item easyui-linkbutton" plain="true" tree-target="json/tree3.json">
					<center class="top-fa-center"><i class="fa fa-cog fa-2x"></i></center>
					<span class="quick-item-name">系统配置</span>
				</a>
				<a class="quick-item easyui-linkbutton" plain="true" tree-target="json/tree4.json">
					<center class="top-fa-center"><i class="fa fa-envelope-o fa-2x"></i></center>
					<span class="quick-item-name">我的邮件</span>
				</a>
				<a class="quick-item easyui-linkbutton" plain="true" tree-target="json/tree5.json">
					<center class="top-fa-center"><i class="fa fa-trash fa-2x"></i></center>
					<span class="quick-item-name">回收站</span>
				</a>
			</div>
			<div class="user-info">
				<a href="javascript:void(0)" class="easyui-menubutton" data-options="plain:true,menu:'#user-info-mm',iconCls:'icon-user-info'">征途龙</a>
		        <div id="user-info-mm" style="width:150px;">
				    <div>我的资料</div>
				    <div>更改密码</div>
				    <div class="menu-sep"></div>
				    <div iconCls="icon-exit">安全退出</div>
				</div>
			</div>
		</div>
		<div id="easyui-nav" data-options="region:'west',split:true,title:'导航菜单',minWidth:200,maxWidth:300">
			 <ul id="left-menu-tree" class="easyui-tree"></ul>
		</div>
		<div data-options="region:'center',title:'',border:false">
			<div id="easyui-main-tabs" class="easyui-tabs" data-options="fit:true">
				<div title="欢迎使用" data-options="iconCls:'icon-home',href:'tab.html'"></div>
			</div>
		</div>

		<div id="easyui-footer" data-options="region:'south'" style="display: none;">
			<span class="copyright-text">
				Copyright &copy; 2016 <a href="http://www.github.com/wuwz">jeeweb.org</a> Allrights Reserved.
			</span>
		</div>

		<script type="text/javascript">
			// 顶部模块单击事件
			$('.quick-item').live('click',function() {
				$(this).addClass('quick-item-selected');
				$('.quick-item').not(this).removeClass('quick-item-selected');

				var treeTarget = $(this).attr('tree-target');
				var targetName = $(this).find('.quick-item-name').html();

				// 导航栏名称变更
				//$('#easyui-nav').layout('panel','west').panel('setTitle',targetName);
				$('.layout-panel-west .panel-title').text(targetName);

				// 重新渲染tree
				$('#left-menu-tree').tree({
					animate: true,
					method: 'get',
					url: treeTarget,
					lines: true,
					onSelect: function(node) {
						if(node.url) {
							$.easyuiExt.openTab({
								id: 'tabs-test',
								inIFrame: false,
								title: node.text,
								href: node.url,
								iconCls:'icon-file',
								closable: true
							});
						}
					},
					onLoadError: onNoTreeData,
					onLoadSuccess: function(node, data) {
						if(!data || data.length == 0) {
							onNoTreeData();
						}
					}
				});
			});

			// 当左侧菜单下没有数据时展示
			var onNoTreeData = function() {
				$('#left-menu-tree').html("<center style='margin-top:15px;color: #666;'>该模块下暂时没有子菜单.</center>");
			}

			// 执行初始化工作
			window.onload = function() {
				// 1. 默认点击第一个菜单模块
				$('.quick-item').first().trigger('click');

				// 2 .绑定tabs右键菜单
				$.easyuiExt.bindTabsContextMenu($.easyuiExt.getMainTab());

				$('#easyui-header').fadeIn(300);
				$('#easyui-footer').fadeIn(300);
			}
		</script>
	</body>

</html>