パッチワークの完全なA「フロントエンドフレーム」（5） - タブの操作

ディレクトリ

• パッチワークの完全な背景「フロントエンドフレーム」（1） - レイアウト
• フォントアイコン - パッチワーク、背景「フロントエンドフレーム」（2）完成しました
• パッチワークの完全なA「フロントエンドフレーム」（3） - サイドバー
• パッチワークの完全なA「フロントエンドフレーム」（4） - タブページ

EDITORIAL

基本的な操作を完了したタブページが完成しますが、機能はまだ完全ではありません。

• タブページには、どのくらいの余分な処理を開きますか？
• すべてのタブページを閉じて、近くの他の操作
• タブページのリフレッシュ動作

デザイン

ここで参照するLayUIAdminの設計アプローチを：

1. 不明についてのタブ列を動的に調整することができます
2. ページを超えているタブを開き、指定されたタブの表示位置を調整します
3. スワイプ異なる範囲タブ
   

レイアウト

• タブバーの位置は、左調整し右、次にタブバー絶対位置を見つけることができます
• アニメーションの周りの調整 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'

キーコードの実装

// 激活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");
}
···

スワイプ

思考

ページングは考えた：タブは、列幅類推PageSize[分页大小]全長類推タブを開くことが占有されていますTotalCount[总数]

キーコードの実装

/**
 * 翻页
 * @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);
    }
}

結果のプレビュー

批判へようこそ

送信元アドレス

https://github.com/LaosanShang/ls-admin-frontend