/**
* Created by bmk on 16-4-25.
*
* 用法:在自己的js里面把左侧导航的相关图标和对应的列表项名称如下编写:
* 版本更新日至按需添加
* 在js中的RNA.run(//开始加载页面数据和样式)中调用:
* 用法:在自己的js里面把左侧导航的相关图标和对应的列表项名称如下编写:
* 版本更新日至按需添加
* 在js中的RNA.run(//开始加载页面数据和样式)中调用:
* var navData = {
url: '/static/css/img/Apps-img/ioc_GEODge.png',
anayname: 'GEO数字基因表达谱分析平台',
report:{reportId:'menu0',icon:'fa-map',itm:'结题报告'},
lis: [{icon: 'fa-joomla', itm: '基本分析', id: 'menu2'},
{
icon: 'fa-anchor',//此处为折叠项
itm: '个性化一',
// id: 'menu3',
arrow:"fa arrow",
collapses:[{icon: 'fa-vine', itm: '表达量挖掘', id: 'menu3'}]
},
{icon: 'fa-vine', itm: '表达量挖掘', id: 'menu4'},
{icon: 'fa-stumbleupon',//此处为折叠项
itm: '个性化二',
// id: 'menu5',
arrow:"fa arrow",
collapses:[{icon: 'fa-vine', itm: '表达量挖掘', id: 'menu5'},{icon: 'fa-vine', itm: '表达量挖掘', id: 'menu5'}]
},
{icon: 'fa-mortar-board', itm: '新手向导', class: 'click new-guid', id: 'menu1'}]
};
* navCommon.init().run(navData,左侧导航nav的id名,_isBlank != null ? _isBlank: true);
* 在$(document).ready(function (){}的末尾调用时:
* 将 _isBlank != null ? _isBlank: true 改为 isBlank != null ? false: true;
*
* navCommon.init().run(navData,左侧导航nav的id名,_isBlank != null ? _isBlank: true);
* 在$(document).ready(function (){}的末尾调用时:
* 将 _isBlank != null ? _isBlank: true 改为 isBlank != null ? false: true;
*
*
*/
(function (window, $) {
var navCommon = window.navCommon = window.navCommon || {},
proxy = function (func, thisObject) {
return (function () {
return func.apply(thisObject, arguments);
});
};
function _extend(target, source) {
for (var p in source) {
if (source.hasOwnProperty(p)) {
target[p] = source[p];
}
}
return target;
}
_extend(navCommon, appUtil);
navCommon.init = function () {
this._reportShowJsTmplJson = proxy(_tempNav, this);
return this;
};
navCommon.run = function (data,elementId,isBlank) {
var _reportShowJsTmplJson1 = this._reportShowJsTmplJson();
$.tmpl(_reportShowJsTmplJson1, data).appendTo("#" + elementId);
var report=data.report;
appReport(isBlank,report);
// uDate();
$(window).resize(function(){
// uDate();
});
return this;
};
function appReport(_isBlank,report){
if(!_isBlank){
var rpt="<li role=\"presentation\" class=\"active\"><a href=\"#"+report.reportId+"\" aria-controls=\""+report.reportId+"\" role=\"tab\" data-toggle=\"tab\"><i class=\"fa "+report.icon+"\"></i><span class=\"nav-label text-tip\">"+report.itm+"</span></a></li>";
$(".nav-header").after(rpt);
}else {
$(".new-guid").addClass('active');
}
}
// function uDate() {
// var inHeight = window.innerHeight;
// $("#page-wrapper").css("min-height",inHeight);
// var sumHeight = 0;
// var liHeight = $(".new-guid").height();
// var mtop;
// if ($("#side-menu .version-update-li").length>0){
// $("#side-menu").find("li").not(".new-guid").not(".version-update-li").each(function () {
// sumHeight += $(this).height();
// mtop = inHeight - sumHeight - liHeight*2-40;
// $(".version-update-li").css("margin-top", mtop + "px");
// });
// }else{
// $("#side-menu").find("li").not(".new-guid").each(function () {
// sumHeight += $(this).height();
// mtop = inHeight - sumHeight - liHeight-40;
// $(".new-guid").css("margin-top", mtop + "px").css("border-top","1px solid #1ab394");
// });
// }
// }
function _tempNav() {
return "<!--左侧导航-->"
+ "<div class=\"sidebar-collapse\">"
+ "<ul class=\"nav metismenu\" id=\"side-menu\">"
+ "<li class=\"nav-header\">"
+ "<div class=\"dropdown profile-element text-center\">"
+ "<span>"
+ "<img alt=\"image\" class=\"img-circle\" src=\"${url}\" style=\"width:75px;height:75px;\">"
+ "</span>"
+ "<span class=\"clear\">"
+ "<span class=\"block m-t-xs\"><strong class=\"font-bold\" style=\"color:#FFFFFF\">${anayname}</strong></span>"
+ "</span>"
+ "</div>"
+ "<div class=\"logo-element\">${anayname}</div>"
+ "</li>"
+ "{{each(i,dat) lis}}"
+ "<li role=\"presentation\" class=\'${dat.class}\'>"
+ "{{if dat.collapses&&dat.collapses !=\"\"}}"
+ "<a href=\"javascript:void(0);\"><i class=\"fa ${dat.icon}\"></i><span class=\"nav-label\">${dat.itm}</span><span class=\"${dat.arrow}\"></span></a>"
+ "{{else}}"
+ "<a href=\"#${dat.id}\" aria-controls=\"${dat.id}\" role=\"tab\" data-toggle=\"tab\"><i class=\"fa ${dat.icon}\"></i><span class=\"nav-label text-tip\">${dat.itm}</span><span class=\"${dat.arrow}\"></span></a>"
+ "{{/if}}"
+ "<ul class=\"nav nav-second-level collapse\">"
+ "{{each dat.collapses}}"
+ "<li><a href=\"#{{= $value.id}}\" aria-controls=\"{{= $value.id}}\" role=\"tab\" data-toggle=\"tab\">{{= $value.itm}}</a></li>"
+ "{{/each}}"
+ "</ul>"
+ "</li>"
+ "{{/each}}"
+ "</ul>"
+ "</div>"
}
})(window, jQuery);
$(document).ready(function(){
$("#side-menu>li").each(function(){
if($(this).find("ul").find("li").length>0){
$(this).find("a").click(function(){
$(this).parent().siblings().find("a").find("span:last-child").removeClass("arrow-transtion");
$(this).find("span:last-child").toggleClass("arrow-transtion");
$(this).parent().removeClass("active");
$(this).next("ul").toggleClass("in");
$(this).next("ul").find("li").click(function(){
$(this).parent().parent("li").siblings().removeClass("active");
$(this).parent().addClass("in");
$(this).parent().parent("li").siblings().find("ul").find("li").removeClass("active");
});
})
}else{
$(this).click(function(){
$(this).siblings().find("ul").find("li").removeClass("active");
$(this).siblings().find("ul").removeClass("in");
$(this).siblings().find("a").find("span:last-child").removeClass("arrow-transtion");
})
}
});
});
