feat. spinners 旋轉器
This commit is contained in:
parent
1858c5d70b
commit
d99e3bb24c
@ -2,12 +2,12 @@
|
|||||||
{
|
{
|
||||||
"name": "首 頁",
|
"name": "首 頁",
|
||||||
"icon": "menu-icon tf-icons ri-home-smile-line",
|
"icon": "menu-icon tf-icons ri-home-smile-line",
|
||||||
"slug": "dashboard",
|
"slug": "admin/memberlist",
|
||||||
"submenu": [
|
"submenu": [
|
||||||
{
|
{
|
||||||
"url": "admin/memberlist",
|
"url": "admin/memberlist",
|
||||||
"name": "會員列表",
|
"name": "會員列表",
|
||||||
"slug": "dashboard-analytics"
|
"slug": "memberlist"
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
@ -15,17 +15,17 @@
|
|||||||
{
|
{
|
||||||
"name": "設 定",
|
"name": "設 定",
|
||||||
"icon": "menu-icon tf-icons ri-settings-line",
|
"icon": "menu-icon tf-icons ri-settings-line",
|
||||||
"slug": "setting",
|
"slug": "admin/setting/*",
|
||||||
"submenu": [
|
"submenu": [
|
||||||
{
|
{
|
||||||
"url": "admin/setting/promocode",
|
"url": "admin/setting/promocode",
|
||||||
"name": "優惠代碼",
|
"name": "優惠代碼",
|
||||||
"slug": "setting-promocode"
|
"slug": "admin/setting"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"url": "admin/setting/adminlist",
|
"url": "admin/setting/adminlist",
|
||||||
"name": "後台登入人員",
|
"name": "後台登入人員",
|
||||||
"slug": "setting-adminlist"
|
"slug": "setting.adminlist"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr" data-theme="theme-default" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-starter" data-style="light">
|
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
|
||||||
|
data-theme="theme-default" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-starter"
|
||||||
|
data-style="light">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||||
|
|
||||||
|
|
||||||
@ -17,7 +20,8 @@
|
|||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/remixicon/remixicon.css') }}" />
|
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/remixicon/remixicon.css') }}" />
|
||||||
|
|
||||||
@ -27,7 +31,8 @@
|
|||||||
|
|
||||||
<!-- Core CSS -->
|
<!-- Core CSS -->
|
||||||
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/core.css') }}" class="template-customizer-core-css" />
|
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/core.css') }}" class="template-customizer-core-css" />
|
||||||
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/theme-default.css') }}" class="template-customizer-theme-css" />
|
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/theme-default.css') }}"
|
||||||
|
class="template-customizer-theme-css" />
|
||||||
<link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
|
<link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
|
||||||
|
|
||||||
<!-- Vendors CSS -->
|
<!-- Vendors CSS -->
|
||||||
@ -69,13 +74,22 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
|
|
||||||
<div class="container-xxl flex-grow-1 container-p-y">
|
<div class="container-xxl flex-grow-1 container-p-y" id ="spinner-div">
|
||||||
@yield('content')
|
@yield('content')
|
||||||
|
<div class="card mb-6">
|
||||||
|
<div id="global-spinner" class="spinner-border spinner-border-lg text-secondary"
|
||||||
|
role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / Content -->
|
<!-- / Content -->
|
||||||
|
|
||||||
@include('layouts.admin_footer')
|
@include('layouts.admin_footer')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="content-backdrop fade"></div>
|
<div class="content-backdrop fade"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Content wrapper -->
|
<!-- Content wrapper -->
|
||||||
@ -113,12 +127,45 @@
|
|||||||
@yield('scripts')
|
@yield('scripts')
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//doucument ready functions
|
// 全局 Spinner 控制
|
||||||
$(document).ready(function() {
|
$(document).ready(function () {
|
||||||
console.log('Document ready');
|
console.log("Document ready");
|
||||||
});
|
|
||||||
|
|
||||||
|
// 顯示 Spinner
|
||||||
|
function showSpinner() {
|
||||||
|
console.log("spinner 显示");
|
||||||
|
$("#spinner-div").show();
|
||||||
|
$("#global-spinner").fadeIn();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隱藏 Spinner
|
||||||
|
function hideSpinner() {
|
||||||
|
console.log("spinner 隐藏");
|
||||||
|
$("#global-spinner").fadeOut();
|
||||||
|
$("#spinner-div").hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化時顯示 Spinner
|
||||||
|
showSpinner();
|
||||||
|
|
||||||
|
// AJAX 請求期間的 Spinner 控制
|
||||||
|
$(document).ajaxStart(function () {
|
||||||
|
console.log("AJAX 开始");
|
||||||
|
showSpinner();
|
||||||
|
}).ajaxStop(function () {
|
||||||
|
console.log("AJAX 停止");
|
||||||
|
hideSpinner();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 當所有資源加載完成後，隱藏 Spinner
|
||||||
|
$(window).on("load", function () {
|
||||||
|
console.log("Window loaded");
|
||||||
|
hideSpinner();
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
<script></script>
|
||||||
|
|||||||
@ -19,43 +19,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-inner-shadow"> </div>
|
<div class="menu-inner-shadow"> </div>
|
||||||
|
<ul class="menu-inner py-1">
|
||||||
<ul class="menu-inner py-1 ps ps--active-y">
|
{{-- {{ dd($menuData) }} --}}
|
||||||
<li class="menu-header small fw-medium">Getting Started</li>
|
|
||||||
|
|
||||||
@foreach ($menuData[0] as $menu)
|
@foreach ($menuData[0] as $menu)
|
||||||
@if(isset($menu->submenu[0]->url))
|
<li class="menu-item @if(isset($menu->slug) && request()->is(ltrim($menu->slug, '/'))) open @endif">
|
||||||
<li class="menu-item">
|
<a href="{{ $menu->url ?? '#' }}" class="menu-link @if(!empty($menu->submenu)) menu-toggle @endif">
|
||||||
<a href="" class="menu-link menu-toggle">
|
<i class="{{ $menu->icon ?? '' }}"></i>
|
||||||
<i class="{{$menu->icon}}"> </i>
|
<div>{{ $menu->name ?? '未命名' }}</div>
|
||||||
<div>{{$menu->name}}</div>
|
</a>
|
||||||
</a>
|
@if (!empty($menu->submenu))
|
||||||
@foreach ($menu->submenu as $sub)
|
<ul class="menu-sub">
|
||||||
<ul class="menu-sub">
|
@foreach ($menu->submenu as $sub)
|
||||||
<li class="menu-item">
|
<li class="menu-item @if(isset($sub->url) && request()->is(ltrim($sub->url, '/'))) active @endif">
|
||||||
<a href="{{url($sub->url)}}" class="menu-link">
|
<a href="{{ url($sub->url ?? '#') }}" class="menu-link">
|
||||||
<div>{{$sub->name}}</div>
|
<div>{{ $sub->name ?? '未命名' }}</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
@endforeach
|
||||||
@endforeach
|
</ul>
|
||||||
</li>
|
@endif
|
||||||
@else
|
</li>
|
||||||
<li class="menu-item">
|
|
||||||
<a href="{{url($menu->url)}}" class="menu-link">
|
|
||||||
<i class="{{$menu->icon}}"> </i>
|
|
||||||
<div>{{$menu->name}}</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
@endif
|
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
|
|
||||||
<div class="ps__rail-x" style="left: 0px; bottom: -427px;">
|
|
||||||
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="ps__rail-y" style="top: 427px; height: 571px; right: 4px;">
|
|
||||||
<div class="ps__thumb-y" tabindex="0" style="top: 80px; height: 106px;"></div>
|
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user