首頁模塊就是展示不同權限的最終結果了，在閱讀這章之前若有些不明白，可看看后續的單獨的權限模塊，用戶模塊，目錄模塊后從整體上再看首頁模塊。
閱讀該模塊需要一定或者是比較熟練的js知識,EasyUI Tab控件知識。整個首頁模塊的流程是登陸模塊獲取到了用戶的基本信息，可以訪問的網頁信息，目錄信息后，封裝在sessionManage會話中，通過JS文件做數據的格式轉換及動作定義，通過Css文件做網頁的效果美化。簡而言之，就是獲取后台數據渲染到網頁。
1.1視圖
首頁模塊的一級導航選擇不同的信息關聯二級導航，二級導航展開顯示可以訪問的頁面鏈接。每一個鏈接在網頁的展示模塊通過EasyUI的Tab控件展示，可以實現如下效果:
對應單個的tab中顯示的網頁信息是通過iframe標簽的方式實現的。及打開一個tab就創建一個iframe對象。關閉一個tab就釋放該iframe對象。
首頁模塊的基本結構簡圖如下：
首頁視圖是由兩部分視圖組成的。主視圖主要是展示整個的框架結構，還有一個部分視圖主要是展示左側的權限信息頁面。主視圖中比較關鍵的代碼如下：
@using Models
@using Page = Models.Page
<!--先把頁面model加載到視圖-->
<!--解析Model生成一級導航目錄信息-->
<ul class="menuchild">
@if (ViewBag.Navigation != null)
{
IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation;
foreach (Catalog item in navigationList)
{
<li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li>
}
}
</ul>
<!--左邊菜單容器 加載部分視圖展示左邊的菜單信息 -->
<div class="scroll-panel" id="scrollpanel">
<div style="top: -10.8px;" class="scroll-content" id="scrollcontent">
<div id="rightListDiv">
@Html.Partial("_rightMessage", new { navigationId = -1 })
</div>
</div>
</div>
首頁詳細視圖代碼如下：
1 @using Models 2 @using Page = Models.Page 3 @{ 4 Layout = null; 5 } 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>####</title> 11 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/gray/easyui.css"> 12 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/icon.css"> 13 14 <link href="~/Content/CSS/style.css" rel="stylesheet" /> 15 <style> 16 .panel-tool { 17 visibility: hidden; 18 } 19 20 #preferenceUl { 21 display: list-item; 22 margin: 5px; 23 margin-top: 2px; 24 padding: 10px; 25 } 26 27 #preferenceUl li { 28 display: list-item; 29 list-style-type: square; 30 margin: 5px; 31 } 32 </style> 33 34 </head> 35 36 <body style="overflow: hidden;"> 37 38 <div class="header"> 39 <!--header頁面上面部分 --> 40 <div class=" system_name"></div> 41 <!--用戶 --> 42 <div class="top_user" onmouseover="theimg.src='@Url.Content("~/Content/image/title_images/user_white.png")'" onmouseout="theimg.src='@Url.Content("~/Content/image/title_images/user_blue.png")'"> 43 <dl class="topmenu"> 44 <dd> 45 <div class="toptitle" style="height: 50px;"> 46 <span style="width: 32px; height: 32px;"> 47 <img id="theimg" src="~/Content/image/title_images/user_blue.png" /> 48 </span> 49 <span class="spant">@Html.Raw(ViewData["UserName"]) </span> 50 </div> 51 <ul class="menuchild"> 52 <li><a href="javascript:Exit();">退出系統</a><i></i></li> 53 54 </ul> 55 </dd> 56 </dl> 57 </div> 58 59 60 61 <!--導航 --> 62 <div class="top_navigation" onmouseover="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'" onmouseout="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'"> 63 <dl class="topmenu"> 64 <dd> 65 <div class="toptitle" style="height: 50px;"> 66 <span style="width: 32px; height: 32px;"> 67 <img id="nav_theimg" src="~/Content/image/title_images/navigation.png" /> 68 </span> 69 <span class="spant">導航</span> 70 </div> 71 <ul class="menuchild"> 72 @if (ViewBag.Navigation != null) 73 { 74 IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation; 75 foreach (Catalog item in navigationList) 76 { 77 <li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li> 78 } 79 } 80 </ul> 81 </dd> 82 </dl> 83 </div> 84 85 86 87 <!--首頁 --> 88 <div class="top_index" onmouseover="index_img.src='../Content/image/title_images/index_white.png'" onmouseout="index_img.src='../Content/image/title_images/index_blue.png'"> 89 <dl class="topmenu"> 90 <dd> 91 <div class="toptitle" style="height: 50px;"> 92 <a href="#" onclick="addTab('首頁','');" style="color: #ffffff"><span style="width: 32px; height: 32px;"> 93 <img id="index_img" src="~/Content/image/title_images/index_blue.png" /> 94 </span> 95 <span class="spant">首頁 </span></a> 96 </div> 97 </dd> 98 </dl> 99 </div> 100 101 </div> 102 <!--header結束 --> 103 104 <div class="logo" id="nowTime"> 105 <!--系統logodiv --> 106 </div> 107 108 <div class="main_hoder"> 109 <!--下面整個容器 --> 110 <div class="left_hoder"> 111 <!--左邊容器 --> 112 <div class="left_hoder_menu"> 113 <!--左邊菜單容器 --> 114 <div class="scroll-panel" id="scrollpanel"> 115 <div style="top: -10.8px;" class="scroll-content" id="scrollcontent"> 116 <div id="rightListDiv"> 117 @Html.Partial("_rightMessage", new { navigationId = -1 }) 118 </div> 119 </div> 120 </div> 121 <div class="scroll-bar" id="scrollbar"> 122 <div class="scroll-block" id="scrollblock"></div> 123 </div> 124 </div> 125 </div> 126 127 <div class="center_hoder"> 128 <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="pageTab"> 129 130 131 <div title="首頁" style="padding: 10px;"> 132 133 134 <div class="easyui-layout" data-options="fit:true"> 135 136 歡迎加載首頁信息。 137 138 139 </div> 140 141 142 143 </div> 144 </div> 145 </div> 146 <!--其他網頁顯示的容器--> 147 <div class="footer"> 148 技術支持：###### 149 </div> 150 151 </div> 152 <!--下面整個容器 --> 153 </body> 154 155 <script src="~/Scripts/jquery.js"></script> 156 <!--滾動條效果 --> 157 <script src="~/Scripts/mousewheel.js"></script> 158 <script src="~/Scripts/scroll.js"></script> 159 <script type="text/javascript" src="~/Content/easyui143/jquery.easyui.min.js"></script> 160 <script type="text/javascript" src="~/Content/easyui143/locale/easyui-lang-zh_CN.js"></script> 161 162 <script type="text/javascript" src="~/Scripts/CustomJs/default.js"></script> 163 164 </html>
部分視圖代碼完整代碼如下：
1 @using Models 2 @using Page = Models.Page 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <title></title> 7 <meta name="viewport" content="width=device-width" /> 8 9 <link href="~/Content/CSS/style.css" rel="stylesheet" /> 10 </head> 11 <body> 12 <dl class="leftmenu"> 13 <!--左邊一級菜單樣式 --> 14 @if (ViewBag.RightList != null) 15 { 16 IList<Catalog> rightList = (List<Catalog>)ViewBag.RightList; 17 foreach (Catalog right in rightList) 18 { 19 IList<Page> pageList = right.PageList; 20 if (pageList.Count > 0) 21 { 22 <dd> 23 <div class='title'> 24 <span class='img_style'> 25 <img id='j_img' src='@right.PictureUrl' /></span>@right.CatalogName 26 </div> 27 <ul class='menuson'> 28 @foreach (Page page in pageList) 29 { 30 <li><cite></cite> 31 <a href='#' onclick="addTab('@page.PageName','@("../" + page.PageUrl)');">@page.PageName</a><i></i></li> 32 } 33 </ul> 34 </dd> 35 } 36 } 37 } 38 </dl> 39 40 <script type="text/javascript" src="~/Scripts/CustomJs/_rightMessage.js"></script> 41 </body> 42 </html>
1.2JS文件
首頁加載共用了兩個JS文件，其中視圖IndexHome.cshtml對應default.js,_rightMessage.cshtml對應_rightMessage.js文件。
兩個文件中關鍵的代碼均是創建iframe對象和銷毀iframe對象，部分代碼如下：
/** 把iframe與Tab的屬性結合起來。
* 增加iframe模式的標簽頁
* param {[type]} jq [description]
* param {[type]} params [description]
*/
addIframeTab: function (jq, params) {
return jq.each(function () {
if (params.tab.href) {
delete params.tab.href;
}
$(this).tabs('add', params.tab);
$(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });
});
},
/**
* 更新tab的iframe內容
* param {jq Object} jq [description]
* param {Object} params [description]
* return {jq Object} [description]
*/
updateIframeTab: function (jq, params) {
return jq.each(function () {
params.iframe = params.iframe || {};
if (!params.iframe.src) {
var $tab = $(this).tabs('getTab', params.which);
if ($tab == null) return;
var $tabBody = $tab.panel('body');
var $iframe = $tabBody.find('iframe');
if ($iframe.length === 0) return;
$.extend(params.iframe, { 'src': $iframe.attr('src') });
}
$(this).tabs('loadTabIframe', params);
});
}
//創建Frame
function createFrame(url) {
var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>';
return s;
};
//添加tab頁
function addTab(title, tabHref) {
if ($("#pageTab").tabs("exists", title)) {
$("#pageTab").tabs("select", title);
} else {
$('#pageTab').tabs('addIframeTab', {
tab: { title: title, closable: true },
iframe: { src: tabHref }
});
}
default.js文件的完整代碼如下：
1 $(function () { 2 //設置左側導航欄的默認高度 3 $(".scroll-panel").height($(window).height() - 110); 4 5 //左側導航菜單監聽事件，修改圖標樣式 6 $('.title').click(function () { 7 var $ul = $(this).next('ul'); 8 var src, srcArray; 9 10 src = $(".title_current img").attr("src"); 11 if (src != null) { 12 srcArray = src.indexOf('_blue'); 13 14 src = src.substring(0, srcArray) + '.png'; 15 16 $(".title_current img").attr("src", src); 17 } 18 $(".title_current").removeClass("title_current"); //移除所有的title_current樣式類 19 20 $(".leftmenu").find('ul').slideUp(); 21 22 if ($ul.is(':visible')) { 23 //收起導航菜單 24 $(this).next('ul').slideUp(); 25 } else { 26 //展開導航菜單並修改目錄菜單的樣式以及圖標 27 $(this).next('ul').slideDown(); 28 $(this).addClass("title_current"); 29 30 src = $(".title_current img").attr("src"); //目錄圖標 31 srcArray = src.split('.'); 32 src = srcArray[0] + '_blue.png'; 33 $(".title_current img").attr("src", src); 34 } 35 }); 36 37 38 //頁面導航監聽事件 39 $('.menuson a').click(function () { 40 $('.menuson a').removeClass("aclick"); 41 $(this).addClass("aclick"); 42 }); 43 44 45 //當前用戶獲取焦點 46 $('.top_user').hover(function () { 47 var path = $('.top_user .topmenu .toptitle'); 48 var $ul = path.next('ul'); 49 if ($ul.is(':visible')) { 50 path.next('ul').slideUp(); 51 } else { 52 path.next('ul').slideDown(); 53 } 54 }); 55 56 57 //導航獲取焦點 58 $('.top_navigation').hover(function () { 59 var path = $('.top_navigation .topmenu .toptitle'); 60 var $ul = path.next('ul'); 61 if ($ul.is(':visible')) { 62 path.next('ul').slideUp(); 63 } else { 64 path.next('ul').slideDown(); 65 } 66 }); 67 68 69 $.extend($.fn.tabs.methods, { 70 /** 71 * 加載iframe內容 72 * param {jq Object} jq [description] 73 * param {Object} params params.which:tab的標題或者index;params.iframe:iframe的相關參數 74 * return {jq Object} [description] 75 */ 76 loadTabIframe: function (jq, params) { 77 return jq.each(function () { 78 var $tab = $(this).tabs('getTab', params.which); 79 if ($tab == null) return; 80 81 var $tabBody = $tab.panel('body'); 82 83 //銷毀已有的iframe 84 var $frame = $('iframe', $tabBody); 85 if ($frame.length > 0) { 86 try {//跨域會拒絕訪問，這里處理掉該異常 87 $frame[0].contentWindow.document.write(''); 88 $frame[0].contentWindow.close(); 89 } catch (e) { 90 //Do nothing 91 } 92 $frame.remove(); 93 if ($.browser.msie) { 94 CollectGarbage(); 95 } 96 } 97 $tabBody.html(''); 98 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' }); 99 var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody); 100 var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加載，請稍候 ...') + '</div>').appendTo($tabBody); 101 var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody); 102 var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody); 103 104 var iframe = document.createElement("iframe"); 105 iframe.src = params.iframe.src; 106 iframe.frameBorder = params.iframe.frameBorder || 0; 107 iframe.height = params.iframe.height || '100%'; 108 iframe.width = params.iframe.width || '100%'; 109 if (iframe.attachEvent) { 110 iframe.attachEvent("onload", function () { 111 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 112 $(this).remove(); 113 if ($(this).hasClass('mask-message')) { 114 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 115 $(this).remove(); 116 }); 117 } 118 }); 119 }); 120 } else { 121 iframe.onload = function () { 122 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 123 $(this).remove(); 124 if ($(this).hasClass('mask-message')) { 125 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 126 $(this).remove(); 127 }); 128 } 129 }); 130 }; 131 } 132 $containter[0].appendChild(iframe); 133 }); 134 }, 135 136 /** 137 * 增加iframe模式的標簽頁 138 * param {[type]} jq [description] 139 * param {[type]} params [description] 140 */ 141 addIframeTab: function (jq, params) { 142 return jq.each(function () { 143 if (params.tab.href) { 144 delete params.tab.href; 145 } 146 $(this).tabs('add', params.tab); 147 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe }); 148 }); 149 }, 150 151 /** 152 * 更新tab的iframe內容 153 * param {jq Object} jq [description] 154 * param {Object} params [description] 155 * return {jq Object} [description] 156 */ 157 updateIframeTab: function (jq, params) { 158 return jq.each(function () { 159 params.iframe = params.iframe || {}; 160 if (!params.iframe.src) { 161 var $tab = $(this).tabs('getTab', params.which); 162 if ($tab == null) return; 163 var $tabBody = $tab.panel('body'); 164 var $iframe = $tabBody.find('iframe'); 165 if ($iframe.length === 0) return; 166 $.extend(params.iframe, { 'src': $iframe.attr('src') }); 167 } 168 $(this).tabs('loadTabIframe', params); 169 }); 170 } 171 }); 172 173 174 175 176 }); 177 178 //退出登陸 179 function Exit() { 180 if (window.confirm("確定要退出嗎？")) { 181 window.location.href = "../Login/Login"; 182 } 183 }; 184 185 186 //獲取當前時間並格式化 187 function current() { 188 var d = new Date(), str = ''; 189 190 if (parseInt(d.getHours()) < 10) { 191 str += "0" + d.getHours() + ':'; 192 } 193 else { 194 str += d.getHours() + ':'; 195 } 196 if (parseInt(d.getMinutes()) < 10) { 197 str += "0" + d.getMinutes() + ':'; 198 } 199 else { 200 str += d.getMinutes() + ':'; 201 } 202 203 if (parseInt(d.getSeconds()) < 10) { 204 str += "0" + d.getSeconds(); 205 } 206 else { 207 str += d.getSeconds(); 208 } 209 210 str += "</div><div style='position: relative; top: 40px; left: 120px; width: 100px; font-family: 微軟雅黑; font-size: 12px;'>" 211 + d.getFullYear() + '年'; //獲取當前年份 212 if (parseInt(d.getMonth()) < 9) { 213 var m = d.getMonth() + 1 + '月'; 214 str += "0" + m; 215 } 216 else { 217 str += d.getMonth() + 1 + '月'; //獲取當前月份（0——11） 218 } 219 if (parseInt(d.getDate()) < 10) { 220 str += "0" + d.getDate() + '日 '; 221 } 222 else { 223 str += d.getDate() + '日 '; 224 } 225 str += "</div>"; 226 227 228 var today = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); 229 230 var w = "<div style='position: relative; top: 30px; left: 120px; width: 100px; font-family: 微軟雅黑; font-size: 12px; font-weight: bold;'>" 231 + today[d.getDay()] + ' '; 232 return w + str; 233 } 234 235 //設置顯示時間 236 setInterval(function () { $("#nowTime").html(current); }, 1000); 237 238 239 //“導航”下拉選項的點擊事件 240 function navigationClick(navigationId) { 241 $("#rightListDiv").load('/IndexHome/RightMessage?navigationId=' + navigationId); 242 }; 243 244 //創建Frame 245 function createFrame(url) { 246 var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>'; 247 return s; 248 }; 249 250 251 //添加tab頁 252 function addTab(title, tabHref) { 253 if ($("#pageTab").tabs("exists", title)) { 254 $("#pageTab").tabs("select", title); 255 } else { 256 $('#pageTab').tabs('addIframeTab', { 257 tab: { title: title, closable: true }, 258 iframe: { src: tabHref } 259 }); 260 } 261 }; 262 263 //點擊樹節點，打開新的tab頁 264 function AddNewTab(node) { 265 if (node.attributes != null) { 266 if ($("#pageTab").tabs("exists", node.attributes.pageName)) { 267 $("#pageTab").tabs("select", node.attributes.pageName); 268 } else { 269 $('#pageTab').tabs('addIframeTab', { 270 tab: { title: node.attributes.pageName, closable: true }, 271 iframe: { src: "/" + node.attributes.url } 272 }); 273 } 274 } 275 276 };
_rightMessage.js文件的完整代碼如下：
1 $(function () { 2 //左側導航菜單監聽事件，修改圖標樣式 3 $('.title').click(function () { 4 var $ul = $(this).next('ul'); 5 var src, srcArray; 6 7 src = $(".title_current img").attr("src"); 8 if (src != null) { 9 srcArray = src.indexOf('_blue'); 10 11 src = src.substring(0, srcArray) + '.png'; 12 13 $(".title_current img").attr("src", src); 14 } 15 $(".title_current").removeClass("title_current"); //移除所有的title_current樣式類 16 17 $(".leftmenu").find('ul').slideUp(); 18 19 if ($ul.is(':visible')) { 20 //收起導航菜單 21 $(this).next('ul').slideUp(); 22 } else { 23 //展開導航菜單並修改目錄菜單的樣式以及圖標 24 $(this).next('ul').slideDown(); 25 $(this).addClass("title_current"); 26 27 src = $(".title_current img").attr("src"); //目錄圖標 28 srcArray = src.split('.'); 29 src = srcArray[0] + '_blue.png'; 30 $(".title_current img").attr("src", src); 31 } 32 }); 33 34 35 //頁面導航監聽事件 36 $('.menuson a').click(function () { 37 $('.menuson a').removeClass("aclick"); 38 $(this).addClass("aclick"); 39 }); 40 41 42 43 44 $.extend($.fn.tabs.methods, { 45 /** 46 * 加載iframe內容 47 * param {jq Object} jq [description] 48 * param {Object} params params.which:tab的標題或者index;params.iframe:iframe的相關參數 49 * return {jq Object} [description] 50 */ 51 loadTabIframe: function (jq, params) { 52 return jq.each(function () { 53 var $tab = $(this).tabs('getTab', params.which); 54 if ($tab == null) return; 55 56 var $tabBody = $tab.panel('body'); 57 58 //銷毀已有的iframe 59 var $frame = $('iframe', $tabBody); 60 if ($frame.length > 0) { 61 try {//跨域會拒絕訪問，這里處理掉該異常 62 $frame[0].contentWindow.document.write(''); 63 $frame[0].contentWindow.close(); 64 } catch (e) { 65 //Do nothing 66 } 67 $frame.remove(); 68 if ($.browser.msie) { 69 CollectGarbage(); 70 } 71 } 72 $tabBody.html(''); 73 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' }); 74 var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody); 75 var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加載，請稍候 ...') + '</div>').appendTo($tabBody); 76 var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody); 77 var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody); 78 79 var iframe = document.createElement("iframe"); 80 iframe.src = params.iframe.src; 81 iframe.frameBorder = params.iframe.frameBorder || 0; 82 iframe.height = params.iframe.height || '100%'; 83 iframe.width = params.iframe.width || '100%'; 84 if (iframe.attachEvent) { 85 iframe.attachEvent("onload", function () { 86 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 87 $(this).remove(); 88 if ($(this).hasClass('mask-message')) { 89 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 90 $(this).remove(); 91 }); 92 } 93 }); 94 }); 95 } else { 96 iframe.onload = function () { 97 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 98 $(this).remove(); 99 if ($(this).hasClass('mask-message')) { 100 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 101 $(this).remove(); 102 }); 103 } 104 }); 105 }; 106 } 107 $containter[0].appendChild(iframe); 108 }); 109 }, 110 111 /** 112 * 增加iframe模式的標簽頁 113 * param {[type]} jq [description] 114 * param {[type]} params [description] 115 */ 116 addIframeTab: function (jq, params) { 117 return jq.each(function () { 118 if (params.tab.href) { 119 delete params.tab.href; 120 } 121 $(this).tabs('add', params.tab); 122 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe }); 123 }); 124 }, 125 126 /** 127 * 更新tab的iframe內容 128 * param {jq Object} jq [description] 129 * param {Object} params [description] 130 * return {jq Object} [description] 131 */ 132 updateIframeTab: function (jq, params) { 133 return jq.each(function () { 134 params.iframe = params.iframe || {}; 135 if (!params.iframe.src) { 136 var $tab = $(this).tabs('getTab', params.which); 137 if ($tab == null) return; 138 var $tabBody = $tab.panel('body'); 139 var $iframe = $tabBody.find('iframe'); 140 if ($iframe.length === 0) return; 141 $.extend(params.iframe, { 'src': $iframe.attr('src') }); 142 } 143 $(this).tabs('loadTabIframe', params); 144 }); 145 } 146 }); 147 148 149 150 151 }); 152 153 154 155 //創建Frame 156 function createFrame(url) { 157 var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>'; 158 return s; 159 }; 160 161 162 //添加tab頁 163 function addTab(title, tabHref) { 164 if ($("#pageTab").tabs("exists", title)) { 165 $("#pageTab").tabs("select", title); 166 } else { 167 $('#pageTab').tabs('addIframeTab', { 168 tab: { title: title, closable: true }, 169 iframe: { src: tabHref } 170 }); 171 } 172 };
1.3控制器
首頁控制器就是把SessionManage會話類中的信息取出來。部分代碼如下：
//一級導航目錄
IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList;
//操作權限頁面
IList<Catalog> rightList = SessionManage.CurrentUser.RightList;
if (navigationList != null && navigationList.Count > 0)
{
IList<Catalog> currentRight =
(from item in rightList where item.ParentId == navigationList.First().CatalogId select item)
.ToList();
ViewBag.Navigation = navigationList;
ViewBag.RightList = currentRight;
}
public PartialViewResult RightMessage(int navigationId)
{
//根據一級導航信息，展示二級導航信息
}
IndexHomeController.cs控制器的詳細代碼如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using Session; 7 using OdbcDbAccess; 8 using System.Data; 9 using Models; 10 11 12 namespace CqReportSystem.Controllers 13 { 14 public class IndexHomeController : Controller 15 { 16 /// <summary> 17 /// **************************** 18 /// 功能：主頁 19 /// 作者：王令 20 /// 時間：2015-7-18 21 /// 郵箱：1129137758@qq.com 22 /// **************************** 23 24 public ActionResult IndexHome() 25 { 26 if (SessionManage.CurrentUser == null) 27 { 28 Response.Redirect("/"); 29 } 30 else 31 { 32 //一級導航目錄 33 IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList; 34 //操作權限頁面 35 IList<Catalog> rightList = SessionManage.CurrentUser.RightList; 36 if (navigationList != null && navigationList.Count > 0) 37 { 38 IList<Catalog> currentRight = 39 (from item in rightList where item.ParentId == navigationList.First().CatalogId select item) 40 .ToList(); 41 ViewBag.Navigation = navigationList; 42 ViewBag.RightList = currentRight; 43 } 44 45 ViewData["UserName"] = SessionManage.CurrentUser.OperatorName; 46 } 47 return View(); 48 } 49 50 51 /// <summary> 52 /// 根據一級目錄展示二級目錄及訪問頁面 53 /// </summary> 54 /// <param name="navigationId"></param> 55 /// <returns></returns> 56 public PartialViewResult RightMessage(int navigationId) 57 { 58 if (SessionManage.CurrentUser == null) 59 { 60 Response.Write("<script> window.parent.location.href = '/Login/Login';</script>"); 61 } 62 else 63 { 64 IList<Catalog> rightList = SessionManage.CurrentUser.RightList; 65 if (navigationId == -1) 66 { 67 IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList; 68 navigationId = navigationList.First().CatalogId; 69 } 70 71 IList<Catalog> currentRight = 72 (from item in rightList where item.ParentId == navigationId select item) 73 .ToList(); 74 ViewBag.RightList = currentRight; 75 } 76 77 return PartialView("_rightMessage"); 78 } 79 80 81 public ActionResult Home() 82 { 83 return View(); 84 } 85 86 } 87 }
1.4運行頁面
當以管理員身份登錄時，運行界面如下：
當以一般用戶登錄時，運行界面如下：