jquery模板制作左侧导航组件

/**
 * 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");
            })
        }
    });
});