序
最近想做個后台系統，想找個簡單點的，而且配置也方便的模版。發現現在網上的模版很炫，而且代碼搞得有點復雜，后台模版嗎？簡單易用就行了。所以今天抽個時間做了個簡易版的。
源碼下載
博客園下載地址：http://files.cnblogs.com/baochuan/chuanshanjia_adminV1.rar
百度雲下載地址:http://yun.baidu.com/share/link?shareid=3580907019&uk=2922571786&third=0
要求
- 點擊模塊，不會刷新整個頁面，只刷新內容頁面；
- 方便配置，只要在一個文件里配置，就可以滿足條件；
- 能夠訪問別的域名下的內容；
- 界面簡單清晰；
思路
- 本來不想用iframe，可是發現，在頁面里如果有熱鏈接，則要更新當前頁面；如果把熱標簽全都用js監控，制作js控制，那么代碼太繁瑣了，所以最后還是決定用iframe。——還有個原因，我發現google和qq郵箱，都用iframe，看來iframe還是有其利用價值的。
- 本來想自己寫一個js框架，但是發現，代碼量會自動加大，所以決定用很多人比較熟悉的框架jquery；
- 只為方便使用，所以里面的內容區域（也就是iframe里面的樣式等，都可以自己去定義）。
草圖設計
實現
js部分，只用了很短的幾行代碼
var bp = { config:{ ask:[{name:'問答管理', url:'/right.html'},{name:'主題管理', url:'/left.html'}], comment:[{name:'評論管理', url:'left.html'}, {name:'用戶管理', url:'right.html'}] }, init: function(){ this.switchSystem($('.head li a:first')); }, switchSystem: function(o){ if(this.config[o.attr('system')] === undefined){ alert('當前模塊:`' + o.attr('system') + '`您還未進行任何配置,請在cmmon.js的bg.config里進行添加！'); return -1; } var system = o.attr('system'), modules = this.config[system], length = modules.length, obj = null, html = ''; for(var i = 0; i < length; i++){ obj = modules[i]; html += '<li class="' + (i ==0 ? 'selected' : '') +'"><a onclick="bp.changeUrl(\'' + obj.url + '\', this)" href="javascript:;">' + obj.name + '</a></li>'; } $('#leftNav').html(html); this.changeUrl(modules[0].url); }, changeUrl: function(url, o){ // 切換主體內容（iframe的內容） //$('#rightBody').load(url, null, function(){ console.log('Loaded!');}); // 用於非iframe結構體 // left 樣式選擇控制 if(o !== undefined){ $('#leftNav li').each(function(){ $(this).removeClass(); }); o.parentNode.className = 'selected'; } $('#mainFrame').attr('src', url); }, iframeOnload: function(id){ //console.log($('#' + id)); }, iframeFresh: function(){ $('#mainFrame').attr('src', $('#mainFrame').attr('src')); } }; $(function(){ $('.head li a').click(function(){ bp.switchSystem($(this)); }); bp.init(); });
注意變量bp.config這里面的配置就是右邊要顯示的內容，注意名字和url。
html部分代碼
<!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="static/admin.css" /> <script type="text/javascript" src="static/jquery-1.10.2.js"></script> </head> <body> <div class="top head"> <div class="logo"><img src="static/logo.png"/></div> <ul class="nav"> <li><a href="javascript:;" system='ask'>問答系統</a></li> <li><a href="javascript:;" system='comment'>評論系統</a></li> </ul> </div> <div class="blank"> <div class="left_blank"></div> <div class="right_blank"> <div class="J-J5-Ji" title="刷新頁面" onclick="bp.iframeFresh()"> <div class="asa"><span class="ask"> </span><div class="asf"></div></div> </div> </div> </div> <div class="content"> <div class="left"> <ul id="leftNav" class="left_nav"></ul> </div> <div class="right" id="rightBody"> <iframe onload="bp.iframeOnload('manFrame')" src="http://localhost/right.html" name="mainFrame" id="mainFrame" frameborder="no" scrolling="auto" hidefocus=""></iframe> </div> </div> </body> <script type="text/javascript" src="static/common.js"></script> </html>
這里注意A標簽里的system參數，要和上面bp.config的屬性名稱對應上。
CSS樣式部分，就羅列到下面了。
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } ul, ol { list-style:none; } a { color:#666; text-decoration:none; } a:visited { color:#666; } a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; } .top , .content, .blank{margin:0 auto; width:1024px;} .head{height:71px;background-color:#F1F1F1;border-bottom:1px solid #E7E7E7;} .logo{float:left;background-color:#fff;margin-right:117px;} .head li{float:left; margin-left:20px;font-weight:bold;} .nav{padding-top:35px;} .blank{height:41px;border-bottom:1px solid #E7E7E7;} .left_blank{width:163px;position: relative;display: inline-block;} .right_blank{width:800px;position: relative;display: inline-block;} .J-J5-Ji {position: relative;display: inline-block;padding: 0 8px;margin-top:6px;border: 1px solid #c6c6c6;color: #333;min-width: 54px;background-color: #f5f5f5;height: 27px;line-height: 27px;text-align: center;margin-right: 16px;font-size: 14px;} .asa {display: inline-block;cursor:pointer;} .ask {width: 1px;margin-right: -1px;position: relative;display: inline-block;} .asf{position: relative;display: inline-block;margin-top: -3px;vertical-align: middle;background: no-repeat url(general_black.png) 0 -193px;width: 21px;height: 21px;} .content .left{float:left;width:163px;} .left_nav{ background-color:#fff;} .left_nav li{height:40px; line-height:70px;font-size:18px; font-weight:bold;} .left_nav li a{color:#706F6F;} .left_nav .selected a{color:#E10602;} .content .right{width:857px;float:left;background-color:blue;border-left:1px solid #ddd;} #mainFrame{position: absolute;_position: relative;width:857px;_width: expression(document.body.offsetWidth - 192 + 'px');height: 100%;z-index: 5;}
總結
由於時間問題，沒有做過多的調整，包括瀏覽器的兼容性，還有頁面設計的細化方面。我也只在chrome下做的開發、調整。——對於很多人來說，也許只能算是個很粗糙的東西，我這個只是為自己以后做后台開發的時候，做了個簡易模版，做一個通用性比較強的模版而已。
推薦
