ace--4.tab

 是根据此文章总结而成，楼猪花了两天总结并指出一些错误http://www.cnblogs.com/landeanfen/p/7601880.html

 

1      基本结构

 

 

2      基本操作ifream

2.1  Index.jsp

<div class="page-content">
    <div class="row">
        <div class="col-xs-12" style="padding-left:5px;">
            <ul class="nav-my-tab">
                <li class="leftbackward"><a href="#" >
                    <i class="icon-backward"></i></a>
                </li>
                <li class="rightforward"><a href="#">
                    <i class="icon-forward"></i></a>
                </li>
               <li class="middletab">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#Index" role="tab" data-toggle="tab">
                            <i class="icon-home"></i>系统首页</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Index">
                    <img src="${path}/static/img/1.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

2.2  bootstrap-tab.css

.nav-tabs{
    background: #fafafa;
    border-bottom: 3px #3498db solid;
    width:999999px;
}
 .nav-tabs li a{
    line-height:2;/*坑爹*/
    border:1px #ddd solid;
    margin-right: -1px;
    color: #999;
    border-radius: 0;
}
 .nav-tabs li a .glyphicon-remove-sign:hover{
    color:red;
    cursor: pointer;
}
 .nav-tabs li a i:first-child{
    margin-right: 3px;
}
 .nav-tabs .active a{
    border-top: solid 2px #3498db !important;
    background: #3498db !important;
    color:#fff !important;
}


.nav-my-tab{
    padding-left: 0px;
    margin-bottom: 0px;/*坑爹*/
    margin-left: 0px;/*坑爹*/
}
.nav-my-tab .middletab{
    height: 36px;
    overflow: hidden;
    border-bottom: 3px #3498db solid;
    position: relative;
    background: #fafafa;
}
.nav-my-tab li{
    list-style-type: none;
}
.nav-my-tab li a{
    padding:7px 10px;
}
.nav-my-tab .leftbackward{
    float: left;
    background: #fff;
    padding-top: 7px;
    border-top: 1px #ddd solid;
    height:36px;
    border-bottom: 3px #3498db solid;
}
.nav-my-tab .leftbackwarda{
    border-left-width: 0px;
    color: #999;
    padding-top: 9px;
    padding-bottom: 8px;
    margin-right: -1px;
}
.nav-my-tab .leftbackwarda:hover,.nav-my-tab .leftbackwarda:focus{
    text-decoration: none;
    background: #ddd;
}

.nav-my-tab .rightforward{
    float:right;
    position: relative;
    line-height: 2.6;
    background: #fff;
    border-top: 1px #ddd solid;
    border-bottom: 3px #3498db solid;

}
.nav-my-tab .rightforwarda{
    width: 35.5px;
    line-height: 2;
    color: #999;
    height: 35px;
    padding: 8px 10px;
    padding-left: 13px;
    border-left: 1px #ddd solid;
}
.nav-my-tab .rightforwarda:hover,.nav-my-tab .rightforwarda:focus{
    text-decoration: none;
    background: #ddd;
} 

2.3  bootstrap-tab.js

var changeFrameHeight = function (that) {
    $(that).height(document.documentElement.clientHeight - 115);
    $(that).parent(".tab-pane").height(document.documentElement.clientHeight - 130);
}
var addTabs = function (options) {
    //可以在此处验证session
    //var rand =Math.random().toString();
    //var id =rand.substring(rand.indexOf('.') + 1);
    // var url = window.location.protocol+ '//' + window.location.host + "/yjxt/";//获得项目绝对路径basepath
    // options.url = url + options.url;
    options.url = bashPath +"/"+ options.url;
    var id = "tab_" + options.id;
    var active_flag= false;
    if($("#"+ id)){
        active_flag = $("#" + id).hasClass('active');
    }
    $(".active").removeClass("active");
    //如果TAB不存在，创建一个新的TAB
    if (!$("#" + id)[0]) {
        //固定TAB中IFRAME高度
        mainHeight = $(document.body).height();
        //创建新TAB的title
        title = '<lirole="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab"data-toggle="tab"><i class="'+options.icon+'"></i>' + options.title;
        //是否允许关闭
        if (options.close) {
            title += '<i class="glyphiconglyphicon-remove-sign" tabclose="' + id + '"></i>';
        }
        title += '</a></li>';
        //是否指定TAB内容
        if (options.content) {
            content = '<divrole="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
        } else {//没有内容，使用IFRAME打开链接
            content = '<divrole="tabpanel" class="tab-pane" id="' + id + '"><iframe id="iframe_'+id+'" src="' + options.url +
                '" width="100%"height="100%" οnlοad="changeFrameHeight(this)" frameborder="no" border="0"marginwidth="0" marginheight="0" scrolling="yes"allowtransparency="yes"></iframe></div>';
        }
        //加入TABS
        $(".nav-tabs").append(title);
        $(".tab-content").append(content);

    }else{
        if(active_flag){
            $("#iframe_" + id).attr('src', $("#iframe_" + id).attr('src'));
        }
    }

    //激活TAB
    $("#tab_"+ id).addClass('active');
    $("#" + id).addClass("active");

    //激活左边菜单
    $('#menuli').removeClass('active');
    $('#li_'+options.id).addClass('active');

    //判断如果超过10个，则左移
    var lis = $(".nav-tabsli");
    if(lis.length > 10) {
        $(".nav-my-tab .middletab .nav-tabs").animate({left: (-100 * (lis.length - 10)) +'px'});
    }

};

var closeTab = function (id) {
    //如果关闭的是当前激活的TAB，激活他的前一个TAB
    if ($(".nav-my-tab .middletab li.active").attr('id') == "tab_"+ id) {
        $("#tab_" + id).prev().addClass('active');
        $("#" + id).prev().addClass('active');
    }
    //关闭TAB
    $("#tab_"+ id).remove();
    $("#" + id).remove();
};
$(function() {
    var mainHeight= $(document.body).height() - 45;
    $('.main-left,.main-right').height(mainHeight);
    //点击菜单触发
    $("[addtabs]").click(function () {
        addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
    });

    $(".nav-tabs").on("click", "[tabclose]", function (e) {
        var id = $(this).attr("tabclose");
        closeTab(id);
    });

    window.onresize = function() {
        var target= $(".tab-content .active iframe");
        changeFrameHeight(target);
    }

});
$(function() {
    //tab页向左向右移动
    $('.nav-my-tab.leftbackward').click(function(){
        var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left');
        var iLeft= parseInt(strLeft.replace('px', ''));
        if(iLeft>=0){
            return;
        }
        else{
            // debugger;
            var totalWidth=0;
            var lis = $(".nav-tabs li");
            for(var i=0;i<lis.length;i++){
                var item = lis[i];
                totalWidth-= $(item).width();
                if(iLeft>totalWidth){
                    iLeft+=$(item).width();
                    break;
                }
            };
            if(iLeft>0){
                iLeft=0;
            }
            $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft+ 'px'});
        }
    });
    $('.nav-my-tab .rightforward').click(function(){
        var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left');
        var iLeft= parseInt(strLeft.replace('px', ''));
        var totalWidth=0;
        $.each($(".nav-tabs li"),function(key, item){
            totalWidth+= $(item).width();
        });
        var tabsWidth= $(".nav-my-tab .middletab").width();
        if(totalWidth>tabsWidth){
            // debugger;
            if(totalWidth-tabsWidth<=Math.abs(iLeft)){
                return;
            }
            var lis = $(".nav-tabs li");
            totalWidth=0;
            for(var i=0;i<lis.length;i++){
                var item = lis[i];
                totalWidth-= $(item).width();
                if(iLeft>totalWidth){
                    iLeft-=$(item).width();
                    break;
                }
            };
            $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft+ 'px'});
        }

    });
});

 

 http://download.csdn.net/download/qq_26553781/10226387