JS+HTML 菜单，对话框，轮播，弹框

+function tab($){
    
    //警告框
    $.fn.alert = function(e){        
        var $this = $(this);
        $this.find('.close').click(function(){
            $this.fadeOut(250);        
        });        
    };
    
    //一、二级菜单
    $.fn.tab = function (e) {
                
        var $this = $(this);

        var $ul = $this.closest('ul');
        var selector = $this.attr('href');
        var $target = $(selector);        
        if ($this.children('span').hasClass('active')) {
            if($target.css('display') == 'block'){
                return ;
            }            
        }        
        //处理一级菜单
        var $active = $ul.find('.active');
        $active.removeClass('active');
        $this.children('span').addClass('active');
        
        //处理二级菜单
        $target.parent().find('.nav-pane').css('display','none');
        $target.slideDown(150);        
        $target.mouseleave(function(){
            //该处的this指的是正在显示的二级菜单
            $(this).slideUp(150);
        });
        
        //移除菜单单击的事件
        $this.click(function(e){ e.preventDefault(); } );

    };
    
    //模态对话框
    $.fn.dialog = function (option, e ) {        
        var $this = $(this);
        var $dialogBg = $('<div class="dialog-bg" style="display:none" />');
        
        if (option == 'show'){
             show(); 
        }else if(option == 'hide'){
            hide();
        }

        function show(){
            $dialogBg.appendTo(document.body);
            $dialogBg.fadeIn(250);
            $this.slideDown(300);        
            $this.find('.close').click(function(){
                hide();
            });
        }
        
        function hide(){
            $this.slideUp(300);
            $('body').children('.dialog-bg').fadeOut(200);
        };
    };
    
    //实现手风琴的效果(panel的折叠/显示)
    $.fn.accordion = function(option,e){        
        var $this = $(this);
        $this.find('.panel-header').click(function(){
            //该click方法中的this指的是具体单击的panle-header
            var $header = $(this);
            
            var $currentContent = $header.parent().children('.panel-content');
            
            if(($currentContent).css('display') == 'block'){
                $currentContent.slideUp(200);
            }else{
                $currentContent.slideDown(200);
            }
        });
    };
    
    //实现轮播（幻灯片）的效果
    $.fn.carousel = function(option){
        var $this = $(this);        
        $this.find('.carousel-control.left').click(function(){
            next();    
        });
        $this.find('.carousel-control.right').click(function(){
            pre();
        });        
        
        function next(){
            var $currentIndicator = $this.find('.carousel-indicators > .active');
            var $nextIndicator = $currentIndicator.next();
            //判断是否是最后一个
            if($nextIndicator.length == 0){
                $nextIndicator = $this.find('.carousel-indicators > li:first');
            }
            $currentIndicator.removeClass('active');
            $nextIndicator.addClass('active');
            
            var $currentInner = $this.find('.carousel-inner > .item.active');
            var $nextInnner = $currentInner.next();
            //判断是否是最后一个
            if($nextInnner.length == 0){
                $nextInnner = $this.find('.carousel-inner > .item:first');
            }            
            $currentInner.removeClass('active');
            $nextInnner.addClass('active');
        }
        
        function pre(){
            var $currentIndicator = $this.find('.carousel-indicators > .active');
            var $preIndicator = $currentIndicator;
            //判断是否是第一个
            if($currentIndicator.index() == 0){
                $preIndicator = $this.find('.carousel-indicators > li:last');
            } else {
                $preIndicator = $currentIndicator.prev();
            }
            $currentIndicator.removeClass('active');
            $preIndicator.addClass('active');
            
            var $currentInner = $this.find('.carousel-inner > .item.active');
            var $preInnner = $currentInner;
            //判断是否是第一个
            if($currentInner.index() == 0){
                $preInnner = $this.find('.carousel-inner > .item:last');
            } else {
                $preInnner = $currentInner.prev();
            }    
            $currentInner.removeClass('active');
            $preInnner.addClass('active');            
        }    
        
        $this.find('.carousel-indicators li').bind('click', function(){
            if(!$(this).hasClass('hasClass')){
                $this.find('.carousel-indicators > .active').removeClass('active');
                $(this).addClass('active');    
                $this.find('.carousel-inner > .item.active').removeClass('active');
                $this.find('.carousel-inner .item:eq('+$(this).index()+')').addClass('active');    
            }
        });
    };
    
    //工具提示
    $.fn.toolTip = function(e){
        //this指本次事件触发元素（比如：如果是单击按钮触发该方法，this指的就是该按钮）
        var $this = $(this);
                
        var str = '<div class="tooltip top" style="display:none;"> <div class="arrow" ></div> <div class="tooltip-content"></div></div>';
        var $toolTip = $(str);        

        var position = $this.position();
        var top = position.top;
        var left = position.left;        
        var width = $this.outerWidth(true);
        var title = $this.attr('title');
        $toolTip.find('.tooltip-content').text(title);
        
        $this.attr('title','');
        
        $this.after($toolTip);
        
        var toolWidth = $toolTip.outerWidth(true);
        var toolHeight = $toolTip.outerHeight(true);    
        
        var toolTop = top - toolHeight - 7;
        var toolLeft = left + width/2 - toolWidth/2 ;
        
        $toolTip.css('top',toolTop);        
        
        $toolTip.css('left',toolLeft);
        //$toolTip.fadeIn(200);
        
        $this.mouseover(function(e){
            $toolTip.slideDown(200);
        });
        
        $this.mouseleave(function(e){
            $toolTip.slideUp(200);
            //$toolTip.remove();    
            //$this.attr('title',title);        
        });        
    };
    //弹出框提示
    $.fn.popover = function(e){
        //this指本次事件触发元素（比如：如果是单击按钮触发该方法，this指的就是该按钮）
        var $this = $(this);
                
        var str = '<div class="popover top" style="display:none;">' +
         '<div class="arrow" ></div>' +
         '<div class="popover-title">' +
         '<h3>Popover on right</h3>' +
         '</div>' + 
         '<div class="popover-content txt">' +
         '弹出内容 ！' +
         '</div>' ;    

        var $toolTip = $(str);        

        var position = $this.position();
        var top = position.top;
        var left = position.left;        
        var width = $this.outerWidth(true);
        var title = $this.attr('title');
        var content = $this.attr('data-content');
        $toolTip.find('.popover-title').text(title);
        $toolTip.find('.popover-content').text(content);
        
        $this.attr('title','');
        
        $this.after($toolTip);
        
        var toolWidth = $toolTip.outerWidth(true);
        var toolHeight = $toolTip.outerHeight();    
        
        $toolTip.css('top',top - toolHeight - 10);
        $toolTip.css('left',left + width/2 - toolWidth/2);
        
        $this.click(function(){
            //$toolTip.fadeToggle(300);                
            $toolTip.slideToggle();
        });                    
    };
    
    //下拉菜单
    $.fn.dropDown = function(){            
        //this是指所有绑定该dropDown()函数的所有DOM元素    
        $(this).click(function(){
            //this是指点击的DOM元素
            var $this = $(this);
            var $ul = $this.find('ul');
            //当下来菜单在一个菜单条里时，单击显示该下拉菜单的同时，需要隐藏菜单条里的其它菜单
            if($ul.is(':hidden')){
                $this.parents('.navigation').find('ul:visible').slideUp(100);
            }        
            $this.find('ul').slideToggle(100);            
        });            
    };
    
}(jQuery);

function getRootPath(){
    var curWwwPath=window.document.location.href;
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    var localhostPaht=curWwwPath.substring(0,pos);
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    return(localhostPaht+projectName);
};

window.alert_tmp = function(alertStr){
    var $alertBg = $('<div class="window-alert-bg" />');
    var alertDiv = 
        '<div class="window-alert  window-alert-sm">' +
            '<div class="dialog-content">' +
                '<p style="word-break:break-all;">弹出框内容</p>' +
            '</div>'     +                        
            '<div class="dialog-footer" style="text-align:right;background-colora:red;">' +
                '<button class="close btn btn-warning" style="background-color: #EF8E54;margin-right:35px;margin-top:20px;">确定</button>' +
            '</div>' +
        '</div>' ;
    var $alertDiv = $(alertDiv);
    $('body').append($alertBg);
    $('body').append($alertDiv);
    $('.window-alert  p').html(alertStr);
    $alertDiv.find('.close').click(function(){
        $alertBg.remove();
        $alertDiv.remove();
    });
};