jquery 모바일 정리 100% 활용가능

jquery mobile 정리

khquasar.egloos.com/668248

* 기본구성

<!DOCTYPE html>

<html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

=> jQuery 라이브러리 다음에 jQuery Mobile 라이브러리(js)를 인클루드해야 함

* 페이지 정의

페이지를 정의할 때 HTML5 형태로 정의해도 되고, div 태그를 사용해서 영역을 정의해도 된다.

[HTML5 형태]

</div>

</section>

[div 형태]

</div>

</div>

=> HTML5 형태가 권장되며, data-role 속성을 사용해서 각 영역의 역할을 설정해줘야 한다.

[앞으로 사용할 최종형태]

</div>

</section>

* 페이지간의 이동

jQuery Mobile은 기본적으로 하나의 파일에 모든 페이지들을 전부 정의하고 첫번째 정의된 페이지를 보여준다.

아래와 같이 페이지 두개를 정의한다.

<p>초기페이지</p>

<p><a href="#page2">다음페이지</a></p>

</div>

</section>

<p>두번째페이지</p>

</div>

</section>

위와 같이 한페이지에 두개의 페이지가 정의되어 있으면 첫번째 페이지가 초기에 보이게 된다.

그리고, 동일 파일에서의 페이지 이동은 <a href="#pageID">링크</a> 형태로 이동을 하면 된다.

페이지가 많은 경우는 페이지를 물리적인 파일로 분리할 수도 있는데, 다른 파일에 있는 페이지로 이동을 하게 되면, jQuery Mobile은 비동기적으로 페이지를 가져와서 현재의 문서에 포함을 시켜버린다. 즉, 모든 페이지들은 물리적으로 한 파일에 있든 서로다른 파일에 있든 하나의 페이지에서 처리되는 효과를 가져온다고 볼 수 있다.

위와 같이 같은 파일에 있는 페이지로 이동할 때는 <a href="#pageID">링크</a> 형태로 이동을 할 수 있고, 외부파일에 정의된 페이지를 불러올 때는 <a href="otherfile.html">링크</a> 와 같이 이동을 할 수 있다.

이렇게 외부파일로 이동을 하게 되면, otherfile.html 에 정의되어 있는 페이지중 첫번째 있는 페이지를 가져와서 현재 문서에 포함시켜버린다. ( 즉, otherfile.html 에 정의된 다른 모든 요소들은 무시되고 첫번째 페이지영역만 가져오는 것이다. )

=> 물리적으로 분리된 파일에 있는 페이지라고 하더라도 결국은 한 페이지에 같이 존재하게 되는 것이므로, 요소들의 ID가 충돌하지 않도록 ID 설계를 잘 해야 한다.

그런데, 이렇게 비동기적(Ajax방식)으로 페이지를 가져오는 것이 아니고, 완전히 페이지 이동을 하고 싶은 경우가 있을텐데 이때는 링크에 target="_blank" 속성을 주어서 새창으로 띄우게 되면 당연히 페이지가 분리가 될 것이고, rel="external" 속성을 주면 페이지가 포함이 아니라 완전 이동이 되게 된다.

* 뒤로가기 버튼

페이지 간에 이동하다보면 뒤로가기 버튼이 있으면 편한데, 기본적으로 뒤로가기 버튼을 jQuery Mobile에서 제공해주는 것을 쓸 수가 있다.

뒤로가기 버튼이 존재했으면 하는 페이지에 속성을 주어서 배치시킬 수도 있고, 전역적으로 설정할 수도 있다.

[페이지별로 설정]

...

</section>

=> 위와 같이 버튼이 필요한 페이지에 data-add-back-btn ="true" 속성을 설정한다. ( 뒤로 갈 페이지가 있는 경우에만 알아서 버튼이 표시된다. )

[전역적으로 설정]

jQuery 라이브러리를 불러들인 다음, jQuery Mobile 라이브러리를 로드하기 전에 아래와 같은 처리를 해준다. ( jquerymobile.js 파일을 로드한 다음에는 의미가 없다. )

$(document).bind("mobileinit", function() {

$.mobile.page.prototype.options.addBackBtn = true;

});

</script>

* 페이지 관련 이벤트

보통 웹개발시 페이지 이동시에 초기화 방법으로 jQuery(document).ready() 함수를 많이 이용한다.

jQuery Mobile은 기본적으로 Ajax 방식으로 페이지 이동 효과를 가져오는데, 동일한 파일에 있는 페이지로 이동할 때는 jQuery(document).ready() 가 의미가 없게 된다. 해당 페이지 파일이 처음 로딩 될 때 한번 호출이 되며, 같은 파일 내에 있는 페이지로 이동할 때는 단지 페이지가 숨김처리, 보임처리 될 뿐이기 때문에 호출이 되지 않는 것이다.

단, 다른 파일에 있는 페이지로 이동할 때는 이동할 페이지 파일에 선언된 jQuery(document).ready() 는 호출이 된다.

다행히 페이지가 숨김처리, 보임처리 될때마다 이벤트가 발생하므로 그 이벤트를 이용해서 처리를 해 줄수가 있다.

[이벤트 종류]

A 페이지에서 B 페이지로 이동하는 경우를 생각하면 다음과 같은 이벤트가 발생한다.

pagebeforecreate

B 페이지가 생성되기 직전에 호출이 된다. ( 한번 로딩이 된적이 있는 페이지는 호출이 되지 않는다. )

pagecreate

B 페이지가 생성된 직후에 호출이 된다. ( 마찬가지로 한번 로딩이 된 이후에는 발생하지 않는다. )

pagebeforehide

A 페이지가 숨기 전에 A 페이지 객체에서 이벤트가 발생한다.

ui.nextPage 에는 $("#B pageID") 객체가 넘어온다.

pagebeforeshow

B 페이지가 보이기 전에 B 페이지 객체에서 이벤트가 발생한다.

ui.prevPage 에는 $("#A pageID") 객체가 넘어온다.

pagehide

페이지 전환이 끝난 후 A 페이지 객체에서 이벤트가 발생한다.

ui.nextPage 에는 $("#B pageID") 객체가 넘어온다.

pageshow

페이지 전환이 끝난 후 B 페이지 객체에서 이벤트가 발생한다.

ui.prevPage 에는 $("#A pageID") 객체가 넘어온다.

=> 이벤트가 발생하는 순서는 다음과 같다.

(B)pagebeforecreate => (B)pagecreate => (A)pagebeforehide => (B)pagebeforeshow => (A)pagehide => (B)pageshow

=> 위와 같은 이벤트에 대한 리스너를 설치할 때는 세가지 방식을 사용할 수가 있다.

같은 페이지 파일 안에서의 이동이라면 jQuery.bind() 로 리스너를 등록하면 된다.

물리적으로 분리된 페이지로 이동할 때는 동적으로 생성된 DOM 객체들을 이벤트 연결할때 사용하는 jQuery.live()를 사용하면 된다.

그런데, jQuery.live()는 속도와 이벤트 중복바인딩등 문제가 많아서 jQuery.delegate()로 개선되었고, 그이후로 jQuery.on() 으로 개선되었으므로 결론적으로는 jQuery.on()을 사용하면 된다.

( 참고 : http://blog.naver.com/PostView.nhn?blogId=bluelevel&logNo=70150290367 , http://blog.naver.com/PostView.nhn?blogId=rookieangel&logNo=140155840779 )

[같은 HTML 내에서의 페이지 이동]

$("#pageID").unbind("이벤트명").bind("이벤트명", function(event, ui) {

...

});

[다른 HTML에 있는 페이지로의 이동]

$("#pageID").off("이벤트명").on("이벤트명", function(event, ui) {

...

});

=> 이벤트 리스너 등록시는 중복바인딩을 고려해야 되는데, 위와 같이 미리 해제해놓고 바인딩을 거는 것이 안전하다고 하겠다. ( 네임스페이스를 이용하는 방법이 있다는데, 그건 추후에 알아보겠다. )

* 페이지 초기화 패턴

위 내용을 바탕으로 페이지를 초기화하는 로직은 다음과 같이 설계할 수가 있겠다.

$(function() {

$("#pageID").unbind("pageshow").bind("pageshow", function(event, ui) {

// 페이지 초기화

});

</script>

=> 동적으로 로딩되는 페이지에서는 해당 페이지파일의 jQuery(document).ready() 안에서 jQuery.on() 을 사용하면 될거 같은데, 잘 안된다. 캐쉬때문인지... 이부분은 다시 정리를 해야겠다.

* 대화상자 형식으로 페이지 열기

링크에 data-rel="dialog" 속성을 주면 열리는 페이지가 대화상자 형식으로 열리게 된다.

=> 페이지가 이동하게 되면 jQuery Mobile은 location.hash 객체에 이동정보를 저장하는데, 다이얼로그로 뜬 페이지는 모달 형식이 있어서 히스토리에 저장되지 않는다.

* 자바스크립트로 페이지 이동

changePage(to, transition, back, changeHash);

to : 목적지로 세가지 경우가 있다.

changePage("#pageID", ~~~); // 페이지아이디

changePage(["sourcePageID", "targetPageID"], ~~~ ); // 출발지와 목적지 지정

changePage({url: "target.html", type:"post", data:"a=1&b=2"}, ~~~); // 목적지로 데이터 전달

transition : 페이지 전환 방식

fade : 서서히 나타남

flip : 뒤집히면서 나타남

pop : 한가운데에서 솟아오름

slide : 좌우로 밀어내면서 나타남

slidedown : 위에서 내려옴

slideup : 아래에서 올라옴

back : 지정된 전환방식을 반대로 할지에 대한 boolean값

changeHash : 페이지 전환 후 히스토리에 저장할지에 대한 boolean값

* a 링크로 페이지 이동시 효과주기

data-transition="방식" 속성으로 효과 지정

data-direction="reverse" 속성으로 지정된 반대방식으로 효과 일어나도록 설정

* ListView

<ul>, <ol> 에 data-role="listview" 속성을 부여하면 리스트뷰 형태로 바뀐다.

</ul>

=> ul은 아이템이 단순 나열되며, ol은 앞에 인덱싱이 붙게 된다.

=> 보통 리스트 제일 위에 제목이 붙을 텐데 <h3> 태그 정도로 붙이면 무난한다.

...

</ul>

=> 위와 같이 단순 리스팅만 하는게 아니라, 버튼처럼 터치 효과를 주려면 <a> 태그를 사용한다.

...

</ul>

=> 목록에 구분자를 넣을 때는 <li> 태그에 data-role="divider" 속성을 부여하면 된다.

</ul>

=> 중첩된 리스트뷰라면 <li> 태그 안에 다시 <ul> 태그로 정의를 한다. ( 안에 들어가는 ul 태그에는 data-role="listview" 속성을 주지 않는다. )

<li>아이템2

<ul>

</ul>

</li>

</ul>

=> 위와 같이 중첩된 리스트뷰는 하위메뉴로 들어갔을때 다시 돌아오는 버튼이 있어야 어울리므로 Back 버튼을 배치하는 것이 좋다.

=> <li> 태그 안에 <a> 태그를 쓰면 우측편에 화살표 모양이 생기는데, <li> 영역을 터치하면 해당되는 링크로 이동이 된다. 그런데, 왼쪽편 문자가 나오는 영역과 오른쪽 버튼이 나오는 영역을 따로 링크를 부여할 수가 있는데, 단순히 <a> 태그를 두개 쓰면 된다.

<li><a href="mypage.html">마이페이지</a><a href="setting.html">설정페이지</a></li>

=> 오른쪽 영역에서는 "설정페이지"란 글자는 보이지 않고 아이콘만 보인다.

=> 아이템 앞에 이미지를 넣을 수가 있는데, 그냥 이미지를 넣으면 썸네일 형식으로 표시가 되고, class="ui-li-icon" 클래스를 주면 아이콘 형식으로 좀더 작게 나타난다.

=> 주의할 점은 아이템에 이미지가 들어갈 경우에는 <a> 태그로 감싸야 정상적으로 보인다는 것이다. 그러므로 링크가 없다고 하더라도 <a href="#">~~</a> 로 감싸는게 좋은 습관이다. ( 어차피 #으로 된 링크는 무시가 된다. )

=> 리스트 우측편에 카운트 정보를 넣으려면 class="ui-li-count" 클래스를 부여한다.

=> 이렇게 카운트 정보를 넣으려면 <li> 태그안에 <a> 태그가 있던지, data-role="divider" 속성이 있는 <li>에만 적용이 된다.

* ListView 갱신

이미 만들어져있는 리스트 뷰를 갱신하기 위해서는 자바스크립트로 처리를 해야 한다.

[리스트 위에 추가하는 예]

$("#mylist").prepend("<li><a href='#'>새아이템</a></li>").listview("refresh");

[리스트 아래에 추가하는 예]

$("#mylist").append("<li><a href='#'>새아이템</a></li>").listview("refresh");

* 네비게이션바

네비게이션바는 헤더영역이나 푸터영역에 들어갈 수 있다.

</nav>

</header>

위와 같이 <nav> 태그에 data-role="navbar" 속성을 주고 태그 안에다가 <a> 링크를 나열한다. 현재 선택되어 있는 탭을 뜻할때는 ui-btn-active 클래스를 부여한다.

=> 탭메뉴의 폭은 글자크기에 따라 다른데, 화면에 꽉 차게 해서 메뉴들의 크기를 동일하게 하려면 <a> 링크들을 <ul> 로 감싸면 된다.

<ul>

</ul>

</nav>

=> 탭메뉴 갯수는 다섯개까지 가능하며, 6개부터는 줄바꿈 처리가 된다.

* 헤더와 푸터 위치 지정

기본값은 content 위와 아래에 붙어있는 형태로 스크롤을 하면 따라 움직인다.

만약 헤더와 푸터는 화면 위아래에 고정시키고 contents만 스크롤 시키고 싶은 경우에는 아래와 같이 <header>, <folter>에 data-position="fixed" 속성을 부여한다.

...

</header>

마지막으로.. 화면을 터치하면 헤더,푸터가 사라지고, 다시 터치하면 나타나게 할 수도 있는데, 헤더, contents 영역은 헤더,푸터 영역을 무시하고 표시가 되어서 헤더,푸터가 보이는 상태일때는 겹쳐져 보인다.

이런 식으로 하려면 아래와 같이 한다.

...

</header>

...

...

</footer>

</section>

* 버튼

아래 모두가 버튼 형태로 나타난다.

<button>Button4</button>

<a href="#" data-role="button">Button5</a>

버튼들은 기본적으로 가로가 꽉 차게 표시가 되는데, 글자크기만큼만 표시를 하려면 data-inline="true" 속성을 부여한다.

<button data-inline="true">Button4</button>

<a href="#" data-role="button" data-inline="true">Button5</a>

* 버튼그룹

버튼들을 <div> 로 감싸고 div에 data-role="controlgroup" 속성만 부여하면 하나로 묶인 버튼이 된다.

</div>

=> 기본적으로 세로로 버튼들이 나열되는데, 만약 가로로 나열하고 싶으면 아래와 같이 data-type="horizontal" 속성을 부여한다.

</div>

=> UI 상으로 묶을 뿐이지 버튼 동작은 각각 독립적으로 동작한다.

* 아이콘버튼

버튼에 아이콘을 표시할 때는 data-icon 속성을 주며, 아이콘의 위치는 data-iconpos 속성으로 조정한다.

( 아이콘종류 참조 : http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html )

data-iconpos : 텍스트가 기준

bottom - 텍스트 아래에 배치

left : 텍스트 왼쪽에 배치

notext : 텍스트 숨김

right : 텍스트 오른쪽에 배치

top : 텍스트 위에 배치

* Form 기본

( 참조 : http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html )

<input> , <select>등의 폼 요소에 모두 <label>을 붙이고, 폼 요소들은 모두 <form> 태그 안에 배치한다.

그리고, 폼요소들을 감싸는 fieldset이나 div에 data-role="fieldcontain" 속성을 부여한다.

jQuery Mobile은 form이 submit될 때 Ajax로 전송한 후 Response를 현재의 DOM에 반영해서 지정된 전환효과를 적용한다.

만약 submit시 Ajax로 처리하기 싫을 때는 form 태그에 data-ajax="false" 속성을 부여한다.

=> 모든 폼 요소들은 자동으로 모바일에 맞게 렌더링이 된다.

* 체크박스, 라이오버튼

버튼과 마찬가지로 컨테이너에 data-role="controlgroup" 속성을 주어서 그룹화 시킨다.

기본적으로 세로로 나열이 되며, 가로로 나열하고 싶을 때는 data-type="horizontal" 속성을 부여한다.

<legend>MyGroup</legend>

<input type="checkbox" id="check1"/><label for="check1">Check1</label>

<input type="checkbox" id="check2"/><label for="check2">Check2</label>

<input type="checkbox" id="check3"/><label for="check3">Check3</label>

</fieldset>

<legend>MyGroup</legend>

<input type="checkbox" id="check4"/><label for="check4">Check4</label>

<input type="checkbox" id="check5"/><label for="check5">Check5</label>

<input type="checkbox" id="check6"/><label for="check6">Check6</label>

</fieldset>

* 체크박스, 라디오버튼 제어 스크립트

체크박스와 라디오버튼은 checkboxradio 메서드로 제어를 한다.

$("#id").checkboxradio("disable"); // 비활성화

$("#id").checkboxradio("enable"); // 활성화

$("#id").attr("checked", true).checkboxradio("refresh"); // 속성을 체크상태로 바꾼 후 화면에 반영 ( refresh 해주지 않으면 화면상 바뀌지 않는다. )

</script>

* 플립토글

<select> 태그에 data-role="slider" 속성을 부여하면 플립토글로 표시된다.

</select>

* 플립토글 제어 스크립트

플립토글은 slider 메서드로 제어를 한다.

$("#id").slider("disable"); // 비활성화

$("#id").slider("enable"); // 활성화

$("#id").selectedIndex = 1;

$("#id").slider("refresh"); // 값을 바꾼후 UI 화면 갱신

</script>

* 입력필드

<input> 태그에 type 속성으로 입력형식을 정의할 수 있다.

<input type="text"> : 문자입력

<input type="password"> : 패스워드 형식

<input type="number"> : 숫자입력

<input type="email"> : 이메일

<input type="url"> : URL 입력

<input type="tel"> : 전화번호입력

<input type="number" pattern="[0-9]*"> : 패턴입력

<input type="time"> : 시간형식 입력

<input type="date"> : 날짜형식 입력

<input type="month"> : 월 입력

<input type="week"> : 주 입력

<input type="datetime"> : Datetime 형식 입력

<input type="datetime-l"> : local datetime 입력

<input type="color"> : 색상입력

<input type="search"> : 검색형식의 입력창 ( 검색관련 아이콘이 나타난다. )

<textarea></textarea> : 긴 문장 입력

* 입력필드 제어 스크립트

입력필드는 textinput 메서드로 제어를 한다.

$("#id").textinput("disable"); // 비활성화

$("#id").textinput("enable"); // 활성화

</script>

* Custom select 메뉴

<select> 태그는 기본적으로 내장 Select 스타일로 표시가 되는데, 다중선택이나, 옵션바활성화, 옵션그룹화 등을 하려면 Custom select 로 해야 한다.

Custom select메뉴로 보이게 하려면 <select> 태그에 data-native-menu="false" 로 주면 된다.

...

</select>

만약 다중 선택이 가능하도록 하려면 다음과 같이 multiple="multiple" 속성을 준다.

...

</select>

=> 다중선택창은 선택시 닫히지가 않고 상단의 x 버튼을 클릭해야 닫힌다. 타이틀은 <label> 로 <select> 이름을 지정해줬다면 <label>에 지정된 이름이 타이틀에 표시된다.

<label for="myselect">Select</label>

...

</select>

그리고, 옵션들을 그룹으로 묶으려면 optgroup 으로 감싸면 된다.

...

<option value="1">Value1</option>

<option value="2">Value2</option>

<option value="3">Value3</option>

<option value="4">Value4</option>

</select>

만약 특정 option을 선택 불가능하게 하려면 아래와 같이 disabled="disabled" 속성을 부여한다.

<option disabled="disabled">Value</option>

* select 메뉴 제어 스크립트

$("#id").selectmenu("disable"); // 메뉴 비활성화

$("#id").selectmenu("enable"); // 메뉴 활성화

$("#id").selectmenu("open"); // 메뉴 열기

$("#id").selectmenu("close"); // 메뉴닫기

$("#id")[0].selectedIndex = 2;

$("#id").selectmenu("refresh"); // 옵션 선택후 화면에 반영

$("#id").selectmenu("refresh", true); // select 객체를 다시 생성함

</script>

* 슬라이더

<input> 의 type을 range로 주면 슬라이드 컨트롤로 표시가 된다.

이때 슬라이드 옆에 직접 값을 입력할 수 있게 텍스트필드도 같이 표시된다.

* 슬라이더 제어 스크립트

$("#id").slider("disable"); // 슬라이더 비활성화

$("#id").slider("enable"); // 슬라이더 활성화

$("#id").val(100).slider("refresh"); // 슬라이더 값 설정후 화면에 반영

</script>

* 레이아웃

가로를 일정한 크기로 잘라서 요소들을 배치할 때 레이아웃을 이용하는데, 컨테이너에게는 안에 몇개의 셀이 포함될지를 지정하고, 각각의 셀에게는 자신이 몇번째 셀인지를 지정해주는 식으로 구현한다.

지정하는 방법은 컨테이너에게는 "ui-grid-?" 클래스를 부여하고, 각각의 "셀"에다가는 "ui-block-?" 클래스를 부여해서 지정한다.

열이 한개일 때는 굳이 레이아웃 쓸 이유가 없으므로 2부터 의미가 있겠다.

열이 2개인 경우는 "ui-grid-a"

열이 3개인 경우는 "ui-grid-b"

이런 식으로 차례대로 a,b,c,d~~~ 를 부여한다.

자기가 몇번째 열인지를 "셀"에다가 지정할때는

첫번째 셀인 경우에는 "ui-block-a"

두번째 셀인 경우에는 "ui-block-b"

이런 식으로 차례대로 a,b,c,d ~~~를 부여한다.

3열인 경우는 다음과 같다.

</div>

* 테마

모든 요소에 테마를 부여할 수 있고, 테마가 지정되면 자식요소들에 전파가 된다.

요소에 테마를 지정할 때는 data-theme="테마" 형식으로 지정을 한다.

테마의 종류로는

a,b,c,d,e 다섯가지가 있는데 a가 가장 진하고, d가 가장 연하다고 생각하면 된다.

e테마는 "에러"를 표현하기 적합하다.

...

</section>

=> 테마는 해당 요소에 직접 속성을 주어서 지정하는데, ListView 같은 경우에는 하위 자식을 <ul> 태그에서 바로 지정할 수도 있다.

...

</ul>

data-split-icon은 아이템 오른쪽의 화살표 아이콘을 바꾸는 것이고, data-divider-theme는 구분자로 지정된 아이템의 테마를 바꾸고, data-count-theme는 카운트요소의 테마를 바꾸는 것이다.

물론, 각각의 요소에 직접data-theme 속성을 써서 바꾸어도 된다. ( 코드가 지저분해진다. )

jQuery Mobile API

[changePage] : 앞에서 다루었다.

[pageLoading] : 페이지로딩

$.mobile.pageLoading(); // 로딩창을 숨긴다.

$.mobile.pageLoading(true); // 로딩창을 보여준다.

=> 제대로 동작하지 않는것 같다.

[silentScroll] : 지정된 y 좌표로 페이지를 내린다.

$.mobile.silentScroll(500);

[addResolutionBreakpoints] : 화면크기 중단점 추가 ( 반응형 레이아웃 참조 )

[media] : 장치가 특정 미디어 타입을 지원하는지 조사 ( 지원하면 true 반환 )

var boolRetian = $.mobile.media("-webkit-min-device-pixel-ratio: 2"); // 레티나 디스플레이인지 확인

* 반응형 레이아웃

[방향에 따른 CSS 선택]

jQuery Mobile은 방향에 따라 자체적으로 요소들에게 .landscape / .portrait 클래스를 부여한다.

그러므로, 요소들을 방향에 따라 다른 클래스를 적용하고 싶으면 css를 다음과 같이 정의하면 된다.

.portrait section {

...

}

.landscape section {

...

}

[화면해상도에 따른 CSS 선택]

jQuery Mobile은 화면 해상도에 따라서 CSS를 적용할 수가 있다.

해상도는 정해진 기준점이 있는데, 이것을 화면크기 중단점이라고 한다.

jQuery Mobile에서 기본적으로 지정되어 있는 화면크기 중단점은 320, 480, 768, 1024 픽셀이다.

해상도에 따라 특정 요소의 CSS를 달리 하고 싶을 때는 다음과 같이 정의하면 된다.

#myelement {

... // 그 이외의 범위일 경우

}

.min-width-320px #myelement, .max-width-480px #myelement {

... // 320~480 일 경우

}

.min-width-480px #myelement, .max-width-768px #myelement {

... // 480~768 일 경우

}

.min-width-768px #myelement, .max-width-1024px #myelement

... // 768~1024 일 경우

}

=> 만약에 그 이외의 화면크기 중단점을 추가하고 싶을때는 addResolutionBreakpoints 메서드를 사용한다.

$.mobile.addResolutionBreakpoints(1000); // 하나만 추가할 때

$.mobile.addResolutionBreakpoints([500,1000]); // 배열로 여러개 추가할 때

* jQuery Mobile 설정

Back 버튼을 보이게 하는 설정처럼 전역적으로 설정할 수 있는 옵션 ( Back 버튼 설정처럼 mobileinit 이벤트에서 처리를 해줘야 한다. )

ajaxEnabled : 폼처리나 링크의 Ajax방식, URL해시관리를 켜거나 끈다. ( 기본 : true )

ajaxFormsEnabled : 폼의 Ajax 방식을 켜거나 끈다. ( 기본 : true )

ajaxLinksEnabled : 링크의 Ajax 방식을 켜거나 끈다. ( 기본 : true )

defaultTransition : 기본 페이지 전환 방식 설정 ( 기본 : slide )

hashListeningEnabled : URL 해시관리를 켜거나 끈다. ( 기본 : true )

loadingMessage : 로딩창에 표시할 문자열 ( 기본 : Loading )

nonHistorySelectors : data-rel속성, data-role속성이 여기 지정한 값에 포함이 된다면 URL 히스토리에 저장이 되지 않는다. ( 기본 : dialog )

ns : 네임스페이스를 지정한다. (기본 : 빈문자열 ) => 네임스페이스에 "foo-" 로 입력이 되어 있는 경우에는, jQuery Mobile은 "data-role"이나 "data-transition" 등의 속성을 찾는 것이 아니라 "data-foo-role", "data-foo-transition" 등 "data-foo-" 로 되어 있는 속상만 찾게 된다.

pageLoadErrorMessage : 페이지열기 실패했을때의 문자열 ( 기본 : Error Loading Page )

subPageUrlKey : 서브페이지를 참조할 때 URL에 표시할 문자열 ( 기본 : ui-page ) => 잘 이해가 안됨

저작자표시 비영리

'study' 카테고리의 다른 글

나눔바른고딕 (0)	2016.08.10
제이쿼리 모바일 페이지 data-ajax=role 일 경우 재귀 페이지 호출시 jquery 먹통일 경우 해결 방안 (0)	2014.12.01
Jquery SelectBox제어 (0)	2014.07.29
문자열과 관련된 다양한 기능 (0)	2014.03.05
MS SQL 함수 모음 (0)	2014.02.19

스마일데이

jquery 모바일 정리 100% 활용가능

jquery mobile 정리

'study' 카테고리의 다른 글

티스토리툴바

jquery 모바일 정리 100% 활용가능

jquery mobile 정리

'study' 카테고리의 다른 글

'study' Related Articles

티스토리툴바