Skip to content

Instantly share code, notes, and snippets.

@riix
Created April 26, 2013 07:04

Revisions

  1. riix created this gist Apr 26, 2013.
    207 changes: 207 additions & 0 deletions ui.mobile.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,207 @@
    /*************************************************************************************************
    * ui.mobile.js
    *
    * @Author : 박순길
    * @Version 0.5
    *
    * @Searching List
    * browser : Browser Detect
    *
    ************************************************************************************************/

    /* User Function ------------------------------ */
    (function($) {

    // img.imgToggle();
    // img.imgToggle({ oldSrc: '_off', newSrc: '_on' });
    $.fn.imgToggle = function(settings) {
    var config = {
    oldSrc : '_off', newSrc : '_on'
    };
    if (settings) $.extend(config, settings);
    this.each(function() {
    var $this = $(this);
    if($this.attr('src')){
    $this.attr('src',$this.attr('src').replace(config.oldSrc, config.newSrc));
    }
    });
    };

    // img.imgHover();
    // img.imgHover({ oldSrc: '_off', newSrc: '_on' });
    $.fn.imgHover = function(settings) {
    var config = {
    oldSrc : '_off', newSrc : '_on'
    };
    if (settings) $.extend(config, settings);
    this.each(function() {
    var $this = $(this);
    $this.on('mouseenter',function() {
    if ($this.attr('src') && $this.attr('src').match(config.oldSrc)) {
    $this.attr('src', $this.attr('src').replace(config.oldSrc, config.newSrc));
    $this.on('mouseleave',function() {
    $this.attr('src', $this.attr('src').replace(config.newSrc, config.oldSrc));
    });
    }
    });
    });
    };

    })(jQuery);

    var console = window.console || { log: function() {} }; // console 에러 방지
    var isSearchList = false; // 검색결과 페이지 인지 변수

    var $doc = $(document);
    var $html = $('html');
    var $window = $('#container');
    var $container = $('#container');
    var $aside = $('#aside');
    var $body = $('#body');

    var $windowHeight = $window.height();
    var $bodyHeight = $body.height();
    var $height = ( $windowHeight >= $bodyHeight ) ? $windowHeight : $bodyHeight ;

    var $overlay = $('<div id="overlay"></div>'); // 반투명 오버레이

    function riix(){
    $html.removeClass('no-js').addClass('js '+riix.browser()); // browser detect
    $bodyClass = $('body').attr('class');
    if($bodyClass != null && $bodyClass.match('page-search')){
    isSearchList = true; // 검색결과 페이지 인지 변수
    searchbarToggle('on');
    }
    }

    riix.browser = function(){
    var $agent = navigator.userAgent.toLowerCase();
    if($agent.match('firefox')){
    return 'firefox';
    } else if ($agent.match('msie')) {
    var $browserhappy = $("<div id='browserhappy'>MS Internet Explorer 는 지원하지 않습니다.</div>");
    $browserhappy.prependTo($body);
    return 'ie';
    }
    }

    $(function(){

    riix();

    // 페이지 높이 맞추기
    $aside.height($height);
    $body.height($height);

    // aside 토글
    $('#buttonAside, #aside h2 a').on('click',function(e){
    e.preventDefault();
    toggleAside();
    });

    // gnb 액션
    $('#gnb a').on('click',function(e){
    var $this = $(this);
    var $next = $this.next()[0];
    if($next != null && $next.tagName == 'OL'){
    e.preventDefault();
    $("#gnb li.d1 ol").slideUp();
    $("#gnb li.d1 a.d1 img.arrow").attr('alt','펼치기').imgToggle({ oldSrc: '_on', newSrc: '_off' });
    if(!$this.next().is(":visible")) {
    $this.next().slideDown();
    $this.children('img.arrow').attr('alt','접기').imgToggle({ oldSrc: '_off', newSrc: '_on' });
    }
    }
    });

    // 서치바 토글
    $('#nav div.action a[href="#searchbar"]').on('click',function(e){
    e.preventDefault();
    searchbarToggle();
    });

    // 서치바 취소 버튼
    $('#searchbar div.form button:last-child').on('click',function(e){
    $(this).siblings('input.text').val('');
    searchbarToggle('off');
    });

    // 서치바 검색 타입 버튼 토글
    $('#searchbar div.category button').on('click',function(e){
    $(this).addClass('button-s-active').siblings().removeClass('button-s-active');
    });

    // pagination
    $('div.paginate a.no:eq(0)').addClass('no-first');

    // gnb link
    $('#gnb li a').on('click',function(e){
    $this = $(this);

    if($this.is('.logout')) { // 로그아웃
    e.preventDefault();
    var confirmLogout = confirm('로그아웃 하시겠습니까?');
    if (confirmLogout == true){
    alert('로그아웃 되었습니다.');
    }
    }
    });

    });

    // gnb 활성화
    function initGnb(d1,d2){
    var $d1 = $('#gnb li.d1').eq(d1);
    var $d2 = $d1.children('ol').children('li').eq(d2);
    $d1.children('a').addClass('active').children('img.arrow').attr('alt','접기').imgToggle();
    $d1.children('ol').slideDown();
    if(d2 != null && $d2 != null) $d2.addClass('active');
    }

    // aside 토글
    function toggleAside(){
    searchbarToggle('off');
    $body.toggleClass('active');
    if($aside.data('active') == 'off'){
    $body.transit({ marginLeft: '274px' });
    $aside.data('active','on');
    } else {
    $body.transit({ marginLeft:'0%' });
    $aside.data('active','off');
    }
    }

    // 서치바 토글
    function searchbarToggle(todo){
    var $searchbar = $('#searchbar');
    if($searchbar.is(':visible') || todo == 'off'){
    if(isSearchList != true) $searchbar.slideUp();
    $overlay.remove();
    } else {
    if(isSearchList != true){
    $searchbar.slideDown().delay(100).promise().done(function(){
    var $contentsTop = parseInt($('#contents').offset().top, 10);
    $overlay.css({
    'display':'block',
    'marginTop': $contentsTop,
    'height': $height-$contentsTop
    }).appendTo($('body'));
    });
    } else {
    $searchbar.show();
    }
    }
    }

    // 파일 입력상자 꾸미기
    function fileDecoration(obj){
    var $buttonFile = $('<button id="fileButton" class="button-c button-i"><img src="../img/common/ico_pic.png" alt="" />사진첨부</button>');

    $('input[type="file"]').hide().on('change',function(){
    $(this).after('&nbsp;&nbsp;<small>파일이 선택되었습니다.</small>');
    }).before($buttonFile);

    $buttonFile.on('click',function(e){
    $(this).next().trigger('click');
    });
    }