首页模块就是展示不同权限的最终结果了，在阅读这章之前若有些不明白，可看看后续的单独的权限模块，用户模块，目录模块后从整体上再看首页模块。
阅读该模块需要一定或者是比较熟练的js知识,EasyUI Tab控件知识。整个首页模块的流程是登陆模块获取到了用户的基本信息，可以访问的网页信息，目录信息后，封装在sessionManage会话中，通过JS文件做数据的格式转换及动作定义，通过Css文件做网页的效果美化。简而言之，就是获取后台数据渲染到网页。
1.1视图
首页模块的一级导航选择不同的信息关联二级导航，二级导航展开显示可以访问的页面链接。每一个链接在网页的展示模块通过EasyUI的Tab控件展示，可以实现如下效果:
对应单个的tab中显示的网页信息是通过iframe标签的方式实现的。及打开一个tab就创建一个iframe对象。关闭一个tab就释放该iframe对象。
首页模块的基本结构简图如下：
首页视图是由两部分视图组成的。主视图主要是展示整个的框架结构，还有一个部分视图主要是展示左侧的权限信息页面。主视图中比较关键的代码如下：
@using Models
@using Page = Models.Page
@Html.Partial("_rightMessage", new { navigationId = -1 })
首页详细视图代码如下：
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 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.CatalogNamea><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 103 104 <div class="logo" id="nowTime"> 105 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.PageNamea><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 = '';
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 += "
"
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 += "
";
226
227
228 var today = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
229
230 var w = ""
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 = '