東拼西湊完成一個「前端框架」(5) - Tabs操做

時間 2020-01-07

標籤東拼西湊完成一個前端框架 tabs 简体版

原文原文鏈接

寫在前面

Tabs頁面完成的基本操做完成，可是功能還不夠完備：css

Tab頁打開過多超出的如何處理？

Tab頁關閉全部、關閉其它操做

Tab頁刷新操做

設計

這裏參考LayUIAdmin的設計方式：html

Tab欄左右未知能夠動態調整

打開的標籤頁面超出時，調整位置到指定標籤頁顯示

左右滑動不一樣範圍的標籤頁

佈局

Tab欄左右位置能夠調整，那麼Tab欄的定位是絕對定位

左右調整動畫 transaction

代碼

HTML

···
 <div class="ls-tab-container">
    <div class="header flex">
        <!--left-->
        <div class="tab-operate tab-operate-left">
            <a class="fa fa-2x fa-angle-double-left opt-left"></a>
        </div>
        <!--titles-->
        <div class="ls-tab-titles flex">
            <div class="tab-title active" data-id="0">
                <span class="title">
                    <i class="ls-icon ls-icon-home"></i>
                </span>
            </div>
        </div>
        <!--right-->
        <div class="tab-operate tab-operate-right">
            <a class="fa fa-2x fa-angle-double-right opt-right"></a>
            <a class="fa fa-2x fa-angle-double-down">
                <div class="dropdown-panel">
                    <ul>
                        <li class="opt" data-opt="refresh">刷新</li>
                        <li class="opt" data-opt="closeOthers">關閉其它</li>
                        <li class="opt" data-opt="closeAll">所有關閉</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
···
</div>
···

CSS

<!--Tabs欄-->
.ls-tab-container .ls-tab-titles {
    position: absolute;
    left: 39px;
    right: 78px;
    overflow: hidden;
    transition: all 300ms ease-in;
    -webkit-transition: all 300ms ease-in;
}
<!--操做-->

.tab-operate {
    position: absolute;
    display: flex;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 6px rgba(196, 199, 202, 0.35);
    z-index: 8;
}

.tab-operate .fa:hover {
    background: rgba(238, 238, 238, .6);
    cursor: pointer;
}

.tab-operate.tab-operate-left {
    left: 0;
}

.tab-operate.tab-operate-right {
    right: 0;
}

.tab-operate .fa {
    color: #666;
    font-size: 22px;
    line-height: 36px;
    width: 38px;
    display: inline-block;
}

.tab-operate-left .fa {
    border-right: 1px solid rgb(230, 230, 230, .8);
}

.tab-operate-right .fa {
    border-left: 1px solid rgb(230, 230, 230, .8);
    position: relative;
}

效果

下拉菜單

鼠標通過最右側操做按鈕時展現下拉菜單，思路很簡單就算用僞類 hover 實現，可是在利用transaction作動畫的過程當中發現，display 屬性與 transaction 屬性衝突，解決方式是經過 height:0;overflow:hidden; 來實現動畫：前端

.dropdown-panel {
    background: #fff;
    position: absolute;
    width: 120px;
    right: 0;
    font-size: 13px;
    transition: top 200ms ease-in, opacity 200ms ease-in;
    -webkit-transition: top 200ms ease-in, opacity 200ms ease-in;
    border-radius: 4px;
    top: 46px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(196, 199, 202, .35);
}

.tab-operate-right .fa:hover .dropdown-panel {
    top: 37px;
    opacity: 1;
    height: auto;
    border: 1px solid rgb(230, 230, 230, .8);
}

效果預覽

操做

思路

如圖所示打開多個標籤頁時只要把超出的部分利用 Tab欄 的 margin-left 屬性補回來就能夠實現：
margin-left: (Tab欄.Offset().Left+Tabs欄.Width() - TabItem.Offset().Left-TabItem.Width()) + 'px'git

關鍵代碼實現

// 激活Tab時觸發
···
// 位置調整
var pleft = $tab.offset().left + 39;
var pright = $tab.offset().left + $tab.width() - 80;
var cleft = $tabTitle.offset().left;
var cright = cleft + $tabTitle.width() + 30;
var cmgLeft = parseFloat($tabTitle.parent().css("margin-left").replace("px", ""));

if (cleft < pleft) {
    cmgLeft = (cmgLeft + pleft - cleft);
    $tabTitle.parent().css("margin-left", cmgLeft + "px");
} else if (cright > pright) {
    cmgLeft = (cmgLeft + pright - cright);
    $tabTitle.parent().css("margin-left", cmgLeft + "px");
}
···

左右滑動

思路

分頁的思想：把Tabs欄的寬度類比爲 PageSize[分頁大小] , 打開標籤頁佔用的總長度類比爲 TotalCount[總數]github

關鍵代碼實現

/**
 * 翻頁
 * @param {頁碼}} pageIndex 
 */
var changePage = function(diff) {
    // 容器寬度
    var cWidth = $('.ls-tab-container').width() - 119;
    var $firstTitle = $('.ls-tab-titles .tab-title:first'),
        $lastTitle = $('.ls-tab-titles .tab-title:last');
    // 內容寬度
    var tsWidth = $lastTitle.offset().left -
        $firstTitle.offset().left +
        $lastTitle.width() + 30;
    var curPage = $title_container.attr("cur-p");

    // 容器 margin-left 用於計算當前頁碼
    var cmgLeft = parseFloat($title_container.css("margin-left").replace("px", ""));
    curPage = Math.floor(Math.abs(cmgLeft) / cWidth) + 1;

    var totalPage = Math.floor(tsWidth / cWidth) + (tsWidth % cWidth > 0 ? 1 : 0);
    curPage = curPage + diff;
    if (curPage >= totalPage) {
        curPage = totalPage;
        $title_container
            .css("margin-left", (1 - totalPage) * cWidth + "px")
            .attr("cur-p", totalPage);
    } else if (curPage <= 1) {
        curPage = 1;
        $title_container
            .css("margin-left", "0px")
            .attr("cur-p", "1");
    } else {
        $title_container
            .css("margin-left", (1 - curPage) * cWidth + "px")
            .attr("cur-p", curPage);
    }
}