update
This commit is contained in:
parent
075687e310
commit
5d27543f21
|
|
@ -298,80 +298,103 @@ $(document).ready(function() {
|
|||
}
|
||||
},
|
||||
|
||||
ClickMenuHandler: function() {
|
||||
// 處理主選單切換(漢堡 icon)
|
||||
$(document).on('click', '.navbar-toggle', function (e) {
|
||||
e.preventDefault();
|
||||
ClickMenuHandler: function() {
|
||||
// 處理主選單切換(漢堡 icon)
|
||||
$(document).on('click', '.navbar-toggle', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 確保 .navbar-toggle 放到 .modules-menu 後面
|
||||
$('.mobile-menu').each(function () {
|
||||
var $menu = $(this);
|
||||
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
|
||||
$menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
|
||||
// 確保 .navbar-toggle 放到 .modules-menu 後面
|
||||
$('.mobile-menu').each(function () {
|
||||
var $menu = $(this);
|
||||
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
|
||||
$menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
|
||||
}
|
||||
});
|
||||
|
||||
$('.mobile-menu').toggleClass('active');
|
||||
$('body').toggleClass('noscroll');
|
||||
|
||||
// ★ 修正:依據 active 狀態決定 collapsed 的加/移除
|
||||
if ($('.mobile-menu').hasClass('active')) {
|
||||
$('.mobile-menu .navbar-toggle').removeClass('collapsed'); // 打開 → 叉叉
|
||||
} else {
|
||||
$('.mobile-menu .navbar-toggle').addClass('collapsed'); // 關閉 → 三條橫線
|
||||
}
|
||||
|
||||
// 關閉所有下拉選單
|
||||
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
|
||||
// 無障礙:聚焦第一個互動元素
|
||||
if ($('.mobile-menu').hasClass('active')) {
|
||||
setTimeout(function () {
|
||||
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
$('.mobile-menu').toggleClass('active');
|
||||
$('body').toggleClass('noscroll');
|
||||
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
|
||||
|
||||
// 關閉所有下拉選單
|
||||
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
|
||||
// 無障礙:聚焦第一個互動元素
|
||||
if ($('.mobile-menu').hasClass('active')) {
|
||||
setTimeout(function () {
|
||||
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
// ✅ Tab 鍵跳過 .navbar-toggle 時,觸發與點擊相同的收合邏輯
|
||||
$(document).on('focusout', '.mobile-menu', function(e) {
|
||||
// ✅ Tab 鍵跳過 .mobile-menu 時,觸發收合邏輯
|
||||
$(document).on('focusout', '.mobile-menu', function(e) {
|
||||
setTimeout(function() {
|
||||
var $newFocus = $(document.activeElement);
|
||||
// 焦點已離開 .mobile-menu 且選單是展開狀態
|
||||
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
|
||||
// ✅ 直接 trigger click,與按下 .navbar-toggle 執行完全相同的動作
|
||||
$('.navbar-toggle').first().trigger('click');
|
||||
var $newFocus = $(document.activeElement);
|
||||
|
||||
// 焦點在 body 時代表滑鼠正在點擊中,不處理
|
||||
if ($newFocus.is('body')) return;
|
||||
|
||||
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
|
||||
|
||||
var $btn = $('.navbar-toggle').first();
|
||||
|
||||
if ($btn.attr('data-bs-toggle')) {
|
||||
var target = $btn.attr('data-bs-target');
|
||||
var bsCollapse = window.bootstrap && bootstrap.Collapse.getInstance($(target)[0]);
|
||||
if (bsCollapse) bsCollapse.hide();
|
||||
$('.mobile-menu').removeClass('active');
|
||||
$('body').removeClass('noscroll');
|
||||
$('.mobile-menu .navbar-toggle').addClass('collapsed');
|
||||
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
} else {
|
||||
$btn.trigger('click');
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
|
||||
$('.mobile-menu1 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck1 = $that.hasClass('opened');
|
||||
if ( opencheck1 == 0 ) {
|
||||
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
$('.mobile-menu1 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck1 = $that.hasClass('opened');
|
||||
if ( opencheck1 == 0 ) {
|
||||
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
|
||||
} else if (opencheck1 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.removeClass('opened');
|
||||
} else if (opencheck1 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.removeClass('opened');
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
$('.mobile-menu2 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck2 = $that.hasClass('opened');
|
||||
if ( opencheck2 == 0 ) {
|
||||
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
} else if (opencheck2 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$that.removeClass('opened');
|
||||
}
|
||||
})
|
||||
}
|
||||
$('.mobile-menu2 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck2 = $that.hasClass('opened');
|
||||
if ( opencheck2 == 0 ) {
|
||||
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
} else if (opencheck2 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$that.removeClass('opened');
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
|
||||
|
|
@ -3130,6 +3153,99 @@ $(document).ready(function() {
|
|||
setTimeout(function() {
|
||||
$('.internal-page [data-pp="300"] .w-ba-banner__image').attr('alt', '');
|
||||
}, 500);
|
||||
//會員tab邏輯
|
||||
$(document).ready(function () {
|
||||
setTimeout(function () {
|
||||
$('.dtr-control').removeAttr('tabindex');
|
||||
}, 500);
|
||||
});
|
||||
function fixTabKeyboardNav() {
|
||||
setTimeout(function () {
|
||||
var $tablist = $('.member-plugins[role="tablist"]');
|
||||
var $tabs = $tablist.find('a[role="tab"]');
|
||||
|
||||
// 初始化 roving tabindex 和 aria-selected
|
||||
$tabs.each(function (i) {
|
||||
var $tab = $(this);
|
||||
var isActive = $tab.closest('li').hasClass('active');
|
||||
$tab.attr({
|
||||
'tabindex': isActive ? '0' : '-1',
|
||||
'aria-selected': isActive ? 'true' : 'false'
|
||||
});
|
||||
});
|
||||
|
||||
// 方向鍵切換頁籤
|
||||
$tabs.on('keydown', function (e) {
|
||||
var $current = $(this);
|
||||
var currentIndex = $tabs.index($current);
|
||||
var $target;
|
||||
|
||||
if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
// 右鍵或下鍵:下一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.eq((currentIndex + 1) % $tabs.length);
|
||||
} else if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
// 左鍵或上鍵:上一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.eq((currentIndex - 1 + $tabs.length) % $tabs.length);
|
||||
} else if (e.keyCode === 36) {
|
||||
// Home:第一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.first();
|
||||
} else if (e.keyCode === 35) {
|
||||
// End:最後一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.last();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新 roving tabindex 和 aria-selected
|
||||
$tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' });
|
||||
$target.attr({ 'tabindex': '0', 'aria-selected': 'true' });
|
||||
$target.focus().trigger('click');
|
||||
});
|
||||
|
||||
// 點擊頁籤時同步更新狀態
|
||||
$tabs.on('click', function () {
|
||||
$tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' });
|
||||
$(this).attr({ 'tabindex': '0', 'aria-selected': 'true' });
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
fixTabKeyboardNav();
|
||||
});
|
||||
function removeBareUrlLinks() {
|
||||
setTimeout(function () {
|
||||
$('.dtr-control a').each(function () {
|
||||
var $a = $(this);
|
||||
var text = $a.text().trim();
|
||||
var href = $a.attr('href') || '';
|
||||
|
||||
// 判斷連結文字是否為網址(以 http:// 或 https:// 開頭)
|
||||
if (/^https?:\/\//i.test(text)) {
|
||||
$a.replaceWith(text);
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
removeBareUrlLinks();
|
||||
});
|
||||
$(document).ready(function () {
|
||||
$('.widget-breadcrumb .breadcrumb li:last-child a').attr('aria-current', 'page');
|
||||
|
||||
// 若尚未有 nav 包住,自動加上
|
||||
$('.widget-breadcrumb .breadcrumb').each(function () {
|
||||
if (!$(this).closest('nav').length) {
|
||||
$(this).wrap('<nav aria-label="麵包屑導覽"></nav>');
|
||||
}
|
||||
});
|
||||
});
|
||||
// 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105
|
||||
// $(window).load(function() {
|
||||
// if ($('.index-member-3').length && $(window).width() > 992) {
|
||||
|
|
|
|||
|
|
@ -26,16 +26,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
label[for="open-orbit-login"] {
|
||||
@media(max-width:768px){
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
[accesskey="U"],[accesskey="W"]{
|
||||
@media(max-width:768px){
|
||||
color: #666!important;
|
||||
}
|
||||
}
|
||||
// label[for="open-orbit-login"] {
|
||||
// @media(max-width:768px){
|
||||
// display: none!important;
|
||||
// }
|
||||
// }
|
||||
// [accesskey="U"],[accesskey="W"]{
|
||||
// @media(max-width:768px){
|
||||
// color: #666!important;
|
||||
// }
|
||||
// }
|
||||
.orbit-bar-inner{
|
||||
[accesskey="U"]{
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap col-sm-4">
|
||||
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap col-sm-8">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
||||
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}" onclick="{{onclick}}">{{title}}</a>
|
||||
<span data-list="statuses" data-level="1">
|
||||
<span class="label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue