# 遮罩 => 提示 Table 未完全顯示，可以左右滑動 ( 有 scrollbar )
###### tags: `實作 Style`
## 關鍵字 **overlay**

## Script

$(function () {
    // 加上這行標記，會出現在 Source -> Page 中，方便 Debug
    //# sourceURL=_Analysis.cshtml
    // 讓網頁分頁元素加載完，不然取得的數值都是 0
    $('#navAnalysis').off("shown.bs.tab").on("shown.bs.tab", function (e) {
        SetTableOverlayOnActiveTab();
    });

    // 視窗尺寸改變事件
    $(window).resize(function () {
        SetTableOverlayOnActiveTab();
    });

    // 案一下覆蓋的陷阱卡(?)
    // 案一下覆蓋的提示就隱藏
    $(".tableOverlay").off("click").on("click", function () {
        $(this).fadeOut(300);
    })

    // 讓網頁元素加載完，不然取得的數值都是 0
    setTimeout(function () {
        SetTableOverlayOnActiveTab();
    }, 250);
})

// 設定正在顯示的分頁的 table 的 overlay
function SetTableOverlayOnActiveTab() {
    // 找出現在正在顯示的分頁
    var triggerTabContent = $(".tab-pane.fade.show.active");
    var triggerTblContainerId = triggerTabContent.find(".table-container").prop("id");
    var triggerTableOverlay = triggerTabContent.find(".tableOverlay");

    // 判斷是否有 Scroll Bar
    if (IsHaveScrollBar("#" + triggerTblContainerId)) {
        if (triggerTableOverlay.is(':hidden')) {
            triggerTableOverlay.show();
        }
    }
    else {
        triggerTableOverlay.fadeOut(300);
    }
}

### 判斷元素是否有 Scroll Bar

function IsHaveScrollBar(selector) {    
    var element = $(selector)[0];
    if (!element) {
        return false;
    }

    var elementWidth = element.clientWidth;
    var elementScrollWidth = element.scrollWidth;
    if (elementScrollWidth > elementWidth) {
        return true;
    }
    else {
        return false;
    }
}

---

## Style
### table 有 scrollbar

table {
    width: 100%;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 40px;
    padding-top: 15px;
}

### tableOverlay
父層級必須要有 position: relative;

.tab-pane {
        position: relative;
}

.tableOverlay {
    position: absolute;
    background-image: url("../../Images/overlay_slide_left_right.png");
    background-position: center;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    display: none;
}

#### 圖片
用 [Pixlr](https://pixlr.com/tw/x/) 製作

### scrollbar 樣式

.scrollbar::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar {
    width: 14px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #6cdbbcc7;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}

---

## Html

<ul class="nav nav-tabs" id="navAnalysis">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#DifficultyRatio">難易度分配比例</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#AttributeRatio">屬性分配比例</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#TypeRatio">題型分配比例</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#YearRatio">年度分配比例</a>
    </li>
</ul>
<div id="analysisTabContent" class="tab-content">
    <div class="tab-pane fade show active" id="DifficultyRatio">
        <div class="tableOverlay text-center">
        </div>
        <div class="table-container scrollbar" id="tblContainerDifficultyRatio">
            <table class="table table-bordered" id="tblDifficultyRatio">
                <thead>
                    <tr>
                        <th>技能規範</th>
                        <th>總題數</th>
                        <th>簡易題數</th>
                        <th>適中題數</th>
                        <th>困難題數</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-weight:bold">EBC-01-網路基礎建設</td>
                        <td>10</td>
                        <td>1</td>
                        <td>9</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">EBC-02-電子商務（e-Commerce）概論</td>
                        <td>20</td>
                        <td>6</td>
                        <td>12</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">EBC-03-企業電子化（e-Business）概論</td>
                        <td>20</td>
                        <td>9</td>
                        <td>7</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">總計</td>
                        <td>50</td>
                        <td>16</td>
                        <td>28</td>
                        <td>6</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="tab-pane fade" id="AttributeRatio">
        <div class="tableOverlay text-center">
        </div>
        <div class="table-container scrollbar" id="tblContainerAttributeRatio">
            <table class="table table-bordered" id="tblAttributeRatio">
                <thead>
                    <tr>
                        <th>技能規範</th>
                        <th>總題數</th>
                        <th>知識題</th>
                        <th>理解題</th>
                        <th>應用題</th>
                        <th>分析題</th>
                        <th>綜合題</th>
                        <th>評鑑題</th>
                        <th>計算題</th>
                        <th>推理題</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-weight:bold">EBC-01-網路基礎建設</td>
                        <td>10</td>
                        <td>5</td>
                        <td>1</td>
                        <td>3</td>
                        <td>0</td>
                        <td>1</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">EBC-02-電子商務（e-Commerce）概論</td>
                        <td>20</td>
                        <td>11</td>
                        <td>6</td>
                        <td>3</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">EBC-03-企業電子化（e-Business）概論</td>
                        <td>20</td>
                        <td>9</td>
                        <td>6</td>
                        <td>1</td>
                        <td>0</td>
                        <td>2</td>
                        <td>0</td>
                        <td>0</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold">總計</td>
                        <td>50</td>
                        <td>25</td>
                        <td>13</td>
                        <td>7</td>
                        <td>0</td>
                        <td>3</td>
                        <td>0</td>
                        <td>0</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="tab-pane fade" id="TypeRatio">
        題型分配比例
    </div>
    <div class="tab-pane fade" id="YearRatio">
        年度分配比例
    </div>
</div>