DigitalScholl/Learun.Framework.Ultimate V7/Learun.Application.Web/Views/Home/DesktopNavigation4.cshtml

@{
ViewBag.Title = "title";
Layout = "~/Views/Shared/_Index.cshtml";
}
@Html.AppendJsFile("~/Views/LR_Content/script/lr-clientdata.js")
<style type="text/css">
	body {
		padding: 10px;
	}

	.lr-desktop-panel {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 15px 20px;
		border-radius: 3px;
	}

	.navTitle {
		font-size: 18px;
		background: #EDF6FB;
		color: #414045;
		line-height: 24px;
		padding: 15px;
	}

	.navTitle i {
		/*color: #6A9AE1;*/
		font-size: 18px;
		margin-right: 5px;
		position: relative;
		top: 2px;
	}

	.navRow {
		overflow: hidden;
		margin: 0 -8px;
	}
	.navCon {
		display: none;
	}
	.navCon.active{
		display: block;
	}
	.navClo6 {
		margin-top: 22px;
		padding: 0 8px;
		float: left;
		width: 16.666667%;
	}

	.navBox {
		background: #7299E4;
		border-radius: 6px;
		overflow: hidden;
		height: 126px;
		border: 1px solid #7299E4;
		position: relative;
		cursor: pointer;
	}

	.navT {
		padding: 20px;
		font-size: 18px;
		line-height: 24px;
		color: #fff;
	}

	.navT i {
		font-size: 18px;
		margin-right: 20px;
		position: relative;
		/*top: 2px;*/
	}

	.navMore {
		background: #fff;
		min-height: 15px;
		line-height: 50px;
		padding: 0 20px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: right;
		color: #7299E4;
		height: 50px;
	}

	.navMore i {
		margin-left: 5px;
	}
	.navTitle .fa-angle-left{
		width: 24px;
	    height: 24px;
	    opacity: .3;
	    line-height: 24px;
	    text-align: center;
	    background: #fff;
	    color: #666;
	    border-radius: 3px;
	    margin-right: 25px;
	    top: 0px;
	}
	.navCons .navMore{ 
		text-align: center;
	}
	.navCons .navT{ 
		text-align: right;
	}
	.navCons .navT > *{ 
		display: block;
	}
	.navCons .navT > i {
	    font-size: 30px;
	    margin-right: 0;
	    margin-bottom: 10px;
	}
	.navCons .navBox{
		height: 156px;
	}
</style>
<div class="lr-desktop-panel lr-scroll-wrap" style="overflow: auto;">
	<div class="nav"></div>
</div>


<script>
	var id = request('id');
	var colorArr = ['#7299E4', '#52BED2', '#4EC586', '#DDC04A', '#DD964A', '#DD6D4A', '#E4474D', '#B658D1', '#8564D8',
		'#6467D8', '#468BD1', '#7299E4', '#52BED2', '#4EC586', '#DDC04A', '#DD964A', '#DD6D4A', '#E4474D', '#B658D1'
	];
	var modulesTree = top.learun.clientdata.get(['modulesTree']);
	var parentId = '0';
	var modules = modulesTree[parentId] || [];
	//console.log(modulesTree)
	$('.nav').on('click', '.navMoreBox .navMore', function(){//查看更多
		var id = $(this).parents('.navBox').attr('id');
		$('.navCon').css('display', 'none').removeClass('active');
		$('.navCon[parentid="'+ id +'"]').addClass('active').fadeIn();
		//console.log($('.navRow[parentid="'+ id +'"]'))
	}).on('click', '.navTitle .fa-angle-left', function(){//返回上一页
		var id = $(this).parents('.navCon').attr('parentid');
		$('.navCon').css('display', 'none').removeClass('active');
		$('#' + id).parents('.navCon').addClass('active').fadeIn();
	}).on('click', '.navBox', function(){//跳转页面
		if(!$(this).hasClass('navMoreBox')){
			var $obj = $(this);
            var id = $obj.attr('id');
            var _module = top.learun.clientdata.get(['modulesMap', id]);
            switch (_module.F_Target) {
                case 'iframe':// 窗口
                    if (top.learun.validator.isNotNull(_module.F_UrlAddress).code) {
                        top.learun.frameTab.open(_module);
                    }
                    break;
                case 'open':// 窗口
                    var newWin = window.open(_module.F_UrlAddress);
                    newWin.location.replace(_module.F_UrlAddress);
                    break;
            }
		}
	})
	
	var $firstmenus = $('.nav');
	
	for (var i = 0, l = modules.length; i < l; i++) {
		var item = modules[i];
		if(item.F_ModuleId == id){
			if (item.F_IsMenu == 1) {
				// 第二级菜单
				var secondModules = modulesTree[item.F_ModuleId] || [];
				var $secondMenus = $('<div class="navRow" parentid="'+ item.F_ModuleId +'"></div>');
				var $secondMenux = $('<div class="navCon active" num="2" parentid="'+ item.F_ModuleId +'"><div class="navTitle"><i class="'+ item.F_Icon +'"></i>'+ item.F_FullName +'</div></div>');
				var secondMenuHad = false;
				for (var j = 0, sl = secondModules.length; j < sl; j++) {
					var secondItem = secondModules[j];
					if (secondItem.F_IsMenu == 1) {
						secondMenuHad = true;
						var $secondMenuItem = $('<div class="navClo6"></div>');
						var color = colorArr[j];
						if (!!secondItem.F_Description) {
							$secondMenuItem.attr('title', secondItem.F_Description);
						}
						var threeModules = modulesTree[secondItem.F_ModuleId] || [];
						var $threeMenus = $('<div class="navRow"></div>');
						var $threeMenux = $('<div class="navCon navCons" num="3" parentid="'+ secondItem.F_ModuleId +'"><div class="navTitle" style="background: '+ color +';color:#fff"><i class="fa fa-angle-left"></i><i class="'+ secondItem.F_Icon +'"></i>'+ secondItem.F_FullName +'</div></div>');
						var threeMenuHad = false;
						var secondClassName = '', secondMore = '';
						//console.log(threeModules.length)
						if(threeModules.length != 0){
							secondClassName = 'navMoreBox', secondMore = '展开更多 <i class="fa fa-caret-right"></i>';
						}
						
						var secondItemHtml = '<div class="navBox '+ secondClassName +'" id="' + secondItem.F_ModuleId + '" style="background: '+ color +';border-color:'+ color +';">'+
												'<div class="navT">'+
													'<i class="'+ secondItem.F_Icon +' lr-menu-item-icon"></i><span>'+ secondItem.F_FullName +'</span>'+
												'</div>'+
												'<div class="navMore" style="color:'+ color +'">'+ secondMore +'</div>'+
											'</div>';
						$secondMenuItem.append(secondItemHtml);
						// 第三级菜单
						for (var m = 0, tl = threeModules.length; m < tl; m++) {
							var threeItem = threeModules[m];
							if (threeItem.F_IsMenu == 1) {
								threeMenuHad = true;
								var $threeMenuItem = $('<div class="navClo6"></div>');
								var fourModules = modulesTree[threeItem.F_ModuleId] || [];
								var $fourMenus = $('<div class="navRow"></div>');
								var $fourMenux = $('<div class="navCon navCons" num="4" parentid="'+ threeItem.F_ModuleId +'"><div class="navTitle" style="background: '+ color +';color:#fff"><i class="fa fa-angle-left"></i><i class="'+ threeItem.F_Icon +'"></i>'+ threeItem.F_FullName +'</div></div>');
								var fourMenuHad = false;
								var threeClassName = '', threeMore = '';
								if(fourModules.length != 0){
									threeClassName = 'navMoreBox', threeMore = '展开更多 <i class="fa fa-caret-right"></i>';
								}
								var threeItemHtml = '<div class="navBox '+ threeClassName +'" id="' + threeItem.F_ModuleId + '" style="background: '+ color +';border-color:'+ color +';">'+
														'<div class="navT">'+
															'<i class="'+ threeItem.F_Icon +' lr-menu-item-icon"></i><span>'+ threeItem.F_FullName +'</span>'+
														'</div>'+
														'<div class="navMore">'+ threeMore +'</div>'+
													'</div>';
								$threeMenuItem.append(threeItemHtml);
								//第四级菜单
								for (var n = 0, fl = fourModules.length; n < fl; n++) {
									var fourItem = fourModules[n];
									if (fourItem.F_IsMenu == 1) {
										fourMenuHad = true;
										var $fourMenuItem = $('<div class="navClo6"></div>');
										
										var fourItemHtml = '<div class="navBox" id="' + fourItem.F_ModuleId + '" style="background: '+ color +';border-color:'+ color +';">'+
																'<div class="navT">'+
																	'<i class="'+ fourItem.F_Icon +' lr-menu-item-icon"></i><span>'+ fourItem.F_FullName +'</span>'+
																'</div>'+
																'<div class="navMore"></div>'+
															'</div>';
										$fourMenuItem.append(fourItemHtml);
										$fourMenus.append($fourMenuItem);
									}
								}
								if (fourMenuHad) {
									$fourMenux.append($fourMenus);
									$firstmenus.append($fourMenux);
								}
								$threeMenus.append($threeMenuItem);
							}
						}
						if (threeMenuHad) {
							$threeMenux.append($threeMenus);
							$firstmenus.append($threeMenux);
						}
						$secondMenus.append($secondMenuItem);
					}
				}
				if (secondMenuHad) {
					$secondMenux.append($secondMenus);
					$firstmenus.append($secondMenux);
				}
			}
			
			
			break; 
		}
	}
	
	
	
</script>