Navigation Tab 导航组件

一、HTML结构

<div class="tab">
  <div class="arrow-left">
    <i class="iconfont icon-shuangjiantouzuo"></i>
  </div>
  <div class="tab-container">
    <ul id="tab-ul"></ul>
  </div>
  <div class="arrow-right">
    <i class="iconfont icon-shuangjiantouyou"></i>
  </div>
</div>

<div id="frame-div">
</div>

二、CSS样式

.tab {
    position: absolute;
    height: 41px;
    top: 0;
    left: 135px;
    right: 230px;
}

.tab > div {
    position: absolute;
    top: 25%;
}

.tab > div:first-child { /*左箭头*/
    width: 20px;
}

.iconfont.icon-shuangjiantouzuo:hover { /*左箭头悬浮状态*/
    color: #0ACEF7;
    cursor: pointer;
}

.tab > div:last-child { /*右箭头*/
    width: 20px;
    right: 0;
}

.iconfont.icon-shuangjiantouyou:hover { /*右箭头悬浮状态*/
    color: #0ACEF7;
    cursor: pointer;
}

.tab > div:not(:first-child):not(:last-child) { /*选项卡容器*/
    left: 20px;
    right: 20px;
    overflow: hidden;
}

.tab ul { /*选项卡列表*/
    position: relative;
}

.tab ul li { /*选项卡*/
    list-style: none;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
}

.tab ul li:hover { /*选项卡悬浮状态*/
    color: #0ACEF7;
    cursor: pointer;
}

.tab ul li span { /* 选项卡名称 */
    font-size: 15px;
}

.tab ul li i { /* 选项卡关闭按钮 */
    padding-left: 3px;
}

.active { /*激活状态*/
    color: #0ACEF7;
}

三、JavaScript脚本

/* 子窗口容器 */
var $container = $("#frame-div");
/* 导航栏列表 */
var $ul = $("#tab-ul");
/* 链接数组 */
var array = new Array();
/* 偏移量 */
var offset = 100;
/* 已偏移位置 */
var move = 0;
/* 动画执行时间 */
var time = 150;

/* 添加页面 */
function addNavTab(name, url) {
    var exist = array.indexOf(name);

    if (exist != -1) {
        $container.children().eq(exist).show().siblings().hide();
        $ul.children().eq(exist).addClass('active').siblings().removeClass('active');
        
        tip:相同链接考虑到传递不同参数时重新加载页面
        tip:相同参数重新加载页面可以传递随机参数(date,random)
        var boolean = $container.children().eq(exist).attr('src') === url
            && url.indexOf('?') === -1;
        if (!boolean) $container.children().eq(exist).attr('src', url);
    } else {
        array.push(name);
        var iframe = "<iframe style='display: none;top: 0;bottom: 0;position: absolute' src='" + url + "'></iframe>";
        $container.append(iframe);
        $container.children(":last-child").show().siblings().hide();

        var li = "<li><span>" + name + "</span><i class=\"iconfont icon-close\"></i></li>";
        $ul.append(li).children(":last-child").addClass('active').siblings().removeClass('active');
        $ul.width(getTabWidth());
    }
}

/* 切换页面 */
function changeNavTab(index) {
    $ul.children().eq(index).addClass('active').siblings().removeClass('active');
    $container.children().eq(index).show().siblings().hide();
}

/* 移除页面 */
function removeNavTab(index) {
    $container.children().eq(index).remove();
    $ul.children().eq(index).remove();
    array.splice(index, 1);

    var active = $ul.children(".active").length;
    if (active === 0) {
        var count = $ul.children().length;
        if (count === 0) {
            return;
        }
        if (index < count) {
            changeNavTab(index);
        } else {
            changeNavTab(index - 1);
        }
    }
}

/* 获取Tab的总宽度 */
function getTabWidth() {
    var array = $ul.children();
    var width = 0;
    for (var i = 0; i < array.length; i++) {
        width += array.eq(i).outerWidth();
    }
    var pw = $ul.parent().width();
    return pw > width ? pw : width;
}

/* 选项卡是否可以滑动 */
function scroll() {
    return $ul.width() > $ul.parent().width() && range() - move > 0;
}

/* 选项卡可滑动范围 */
function range() {
    var range = $ul.width() - $ul.parent().width();
    return range > 0 ? range : 0;
}

/* 执行一次动画的滑动距离 */
function distance() {
    var distance = range() - move;
    distance = distance > 0 ? distance : 0;
    return distance - offset > 0 ? offset : distance;
}

/* 选项卡设置监听事件,切换页面 */
$ul.on('click', "li", function () {
    var $this = $(this);
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "/xms/systemUser/session",
        success: function (data) {
            if (data) {
                changeNavTab($this.index());
            } else {
                location.href = "/";
            }
        }
    });
});

/* 选项卡设置监听事件,移除页面 */
$ul.on('click', "i", function (event) {
    event = event || window.event;
    event.cancelBuddle = true;
    event.stopPropagation();

    var index = $(this).parent().index();
    removeNavTab(index);
});

/* 左箭头监听事件 */
$("div[class=arrow-left]").click(function () {
    if (move > 0) {
        var step = move > offset ? offset : move;
        $ul.animate({left: '+=' + step}, time);
        move -= step;
    }
});

/* 右箭头监听事件 */
$("div[class=arrow-right]").click(function () {
    if (scroll()) {
        var step = distance();
        $ul.animate({left: '-=' + step}, time);
        move += step;
    }
});