作為新手， 拿到真的很棘手。 很多人想到的是用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" }
]
}
小小女前端一枚，希望和大家共同成長， 如有不對的地方， 望大家見諒。