[JQuery] 側邊選單(SideBar/SideMenu)
我們首先在body中加入下面這段html語法
<nav>
<header>
<div class="text-center">
<button type="button" class="menu-toggle pull-left"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
<label><a href="/MobileMainPageCustom.aspx">銷售管理行動平台</a></label>
<button id="btnLogout" type="button" class="pull-right"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span></button>
</div>
</header>
<!-- Sidebar -->
<div class="sidebarcontainer">
<ul class="sidebar">
<li class="sidebar-brand list-title" style="height: 4rem;">
<label>Menu</label>
<button type="button" class="menu-close pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</li>
<li class="li-container" style="height: 100%-4rem;">
<ul id="sideitemcontainer">
</ul>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
</nav>
以下是CSS語法
<style>
body {
font-size: 62.5%; /*使1em=10px*/
}
a:hover {
text-decoration: none;
color: gray;
}
a:focus {
text-decoration: none;
color: dimgray;
}
a:active {
text-decoration: none;
color: dimgray;
}
div.div-content {
height: 95vh;
padding-top: 2em;
max-height: 95vh;
max-width: 100vh;
}
nav {
z-index: 1000;
font-size: 0.5rem;
color: white;
height: 5vh;
}
nav .list-title {
font-size: 2rem;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
nav header {
font-size: 2rem;
background: black;
color: white;
}
nav button {
background: none;
color: white;
border: none;
}
nav ul {
margin: 0px;
padding: 0px;
}
nav li {
list-style-type: none;
padding-left: 1rem;
padding-right: .5rem;
padding-top: .5rem;
padding-bottom: .5rem;
}
nav a {
color: white;
}
nav a label {
font-size: 1.5rem;
width: 100%;
margin: 0;
}
nav label.link {
color: white;
font-size: 1.5rem;
width: 100%;
margin: 0;
}
nav label.link:hover {
color: gray;
}
nav label.link:active {
color: dimgray;
}
nav div.sidebarcontainer {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
background: rgba(128, 128, 128, 0.6);
width: 0px;
height: 100vh;
}
nav div.sidebarcontainer.toggled {
width: 100vw;
height: 100vh;
}
nav ul.sidebar {
z-index: 1000;
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 100vh;
margin-left: -20em;
overflow-y: auto;
overflow-x: hidden;
background: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav ul.sidebar.toggled {
margin-left: 0px;
height: 100vh;
width: 80vw;
}
nav li.node ul.node-ul {
z-index: 1000;
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 100vh;
margin-left: -20em;
overflow-y: auto;
overflow-x: auto;
background: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav li.node ul.node-ul.toggled {
margin-left: 0px;
height: 100vh;
width: 80vw;
}
nav button-sidebar-close {
height: inherit;
background-color: black;
color: white;
padding-right: 10px;
border: none;
}
nav li.li-container {
padding: 0px;
border: none;
margin: 0px;
}
nav li.li-container ul {
height: 100%;
overflow-y: auto;
}
</style>
動態填入MenuItem
// 全域變數
var jsonMenuItems = getMenuItem(); // 取得MenuItem
// 設定MenuTree
function setMenuTree(NodeParent) {
var menuItems = jsonMenuItems; // 將JsonString轉型為JsonObject
var filted = filteMenuRoot(NodeParent); // 搜尋出來的資料
$.each(filted, function (key, value) {
var nodeText = value.CAPTION != "" ? nodeText = value.CAPTION : ""; // item名稱
var nodeURL = value.FORM != "" ? value.FORM + ".aspx" : "#"; // item連結
var str = "";
if (value.IsContent == "0") { // 是否為節點
// 是節點
str += '<li class="node">' +
'<a href="#" class="node-toggle" data-toggle="' + value.MENUID + '">' +
'<label>' + value.CAPTION + '</label>' +
'</a>' +
'<ul class="node-ul" data-toggle="' + value.MENUID + '">' +
'<li style="height: 3rem;">' +
'<a href="#" class="node-close"><label><span class="glyphicon glyphicon-chevron-left"></span>返回</label></a>' +
'</li>' +
'<li class="list-title" style="height: 4rem;">' +
'<label>' + value.CAPTION + '</label>' +
'</li>' +
'<li class="li-container" style="height:100%-7rem;">' +
'<ul data-itemcontainer="' + value.MENUID + '">' +
'</ul>' +
'</li>' +
'</ul>' +
'</li>';
}
else {
// 不是節點
str += '<li>' +
//'<a href="/MobileClient/' + value.FORM + '.aspx?ItemParam=' + value.MENUID + '"><label>' + value.CAPTION + '</label></a>' +
'<label class="link" data-form="' + value.FORM + '" data-itemparam="' + value.MENUID + '">' + value.CAPTION + '</label>' +
'</li>';
}
if (NodeParent == "") { // 是否有父節點
// 沒有父節點(最頂層)
$("nav ul[id=sideitemcontainer]").append(str);
}
else {
// 有父節點
$("nav ul[data-itemcontainer=" + NodeParent + "]").append(str);
}
setMenuTree(value.MENUID);
});
}
// 搜尋父節點為strNodeParent的所有子item
function filteMenuRoot(strNodeParent) {
var json = jsonMenuItems;
var filted = [];
$.each(json, function (key, value) {
//alert(strNodeParent+" : "+value.PARENT);
if (strNodeParent == value.PARENT) {
filted.push(value);
}
});
return filted
}
Json格式如下
[
{
"MENUID": "MA", <----- MenuID 這個Item的ID
"CAPTION": "node1", <----- Caption 物件顯示的Text
"PARENT": "", <----- Parent 判斷是屬於哪一個節點，如果為空則為最頂層的Menu
"FORM": "", <----- Form 頁面位址(*.aspx / *.html ... and so on)
"IsContent": false <----- IsContent 是否有內容頁(false->節點，true->內容)
}
]
以下是範例
[
{
"MENUID": "MA",
"CAPTION": "node1",
"PARENT": "",
"FORM": "",
"IsContent": false
},
{
"MENUID": "MA01",
"CAPTION": "item1-1",
"PARENT": "MA",
"FORM": "Steering",
"IsContent": true
},
{
"MENUID": "MB",
"CAPTION": "node2",
"PARENT": "",
"FORM": "",
"IsContent": false
},
{
"MENUID": "MB01",
"CAPTION": "item2-1",
"PARENT": "MB",
"FORM": "ServiceRecovery",
"IsContent": true
},
{
"MENUID": "MB02",
"CAPTION": "item2-2",
"PARENT": "MB",
"FORM": "CustomerCompliant",
"IsContent": true
},
{
"MENUID": "MB03",
"CAPTION": "item2-3",
"PARENT": "MB",
"FORM": "CheckBackPieces",
"IsContent": true
},
{
"MENUID": "MB04",
"CAPTION": "node2-4",
"PARENT": "MB",
"FORM": "",
"IsContent": false
},
{
"MENUID": "MB0401",
"CAPTION": "item2-4-1",
"PARENT": "MB04",
"FORM": "",
"IsContent": false
},
{
"MENUID": "MC",
"CAPTION": "item3",
"PARENT": "",
"FORM": "ServiceRecovery",
"IsContent": true
}
]
最後為每個Item加上點擊事件
$(function () {
// 主Menu
$("nav button.menu-toggle").click(function () { // 打開
Toggle($("ul.sidebar"));
ToggleBackground();
});
$("nav button.menu-close").click(function () { // 關閉
Toggle($("ul.sidebar"));
ToggleBackground();
});
// 子Menu
$("a.node-toggle").click(function () { // 打開
var datatoggle = $(this).data("toggle"); // 用於判斷該元件是屬於哪一個ul(紀錄MenuID)
var item = $(this).parents("li.node").children("ul[data-toggle=" + datatoggle + "]");
Toggle(item);
});
$("a.node-close").click(function () { // 關閉
var datatoggle = $(this).parents("li.node").children("ul").data("toggle"); // 用於判斷該元件是屬於哪一個ul(紀錄MenuID)
var item = $(this).parents("li.node").children("ul[data-toggle=" + datatoggle + "]");
Toggle(item);
});
// Label.Link
$("label.link").click(function () {
var form = $(this).data("form");
var itemparam = $(this).data("itemparam");
var href = "/MobileClient/" + form + ".aspx";
window.location.replace(href);
});
// 登出按鈕
$("button[id=btnLogout]").click(function () {
logOut();
});
});
// 顯示/隱藏Menu
function Toggle(item) {
if ($(item).hasClass("toggled") == true) { // 如果已經顯示，則移除顯示的css
$(item).removeClass("toggled"); // 移除顯示的css
}
else {
$(item).toggleClass("toggled"); // 套用顯示的css
}
}
// 鎖定背景
function ToggleBackground() {
if ($("div.sidebarcontainer").hasClass("toggled") == true) {
$("div.sidebarcontainer").removeClass("toggled"); // 解除背景鎖定
}
else {
$("div.sidebarcontainer").toggleClass("toggled"); // 使背景鎖住
}
}
最後就會長得像下面這樣
Write By Charley Chang
新手發文，若有錯誤還請指教，
歡迎留言或Mail✉給我
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 4.0 國際 授權條款授權.
