# (SPA) 列表式Layout
###### tags: `實作功能`

## 定義列表和區塊，其內容由各別的 Scrollb Bar 滑動
### 結果

### CSS

/* 將頁面高度固定，左右位置固定我是用 Bootstrap  */
html,body{
    height:100%;
}

#divHome_menu {
    height: calc(100vh - 90px);
    overflow-y: auto;
}

#divHome_page {
    height: calc(100vh - 90px);
    overflow-y: auto;
}

## HTML

<div class="container-fluid">
<div class="row">
    <div id="divHome_menu" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        ...
    </div>
    <div id="divHome_page" class="col-xs-9 col-sm-9 col-md-9 col-lg-9">    
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3">
            <button id="btnOpenMenu" class="btn btn-info" onclick="openMenu()"
                style="display: none;"><i class="fas fa-expand-arrows-alt fa-lg"></i>&nbsp;展開類別列表</button>
            <button id="btnCloseMenu" class="btn btn-info" onclick="closeMenu()"><i class="fas fa-compress-arrows-alt fa-lg"></i>&nbsp;收起類別列表</button>
        </div>
    </div>
</div>
</div>

### JS

function openMenu() {
    $("#divHome_menu").removeClass().addClass("col-xs-3 col-sm-3 col-md-3 col-lg-3 scrollbar").css("display", "block")
    $("#divHome_page").removeClass().addClass("col-xs-9 col-sm-9 col-md-9 col-lg-9 scrollbar")
    $("#btnOpenMenu").css("display", "none")
    $("#btnCloseMenu").css("display", "block")
}
function closeMenu() {
    $("#btnCloseMenu").css("display", "none")
    $("#btnOpenMenu").css("display", "block")
    $("#divHome_menu").removeClass().css("display", "none")
    $("#divHome_page").removeClass().addClass("col-xs-12 col-sm-12 col-md-12 col-lg-12 scrollbar")
}

---

## 點選選單的連結時會加上 Hash 作為標示 ( 防止上一頁、下一頁、重新整理的頁面消失問題 )

### 部分 Html

<li>
    <a class="has-arrow" href="#Category_AP" onclick="LoadParitalView(this, 'Category.html');">
        <i class="fas fa-archive fa-lg"></i>&nbsp;AP-助理規劃師
    </a>
    <ul class="mm-collapse">
        <li>
            <a class="has-arrow" href="#Category_AP_EBC"
                onclick="LoadParitalView(this, 'SkillRule.html');">
                <i class="fas fa-book fa-lg"></i>&nbsp;EBC-電子商務及企業電子化概論
            </a>
        </li>
    </ul>
</li>

### JS

$(document).ready(function () {
   // 有可能是重新整理，所以需要依照 hash 讀取 page
        LoadHash();

    // 偵測瀏覽器行為的上一步/下一步來進行畫面更新
    $(window).on('popstate', function (e) {
        LoadHash();
    })
})

function LoadHash() {
        // 如果有 hash 就讀取該頁面至 div page
        if ($(location).prop('hash') != "") {
            $("a[href='" + $(location).prop('hash') + "']").trigger('onclick')
            
            // trigger <a> 之後，下拉選單會壞掉，重新配置... QAQ
            $(".dropdown-toggle").dropdown();
        }
        // 沒有則清空 div page
        else {
            $("#page").empty();
        }
    }