[jQueryMobile] jQueryMobile의 초기화 이벤트

jQuery/jQueryMobile 2016. 10. 26. 18:08






mobileinit 를 이용한 이벤트



 jQuery Mobile의 mobileinit 이벤트는 페이지가 형성될때 실행된다. 이때 주의할 점은 jQuery Mobile과 관련된 자바 스크립트 파일을 읽을 때 실행하는 이벤트이므로 mobileinit 이벤트가 실행된 이후에 jQueryMobile.js파일이 추가되어야 한다.



01. mobileinit 이벤트의 실행 방법은 아래와 같다.

 mobileinit_event.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    jQuery(document).bind('mobileinit', function() {
        alert("Mobile Init!!");
    });
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>MOBILE</h1>
    </div>
    <div data-role="content">
        <h1>Hello Wicked</h1>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</div>
</body>
</html>





02. 출력결과는 아래와 같다.











■ 뒤로가기 버튼 자동으로 생성하기




01. 일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꾼다.

    아래와 같이 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하여 사용할 수 도 있다.

 mobileinit_back.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    jQuery(document).bind('mobileinit', function() {
        jQuery.mobile.page.prototype.options.addBackBtn = true;
    });
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <!-- 첫 번째 페이지 -->
    <div data-role="header" data-position="fixed">
        <h1>FIRST</h1>
    </div>
    <div data-role="content">
        <a href="#second_page" data-role="button">To Second Page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
<div data-role="page" id="second_page" data-position="fixed">
    <!-- 두 번째 페이지 -->
    <div data-role="header" data-add-back-btn="true">
        <h1>FIRST</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 출력결과는 아래와 같다.



위와같은 방식으로 모든 옵션을 강제적으로 설정할 수 있다.

jQuery Mobile의 설정과 관련된 메서드는 모두 mobileinit 이벤트 핸들러 안에서 실행해야 함을 기억하자.






[jQueryMobile] 페이지 관련 이벤트

jQuery/jQueryMobile 2016. 10. 26. 17:34




■ jQuery Mobile 페이지 관련 이벤트



jQuery Mobile은 페이지 관련 이벤트가 제공된다. 이벤트가 굉장히 많으므로 어떤 순서로 실행하는지 아는것은 중요하다.


이벤트 이름

설   명

 pagebeforecreate

 · 페이지를 생성하기 바로 전에 실행합니다.

 pagecreate

 · 페이지를 생성하고 실행합니다.

 pagebeforechange

 · 페이지를 이동하기 바로 전에 실행합니다.

 pagechange

 · 페이지를 이동하고 실행합니다.

 pagechangefailed

 · 페이지 이동이 실패했을 때 실행합니다.



01. 아래코드는 bind( ) 메서드를 사용해 pagebeforecreate, pagecreate, pagebeforechange, pagechange 이벤트를 연결한다.

 page_event.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
<script>
    jQuery(document).bind({
          pagebeforecreate:function() { alert('PAGE BEFORE CREATE'); }
        , pagecreate:function() { alert('PAGE CREATE'); }
        , pagebeforechange:function() { alert('PAGE BEFORE CHANGE'); }
        , pagechange:function() { alert('PAGE CHANGE'); }
    });
</script>
</head>
<body>
<div data-role="page">
    <!-- 첫 번째 페이지 -->
    <div data-role="header" data-position="fixed">
        <h1>FIRST</h1>
    </div>
    <div data-role="content">
        <a href="#second_page" data-role="button">To Second Page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
<div data-role="page" id="second_page" data-position="fixed">
    <!-- 두 번째 페이지 -->
    <div data-role="header" data-add-back-btn="true">
        <h1>FIRST</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</div>
</body>
</html>




02. 코드를 실행하면 페이지가 생성되거나 이동할 때 pagebeforechange, pagebeforecreate, pagecreate, pagechange

   이벤트가 순서대로 실행되는 것을 확인 할 수 있다.

페이지를 이동할 때는 무조건 이 네가지 메서드를 모두 실행한다.

   따라서 페이지 관련 이벤트에서 이벤트를 연결하면 이벤트가 중첩될 수 있으므로 주의가 필요하다.





[jQueryMobile] jQuery Mobile 테마

jQuery/jQueryMobile 2016. 10. 25. 15:03




■ jQuery Mobile 테마




01. 태그에 data-theme 속성을 지정하면 테마를 변경할 수 있다.

    아래와 같이 pagedata-theme 속성을 적용하면 페이지 전체에 그 테마가 적용된다.

 thema_designation.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- jQuery Mobile의 기본 테마는 a 테마이다 -->
<div data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:" data-icon="grid">One</a></li>
                <li><a href="javascript:" data-icon="star">Two</a></li>
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>





02. 그럼 아래와 같이 페이지 색상이 변경되어 나오는 것을 확인 할 수 있다.








■ jQuery Mobile 테마 부분 적용하기.




01. 각 요소에 테마를 적용하고 변경하면서 사용할 수 있다. 아래코드처럼 data-theme 속성을 변경하면된다.

 thema_designation_custom.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left" data-theme="a">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right" data-theme="a">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:" data-icon="grid" data-theme="b">One</a></li>
                <li><a href="javascript:" data-icon="star" data-theme="a">Two</a></li>
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="a">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 그럼 a, b 2개의 테마가 혼용되어 나오는 것을 알 수 있다.










■ jQuery Mobile Theme Roller 테마 직접 만들기



테마는 jQuery Mobile Theme Roller(http://themeroller.jquerymobile.com/)를 사용해 만들 수 있다. 해당 사이트에서각 부분에 해당하는 색상을 설정하여 테마를 만들고 다운로드 하여, 기존의 CSS 파일 대신 다운받은 파일을 추가하고 data-theme 속성을 지정하면 사용자가 지정 테마를 마음것 변경 할 수 있다.







[jQueryMobile] jQuery Mobile 탭 바

jQuery/jQueryMobile 2016. 10. 25. 14:46




■ jQuery Mobile 탭 바



01. 헤더나 푸터에  div 태그를 생성하고 data-role 속성을 navbar로 입력합니다.

    이어서 해당 div 태그 안에 ul 태그로 리스트를 만들면, 탭 바가 생성된다.

 navigation_bar.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:">One</a></li>
                <li><a href="javascript:">Two</a></li>
                <li><a href="javascript:">Three</a></li>
                <li><a href="javascript:">Four</a></li>
                <li><a href="javascript:">Five</a></li>
                <!-- <li><a href="javascript:">Six</a></li> --><!-- 6개가 넘어가면 행이 추가됨 -->
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:">1</a></li>
                <li><a href="javascript:">2</a></li>
                <li><a href="javascript:">3</a></li>
                <li><a href="javascript:">4</a></li>
                <li><a href="javascript:">5</a></li>
                <!-- <li><a href="javascript:">6</a></li> --><!-- 6개가 넘어가면 행이 추가됨 -->
            </ul>
        </div>
    </div>
</div>
</body>
</html>




02. 위코드를 실행한 결과를 보면 헤더와 푸터 영역에 탭바가 추가된 모습을 확인 할 수 있다.





03. 위 코드에서 6(SIX)번의 주석을 해제하며 아래와 같이 자동으로 행이 추가되 어 나오니 이점 유의해야 한다.










■ 탭 바에 icon 사용하고 활성화 표시



01. 탭 바 안에 들어 있는 버튼 하나하나에 data-icon 속성을 입력하면 툴바의 버튼과 마찬가지로 아이콘을 넣을 수 있다.

    추가적으로 탭 버튼을 활성화 시키려면 class 속성을 ui-btn-active로 입력하면 된다.

 navigation_icon.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:" data-icon="grid">One</a></li>
                <li><a href="javascript:" data-icon="star" class="ui-btn-active">Two</a></li>
                <li><a href="javascript:" data-icon="alert">Three</a></li>
                <li><a href="javascript:" data-icon="info">Four</a></li>
                <li><a href="javascript:" data-icon="grid">Five</a></li>
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 아래 탭을 확인해 보면 위에서 classui-btn-active로 지정한 Two버튼만 활성화 되어 있는것을 알 수 있다.






[jQueryMobile] jQuery Mobile 툴바

jQuery/jQueryMobile 2016. 10. 25. 11:47



■ jQuery Mobile 툴바




01. jQuery Mobile에서는 헤더와 푸터 부분을 합쳐서 툴바라고 한다.

    헤더와 푸터에는 data-position 속성을 입력할 수 있는데 data-position 속성은 툴바의 위치와 형태를 지정한다.

    data-position 속성은 inline이나 fixed를 입력한다.

 data_position.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. data-positinon속성을 fixed로 설정을 하면 헤더와 푸터 툴바의 위치가 화면 상단과 하단에 고정된다.





03. 아래 이미지는 data-position속성을 inline으로 지정하거나 혹은 data-position속성을 적용하지 않았을 경우이다.

    기본적으로 data-position 속성은 inline으로 지정되므로 따로 입력할 필요가 없다.








■ 헤더에 버튼 생성하기.



01. jQuery Mobile은 헤더에 기본적으로 2개의 버튼을 놓을 수 있다.

    a태그를 이용하면 아래와 같이 자동으로 버튼이 만들어 진다.

 data_position_icon.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed>
        <a href="javascript:" data-icon="home" class="ui-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ui-btn-right">설정</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" data-position="fixed>
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 실행하면 아래 그림처럼 헤더에 버튼이 생성된다.









■ 푸터에 버튼 생성하기.



01. 헤더와는 다르게 푸터에는 버튼을 원하는 만큼 생성할 수 있다.

    하지만, 화면의 너비를 벗어나면 좋지 않으므로 3개에서 4개까지가 가장 적당하다.

    푸터에 버튼을 만드는 것도 간단히 a태그를 입력하면 된다.

 data_footer_icon.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ui-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ui-btn-right">설정</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" data-position="fixed">
        <a href="javascript:" data-icon="plus">추가</a>
        <a href="javascript:" data-icon="delete">삭제</a>
        <a href="javascript:" data-icon="refresh">새로고침</a>
    </div>
</div>
</body>
</html>




02. 아래와 같이 푸터에 버튼이 생성된 모습을 확인 할 수 있다.