左右布局


基本骨架
<body>
	<!--左侧内容-->
	<div class="admin-left">
		<!--logo-->
		<div class="logo">
			<h1>JavaEx前端框架</h1>
		</div>
		<!--左侧菜单-->
		<div id="menu" class="menu">
			左侧菜单
		</div>
	</div>
	
	<!--右侧内容-->
	<div class="admin-right">
		<!--顶部-->
		<div class="admin-header">
			顶部
		</div>
		
		<!--内容-->
		<div class="admin-content">
			<!--面包屑导航-->
			<div class="content-header">
				面包屑导航
			</div>
			
			<!--全部主体内容-->
			<div class="list-content">
				<!--块元素-->
				<div class="block">
					<!--修饰块元素名称-->
					<div class="banner">
						<p class="tab fixed">块元素</p>
					</div>

					<!--正文内容-->
					<div class="main">
						正文内容
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
左侧菜单(需要js组件支持)
<div id="menu" class="menu">
	<ul>
		<li class="menu-item">
			<a href="javascript:;"><span class="icon-home2"></span>主页</a>
		</li>
		<li class="menu-item">
			<a href="javascript:;"><span class="icon-bar-chart"></span>图标统计<i class="icon-keyboard_arrow_left"></i></a>
			<ul>
				<li><a href="javascript:;">柱形图</a></li>
				<li><a href="javascript:;">折线图</a></li>
				<li><a href="javascript:;">饼图</a></li>
			</ul>
		</li>
		<li class="menu-item">
			<a href="javascript:;"><span class="icon-magic"></span>页面元素<i class="icon-keyboard_arrow_left"></i></a>
			<ul>
				<li><a href="javascript:;">单选框</a></li>
				<li><a href="javascript:;">复选框</a></li>
				<li><a href="javascript:;">按钮</a></li>
			</ul>
		</li>
	</ul>
</div>

<script>
	javaex.menu({
		id : "menu",	// 菜单id
		isAutoSelected : true
	});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 菜单id
2 isAutoSelected false 刷新页面或跳转页面后,是否根据之前点击的链接自动展开并选中高亮。
并不一定适用所有项目。无效时,请设置为false
3 key key 默认内容标识
假设当前菜单的链接都是参数id不同,而首次打开时,又不带参数id,则可以将key置为空
4 url 默认需要高亮的链接
当上述key为空时,会自动高亮该链接对应的菜单,并自动展开
5 isShowAll false 左侧菜单是否初始化全部展开
顶部
<div class="admin-header">
	<ul class="header-right">
		<li>
			<a class="pull-left avatar" href="#"><img src="http://doc.javaex.cn/javaex/javaex/pc/images/user.jpg" alt=""></a>
			<p class="pull-left margin-left-10">欢迎您,<span>管理员</span></p>
			<label class="margin-left-10 margin-right-10">|</label>
			<a href="#">退出</a>
		</li>
		<li>
			<a href="#">
				<span class="icon-commenting-o" style="font-size: 20px;position: relative;top:2px;">
					<i style=""><span>31</span></i>
				</span>
			</a>
		</li>
		<li>
			<a href="#">用户中心</a>
		</li>
	</ul>
</div>
面包屑导航
<div class="content-header">
	<div class="breadcrumb">
		<span>一级菜单名称</span>
		<span class="divider">/</span>
		<span class="active">二级菜单名称</span>
	</div>
</div>
完整代码
<body>
	<!--左侧菜单-->
	<div class="admin-left">
		<div class="logo">
			<h1>JavaEx前端框架</h1>
		</div>
		<div id="menu" class="menu">
			<ul>
				<li class="menu-item">
					<a href="javascript:;"><span class="icon-home2"></span>主页</a>
				</li>
				<li class="menu-item">
					<a href="javascript:;"><span class="icon-bar-chart"></span>图标统计<i class="icon-keyboard_arrow_left"></i></a>
					<ul>
						<li><a href="javascript:;">柱形图</a></li>
						<li><a href="javascript:;">折线图</a></li>
						<li><a href="javascript:;">饼图</a></li>
					</ul>
				</li>
				<li class="menu-item">
					<a href="javascript:;"><span class="icon-magic"></span>页面元素<i class="icon-keyboard_arrow_left"></i></a>
					<ul>
						<li><a href="javascript:;">单选框</a></li>
						<li><a href="javascript:;">复选框</a></li>
						<li><a href="javascript:;">按钮</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	
	<!--右侧内容-->
	<div class="admin-right">
		<!--顶部-->
		<div class="admin-header">
			<ul class="header-right">
				<li>
					<a class="pull-left avatar" href="#"><img src="http://doc.javaex.cn/javaex/javaex/pc/images/user.jpg" alt=""></a>
					<p class="pull-left margin-left-10">欢迎您,<span>管理员</span></p>
					<label class="margin-left-10 margin-right-10">|</label>
					<a href="#">退出</a>
				</li>
				<li>
					<a href="#">
						<span class="icon-commenting-o" style="font-size: 20px;position: relative;top:2px;">
							<i style=""><span>31</span></i>
						</span>
					</a>
				</li>
				<li>
					<a href="#">用户中心</a>
				</li>
			</ul>
		</div>
		
		<!--内容-->
		<div class="admin-content">
			<!--面包屑导航-->
			<div class="content-header">
				<div class="breadcrumb">
					<span>一级菜单名称</span>
					<span class="divider">/</span>
					<span class="active">二级菜单名称</span>
				</div>
			</div>
			
			<!--全部主体内容-->
			<div class="list-content">
				<!--块元素-->
				<div class="block">
					<!--修饰块元素名称-->
					<div class="banner">
						<p class="tab fixed">块元素</p>
					</div>
					<!--正文内容-->
					<div class="main">
						
					</div>
				</div>
				
				<!--块元素-->
				<div class="block">
					<!--修饰块元素名称-->
					<div class="banner">
						<p class="tab fixed">块元素</p>
					</div>
					<!--正文内容-->
					<div class="main">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	javaex.menu({
		id : "menu",	// 菜单id
		isAutoSelected : true
	});
</script>