左边菜单，点击左边右边内容改变

作为新手，拿到真的很棘手。很多人想到的是用iframe, 其实我的第一感也是，但是好像iframe正在被淘汰, 所以一直在寻找新方法。、

当然，我还是先把iframe方法贴出来，这个方法是适用于对js不熟悉，或者刚入前端不就的童鞋们。

2014年，我们公司要做一个这样的后台系统（如下图所示）；第一次接触后台，而且还带有图表，着实小紧张了一把。经过多次在网上搜索和晚上的冥思苦想，最后找到了两个解决方案；

1). 做成静态的

什么叫静态的？视觉欺骗而已。就是左边的结构还是正常写，并且在不同的页面不同的样子，每一个页面都有一个左边的menu菜单，在点击的，就不容易察觉，下面以bootstrap ace后台为例子。

 <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Software Update</span>
                                            <span class="pull-right">65%</span>
                                        </div>

                                        <div class="progress progress-mini ">
                                            <div style="width:65%" class="progress-bar "></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Hardware Upgrade</span>
                                            <span class="pull-right">35%</span>
                                        </div>

                                        <div class="progress progress-mini ">
                                            <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                        </div>
                                    </a>
                                </li>

　　左边菜单，点击左边右边内容改变

如果上面的父级菜单没有连接，逻辑就有点不同了。如果没有，点击父级菜单的时候，就要求打开父级菜单，然后才能点击下面的菜单。显然上面的方法得升级了。用jquery写一个点击事件就ok, 就不演示了。

2）iframe方法

<ul class="nav" id="side-menu">
	<li>
		<a href="index.html" id="firstNode" class="cur" target="menuFrame"><i class="fa fa-bar-chart-o fa-fw"></i><b>统计报表</b></a>
		<ul class="nav nav-second-level">
			<li><a href="import.html" target="menuFrame">进货报表</a></li>
			<li><a href="export.html" target="menuFrame">出货报表</a></li>
			<li><a href="check.html" target="menuFrame">毛利报表</a></li>
		</ul>
	</li>
	<li>
		<a href="warehouse.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>仓库管理</b></a>
		<ul class="nav nav-second-level">
			<li><a href="goodslist.html" target="menuFrame">商品列表</a></li>
			<li><a href="check.html" target="menuFrame">盘点</a></li>
			<li><a href="outbound.html" target="menuFrame">出库列表</a></li>
			<li><a href="instorage.html" target="menuFrame">入库列表</a></li>
		</ul>
	</li>
	<li>
		<a href="#"><i class="fa fa-edit fa-fw"></i><b>订单管理</b></a>
		<ul class="nav nav-second-level">
			<li><a href="orderlist.html" target="menuFrame">订单列表</a></li>
			<li><a href="forms.html" target="menuFrame">采购申请</a></li>
		</ul>
	</li>
	<li>
		<a href="system.html" target="menuFrame"><i class="fa fa-wrench fa-fw"></i><b>系统设置</b></a>
		<ul class="nav nav-second-level">
			<li><a href="user.html" target="menuFrame">权限设置</a></li>
			<li><a href="personnel.html" target="menuFrame">资料管理</a></li>
		</ul>
		
	</li>
	<li>
		<a href="rewritepwd.html" target="menuFrame"><i class="glyphicon glyphicon-pencil"></i><b>修改密码</b></a>
	</li>

</ul>

　　先写出一个上菜的菜单。千万记住链接后面的target得要，而且名字需要一样，等会会用到

 <div id="page_content">
          <iframe id="menuFrame" name="menuFrame" src="index.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="100%; float:left">
             </iframe>
 </div>

　　在内容的区域添加上面代码，插入iframe, 这里的name对应上面链接里面的name, src="index.html", 表示默认页是index.html, 至于后面的那些属性是控制iframe样式的。以上iframe就告一段落了。

二. 用ajax方法实现点击左边，右边出现相应的页面。

今年老大叫我做一个后台，而且他指出别人没有用iframe, 问我行不行。只能说行。没有在网上查看过多的资料，某天晚上突然想起ajax 里面有一个load方法，这个方法可以载入其他页面的内容。于是有了灵感，开始也只是尝试一下：

("li").on('click', function() {
             var href = $(this).find("a").attr('href');
             $('#mainContents').empty();
             $('#mainContents').load("../new/" + href);
             //阻止跳转
             $(this).parents('li').addClass('active').siblings('li').removeClass('active');
             return false;
         });

　　点击li, 找到li里面对应的链接地址，阻止url跳转，然后在内同区域载入找到的url对应的地址。惊奇的发现，试验了也可行。然而新问题来了。用load方法，只能载入已经加载完毕的页面，如果我们的页面没有加载完毕呢，或者修改了，怎么办？？所以还是用ajax 吧。

var menu = $("#menuID>li h2"),
		srcLi = menu.next('ul').find('li');
	srcLi.on('click', function(e) {
		var href = $(this).find("a").attr('href');
		$('#mainContents').empty();
		$.ajax({
			//  beforeSend: function(){
			//      $('#mainContents').html('正在请求');
			//  },
			// complete: function(){
			//      $('#mainContents').html('加载完毕');
			//     },
			type: "GET",
			url: "../new/" + href,
			success: function(data) {
				$('#mainContents').append(data);
			}
		});
		//阻止跳转
		$(this).parents('li').addClass('active').siblings('li').removeClass('active');
		return false;
	});
	menu.on('click', function() {
		$(this).next('ul').slideToggle(400);
		$(this).stop('false').toggleClass('on');
	});

　　以上的思路，和开始时候的load方法一样。首先找到每一个li 里面对应的url, 然后清空右侧的内容，用ajax动态获取不同的页面，就追加到右侧的内容中。阻止跳转。

另外，附上一个相似的代码，这是点击一个树状菜单出来不同的内容。第一次用ajax调用json数据。着实小兴奋了一把。这个与上面说的内容一毛钱的关系也没有，只是为了祭奠一下我的第一次而已

$.ajax({
　　type: "post",
　　url: "../new/txt/txt1.json",
　　dataType: "json",
　　success: function(data) {
　　　　$("#blank").empty();
　　　　var employees = data.employees;
　　　　$.each(data.employees, function(k, v) {							
　　　　　　var tpl1 =
　　　　　　'<div class="halfLeft">' + '<span class="aboutJobs">' + v.职位 + '</span>: ' + '<span class="aboutNames">' + v.姓名 + '</span>;<br/>' + '</div>';
　　　　　　$("#blank").append(tpl1);
　　　　});
　　}
})

调用的json数据为

{
    "employees": [

    { "姓名": "张三", "职位":"php后台", "email": "aaaa" },

    { "姓名": "李四", "职位":"人事经理", "email": "bbbb" },

    { "姓名": "王五", "职位":"Harold", "email": "cccc" },

    { "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },

    { "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },

    { "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },

    { "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },

    { "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }
    ],

    "test": [

    { "姓名": "赵六", "职位":"php后台", "email": "aaaa" },

    { "姓名": "齐七", "职位":"人事经理", "email": "bbbb" },

    { "姓名": "王五", "职位":"Harold", "email": "cccc" },

    { "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },

    { "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },

    { "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },

    { "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },

    { "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }
    ]
}

秒客网

左边菜单，点击左边右边内容改变

相关文章