---------------------------------HTML--------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- <link rel="shortcut icon" href="../../image/favicon.ico">-->
<!-- css -->
<link rel="stylesheet" href="../../../lib/reset/reset.css">
<link rel="stylesheet" href="../../../lib/bootstrap/bootstrap.min.css">
<!-- 個別css -->
<link rel="stylesheet" href="../../css/main_menu/main_menu.css">
<title>○システム</title>
</head>
<body id="menu_body">
<!-- ヘッダ -->
<header class="sun-base-layout-header system-header">
</header>
<!-- メイン -->
<section class="sun-base-layout-main">
<div class="tab-menu" id="tab_menu">
<nav id="slide_menu">
<ul class="nav nav-stacked">
<li class="">
<div class="link" id="slide_btn">
メインメニュー
<span class='glyphicon glyphicon-chevron-left'></span>
</div>
</li>
<li class="">
<div class="link" page="index.html">
トップページ
</div>
</li>
</ul>
</nav>
</div>
<!--メニューを出すボタン-->
<button id="menu_display_btn" style="display: none"><i><span class='glyphicon glyphicon-chevron-right'></span></i></button>
<div class="tab-content">
<iframe id="child_page" frameborder="0" scrolling="no" src="index.html"></iframe>
</div>
</section>
<!-- フッター -->
<footer class="sun-base-layout-footer system-footer">
</footer>
<!-- 共通ライブラリ -->
<script type="text/javascript" src="../../../lib/jquery/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../../../lib/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../lib/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../lib/underscore/underscore-min.js"></script>
<script type="text/javascript" src="../../../lib/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="../../js/common/base/base.js"></script>
<!-- ユーティリティ -->
<script type="text/javascript" src="../../js/common/util/browser.js"></script>
<script type="text/javascript" src="../../js/common/util/keyboard.js"></script>
<script type="text/javascript" src="../../js/common/util/textformatter.js"></script>
<!-- パーツ -->
<script type="text/javascript" src="../../js/common/parts/header.js"></script>
<script type="text/javascript" src="../../js/common/parts/footer.js"></script>
<!-- 個別スクリプト -->
<script type="text/javascript" src="../../../lib/jquery.mockjax/jquery.mockjax.min.js"></script>
<script type="text/javascript" src="../../mockjax/main_menu.mockjax.js"></script>
<script type="text/javascript" src="../../js/main_menu/main_menu.js"></script>
</body>
</html>
---------------------------------JS----------------------------------------
/**
* @file システムメニュー
*/
$(function () {
'use strict';
/**
* @class
* @classdesc システムメニューページ
*/
var slide = true;
sunUI.SystemMenuPage = function() {};
sunUI.SystemMenuPage.prototype = {
/// <summary>
/// 初期処理
/// </summary>
init: function() {
// イベント
$(".guest").on("click", this.onGuestClick);
$(".guest-content").on("click", this.onLogoutClick);
// メニュー取得
this.getMenuData();
$("#slide_btn").on("click", this.hideMenu);
$("#menu_display_btn").on("click", this.displayMenu);
},
/// <summary>
/// メニューデータ取得
/// </summary>
getMenuData: function() {
var _this = this;
$.ajax({
url: sun.baseUrl + '/api/menus',
type: 'get',
contentType: 'application/json',
error: function (xhr) {
_this.onError(500);
},
success: function (data, status, xhr) {
_this.onSuccess(data);
}
});
},
/// <summary>
/// ゲストクリックイベント
/// </summary>
onGuestClick: function() {
$(".guest-content").slideToggle();
},
/// <summary>
/// ログアウトイベント
/// </summary>
onLogoutClick: function() {
alert("ログアウトしました");
window.location.reload();
},
/// <summary>
/// メニュースライドイベント(非表示)
/// </summary>
hideMenu: function() {
var menu = $("#slide_menu");
var menuWidth = menu.outerWidth();
menu.animate({"margin-left": -menuWidth}, 50);
$("#menu_display_btn").css("display","sunock");
},
/// <summary>
/// メニュースライドイベント(表示)
/// </summary>
displayMenu: function() {
$("#slide_menu").animate({"margin-left": "0"}, 50);
$("#menu_display_btn").css("display","none");
},
/// <summary>
/// メニューデータ取得成功処理
/// </summary>
onSuccess: function(data) {
// メニュー作成
this.createMenu(data);
// メニューイベント定義
$('.nav-stacked .link').on('click', {multiple: true}, this.mainMenuClick);
$('.nav-stacked .submenu a').on('click', this.subMenuClick);
},
/// <summary>
/// メニューデータ取得失敗処理
/// </summary>
onError: function(status) {
alert("メニューの取得処理に失敗しました。status=" + status);
},
/// <summary>
/// メニュー作成
/// </summary>
createMenu: function(menus) {
var menuBar = $('.nav-stacked');
// メニュー毎に作成
$.each(menus, function(index, menu){
if (menu.parentID === 0) {
// 親メニュー
var menuHtml = "<li class='open'>" +
"<div class='link'>" + menu.menuName +
"<span class='glyphicon glyphicon-chevron-down'></span>" +
"</div>" +
"<ul class='submenu'></ul>" +
"</li>";
menuBar.append(menuHtml);
}
else {
// 子メニュー
var subMenuHtml = "<li><a page=" + menu.url +">" + menu.menuName + "</a></li>";
$(".nav-stacked .submenu:last").append(subMenuHtml);
}
});
},
/// <summary>
/// 親メニュークリックイベント
/// </summary>
mainMenuClick: function(e) {
var $el = e.data.el;
var submenu = $(this).next();
// トップページ
if (submenu.length === 0) {
$("#child_page").attr("src", $(this).attr("page"));
return;
}
// 展開・収縮
submenu.slideToggle();
submenu.parent().toggleClass('open');
// 展開は一つかとうか
if (!e.data.multiple) {
var otherMenues = $('.nav-stacked .submenu').not(submenu);
otherMenues.slideUp();
otherMenues.parent().removeClass('open');
};
},
/// <summary>
/// 子メニュークリックイベント
/// </summary>
subMenuClick: function() {
$("#child_page").attr("src", $(this).attr("page"));
return false;
}
};
var menuPage = new sunUI.SystemMenuPage();
menuPage.init();
});
