var web_root="/"; (function ($) { /** 統一高度用的PLUGIN */ $.fn.extend({ imgLoaded: function( callback ) { var i, c = true, t = this, l = t.length; for ( i = 0; i < l; i++ ) { if (this.tagName === "IMG") { c = (c && this.complete && this.height !== 0); } } if (c) { if (typeof callback === "function") { callback(); } } else { setTimeout(function(){ $(t).imgLoaded( callback ); }, 200); } }, sameHeight: function(opt){ var options = $.extend({ item : '.item', overWidth: 0 }, opt ); return this.each(function(){ var $this = $(this), $win = $(window), $item = $this.find(options.item), _init = $this.data('init'), _tempW = 0, overWidth = options.overWidth, setWidth = function(){ var _maxH = 0, _ww = $win.width(); if( _tempW != _ww ) { _tempW = _ww; $item.css({ height:''}); if(_ww > overWidth ){ if($item.find('img').length){ $item.find('img').imgLoaded(function(){ $item.each(function(){ var _h = $(this).outerHeight(); if( _h > _maxH ) _maxH = _h; }).css({height: _maxH + 'px'}); }) }else { $item.each(function(){ var _h = $(this).outerHeight(); if( _h > _maxH ) _maxH = _h; }).css({height: _maxH + 'px'}); } } } }, bindEvent = function(){ $win.on('resize.setH', setWidth).on('load', function(){ $win.trigger('resize.setH'); }) }; if(!_init) { $this.data('init', true); bindEvent(); } }) } }); $.fn.addNavStyle = function () { return this.each(function () { var $win = $(window), $mainNav = $(this), $nav = $mainNav.find('li:has(ul)'); $nav.each(function (n) { var preName = 'AC-Nav' + n, $this = $(this); if($this.is('.on')) $this.data('open', true); $this.find('>.sub-nav').attr('id', preName); $this.addClass('has-nav').data('link', '#' + preName); $this.attr('data-link', preName); }) }) } $(function () { var _root = typeof(web_root) == 'undefined' ? '' : web_root; var $win = $(window), $body = $('body'), $container = $('#container'), $header = $('#header'), $banner = $('.banner'), $navBtn = $('#nav-btn, #nav-btn2'), $mainNavWrap = $('#main-nav'), $mobileNavWrap = $mainNavWrap.find('.mobile-nav'), $subNav = $mainNavWrap.find('.sub-nav'), $mobileSide = $header.find('.mobile-side'), $serachBtn = $('#search-btn'), $searchWrap = $('#search-wrap'), $langWrap = $('.lang-wrap'), $footer = $('#footer'), $maskBg = $('#mask-bg'), $goTop = $('#go-top'), $btnBack = $(''), $infoNav = $('.info-nav'), $cate = $('.cate-wrap .cate'), $datePicker = $('.datepicker'), tempW = 0, setBanner = function(){ var $slickWrap = $banner.find('.slick-wrap'); preImg = new Image; if($slickWrap.length){ preImg.src = $banner.find('.figure:first-child img')[0].src; $.getScript(_root + 'inc/js/backstretch/backstretch.js', function(){ $slickWrap.on('init', function(){ $slickWrap.find('.figure').each(function(){ var _src = $(this).find('img')[0].src; $(this).backstretch(_src); }); }).slick({ dots: true, arrows: true, fade:true, autoplay: true, autoplaySpeed:3000, }); $win.on('resize', function(){ setTimeout(function(){ $slickWrap.find('.figure').backstretch('resize'); }, 300); }) }) }else if($banner.find('.bg').length){ $.getScript(_root + 'inc/js/backstretch/backstretch.js', function(){ var _img = $banner.find('img')[0].src; $banner.backstretch(_img); $win.on('resize', function(){ setTimeout(function(){ $banner.find('.figure').backstretch('resize'); }, 300); }); }) } }, setNavNode = function (p0) { if (p0 > 768) { $mainNavWrap.find('.has-nav').each(function () { var $this = $(this), $obj = $($this.data('link')); $obj.appendTo($this); }) } else { $subNav.appendTo($mobileNavWrap); } }, setmainNavWrapHeight = function() { if($win.width() > 768){ //$subNav.find('ul').css({'max-height': ''}); //$mainNavWrap.find('.nav-wrap').css({'max-height': ''}); $mainNavWrap.find('ul').css({'max-height': ''}); }else{ //$subNav.find('ul').css({'max-height': ($win.height() - $subNav.find('ul').offset().top) + 'px'}); //$mainNavWrap.find('.nav-wrap').css({'max-height': ($win.height() - $mainNavWrap.find('.nav-wrap').offset().top) + 'px'}); $mainNavWrap.find('ul').css({'max-height': ($win.height() - $mainNavWrap.find('.nav-wrap').offset().top) + 'px'}); } }, moveNode = function(p0) { $langWrap.insertBefore(p0 > 768 ? $searchWrap : $mainNavWrap); }, openNav = function () { closeSearch(); $body.addClass('lock'); //$navBtn.addClass('on'); $mobileSide.addClass('on'); $maskBg.addClass('on'); }, closeNav = function () { $mobileSide.removeClass('on').find('.on,.switch').removeClass('on switch'); $mainNavWrap.removeClass('lv1 lv2').find('.has-nav').filter(function(){return $(this).data('open')== true; }).addClass('on'); $navBtn.removeClass('on'); $maskBg.removeClass('on'); $body.removeClass('lock'); }, switchNav = function(p0){ $mainNavWrap.removeClass('lv1 lv2').find('.on,.switch').removeClass('on switch'); $(p0).addClass('switch').siblings().removeClass('on switch'); }, checkNavBtn = function (p0) { var _NavOn = $navBtn.hasClass('on'); if (p0 > 768 && _NavOn) closeNav(); } openSearch = function () { closeNav(); $body.addClass('lock'); $serachBtn.addClass('on'); $searchWrap.addClass('on'); $maskBg.addClass('on'); }, closeSearch = function () { $serachBtn.removeClass('on'); $searchWrap.removeClass('on'); $maskBg.removeClass(); $body.removeClass('lock'); }, checkSearchBtn = function (p0) { var _NavOn = $serachBtn.hasClass('on'); if (p0 > 768 && _NavOn) closeSearch(); } checkGoTop = function (p0) { if (p0 < $footer.offset().top) { $goTop.removeClass('end'); } else { $goTop.addClass('end'); } }; //加入主要導覽列樣式 $mainNavWrap.addNavStyle(); //加入行動版主要導覽列子選單返回鈕 $btnBack.on('click', function(e){ e.preventDefault(); var $this = $(this), lv = $this.parent().is('.lv2') ? 'lv2' : 'lv1'; $mainNavWrap.removeClass(lv); }).prependTo($subNav); //主要導覽列開合 $mainNavWrap.find('.has-nav > a').on('click', function (e) { var _w = $win.width(), $this = $(this), $li = $this.parent(), id = $li.data('link'), $obj = $(id), lv = $obj.is('.lv2') ? 'lv2' : 'lv1'; if (_w <= 768 && id) { e.preventDefault(); $mobileNavWrap.addClass('on'); $mainNavWrap.addClass(lv); $('.'+lv).removeClass('on'); $obj.addClass('on'); } }); //頁尾導覽列開合 $footer.find('.footer-title').on('click', function (e) { var _w = $win.width(); if (_w <= 768) { e.preventDefault(); $(this).parent().toggleClass('on'); } }); //畫面大小變更時樣式重新設定 $win.on('resize', function () { var _w = $win.width(); if(tempW != _w && $mainNavWrap.length) { setNavNode(_w); moveNode(_w); checkNavBtn(_w); checkSearchBtn(_w); setmainNavWrapHeight(); } }).trigger('resize'); //行動版選單鈕(主導覽開合) if($navBtn.length){ $navBtn.on('click', function (e) { e.preventDefault(); var $this = $(this), elemId = $this.attr('href'), isOpen = !$navBtn.filter('.on').length && $this.not('.on'), isSwitch = $navBtn.filter('.on').length && !$(elemId).is('.on, .switch'), isClose = $this.is('.on') && $(elemId).is('.on, .switch'); if(isOpen){ $this.addClass('on'); $(elemId).addClass('on'); openNav(); setmainNavWrapHeight(); console.log('open'); }else if(isSwitch){ $navBtn.removeClass('on'); $this.addClass('on'); switchNav(elemId); console.log('switch'); }else if(isClose) { closeNav(); console.log('close'); } }); } //行動版搜尋鈕(搜尋區開合) if($serachBtn.length){ $serachBtn.on('click', function(e){ e.preventDefault(); var isOpen = $(this).hasClass('on'); isOpen ? closeSearch() : openSearch(); }); } //行動版遮罩點選時關閉已開啟之主要導覽列及搜尋區塊 $maskBg.on('click',function(){ closeNav(); closeSearch(); }); //回頂端事件 $goTop.on('click', function (e) { e.preventDefault(); $('html, body').stop().animate({ scrollTop: 0 }, 300); }); $win.on('scroll', function () { var _scroll = $win.scrollTop(), _winH = $win.height(), _top = $header.outerHeight(); $goTop[_scroll > _top ? 'addClass' : 'removeClass']('block'); checkGoTop(_winH + _scroll); }).trigger('scroll'); $win.on('load', function(){ $(this).trigger('resize').trigger('scroll'); }).trigger('resize'); //banner滿版 setBanner(); //單元選單手機下拉樣式開合 if($infoNav.length){ $infoNav.find('.label').on('click', function(e){ e.preventDefault(); var $this = $(this); $this.parent().toggleClass('on') }) } //類別選單下拉樣式開合 if($cate.length){ $cate.find('.label-title').on('click', function(e){ e.preventDefault(); var $this = $(this); $this.parent().toggleClass('on').siblings().removeClass('on'); }); $win.on('click', function(e){ if(!$(e.target).closest('.cate').length) $cate.removeClass('on'); }) } //日期套件 if($datePicker.length){ $.getScript(_root + 'inc/js/jquery-ui-1.11.0/jquery-ui.min.js', function(){ $datePicker.datepicker({ dateFormat: 'yy-mm-dd' }); }) } }); })(jQuery);