jquery 모바일 웹(5)_jquery

주문목록

 　　<div data-role="content">
　　　　<ol data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ol>
 　　</div>

읽기 전용 목록

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

분리 가능한 버튼 목록

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

버블 개수 목록 포함

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

구성 옵션.

jquery Mobile이 실행되기 시작하면 문서 객체에서 mobileinit 이벤트가 트리거됩니다. 이 이벤트를 통해 기본 해당 기능을 재정의할 수 있습니다. 다양한 속성 매개변수를 구성합니다.

사용방법:

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

개발자에게 $.mobile 객체를 제공합니다. 이 객체의 목적은 다양한 옵션과 기본 구성을 구성하는 것입니다.

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

　　구성 가능한 옵션:

1.ns

유형: 문자열, 기본값은 비어 있지 않은 문자열입니다.
사용법: $.mobile.ns="mynamespace"
설명: 네임스페이스를 사용자 정의하고 네임스페이스를 사용하지 마세요.

2.자동 초기화페이지

유형: 부울 유형, 기본값은 true입니다.
사용법: $.mobile.autoInitializePage = false
설명: 기본적으로 페이지 DOM 요소가 준비되면 프로그램은

로 설정된 경우 $.mobile.initializePage 함수를 자동으로 로드합니다.

거짓

페이지가 생성되지 않고 숨겨진 상태로 유지됩니다.

3.subPageUrlKey

유형: 문자열, 기본값은 ui-page입니다.

사용법: $.mobile.subPageUrlkey = "페이지"

설명: URL 주소에서 jQuery Mobile 뷰의 주요 매개변수 이름을 변경합니다. 선택한 매개변수가 subPageUrlKey = "page"로 변경되면 URL 주소가

이
으로 변경됩니다.

　　　example.html?page=subpage.

4.activePageClass

유형: 문자열, 기본값은 ui-page-active

사용법: $.mobile.activePageClass = “ui-ns-page-active”.

설명: 주요 기능은 활성 상태 페이지 및 전환 상태의 보기 CSS 스타일을 사용자 정의하는 것입니다.

5.activeBtnClass

유형: 문자열, 기본값은 ui-btn-active

사용법: $.mobile.activeBtnClass = "ui-ns-page-active"

설명: 이 옵션의 주요 기능은 활동적인 소녀의 스타일을 맞춤화하는 것입니다.

6.ajax 활성화

유형: 부울 값, 기본값은 true

사용법: $.mobile.ajaxEnabled = false

설명: 연결을 클릭하거나 양식 또는 버튼을 제출할 때 Ajax를 사용하여 페이지를 로드하거나 데이터를 제출할지 여부를 설정합니다.

　7.hashListeningEnabled

유형: 부울 값, 기본값은 true입니다.

사용법: $.mobile.hashListeningEnabled = false

설명: location.hash 변경 사항을 자동으로 모니터링하고 처리할지 여부를 설정합니다. false로 설정하면 수동 방법을 사용하여 해시 변경 사항을 처리하거나 단순히 연결을 사용할 수 있습니다

주소가 리디렉션됩니다.

8.defaultPageTransition

유형: 문자열, 기본값은 슬라이드

사용법: $.mobile.defaultPageTransition = “fade”

설명: 이 옵션 매개변수는 주로 페이지 전환의 기본 효과를 설정합니다. 없음으로 설정하면 옵션 매개변수 슬라이드업(왼쪽 및 오른쪽으로 슬라이드)이 적용되지 않습니다.

슬라이드업(아래에서 위로 슬라이드) 슬라이드다운(위에서 아래로) 팝(가운데에서)

9.touchOverflow 활성화

유형: 부울 값, 기본값은 false입니다

사용법: $.mobile.touchOverflowEnabled = true

설명: 기기의 기본 스크롤 기능을 사용할지 여부입니다.

　10.defaultDialogTransition

유형: 문자열, 기본값은 pop입니다

사용법: $.mobile.defaultDialogTransition = "none"

설명: Ajax 대화 상자의 팝업 효과를 설정합니다. 없음으로 설정하면 과도한 효과가 발생하지 않습니다.

　11.minScrollBack

유형: 문자열, 기본값은 150

사용법: $.mobile.minScrollBack = “200”

설명: 스크롤 위치 메모리 기능은 스크롤이 설정된 높이를 초과하는 경우에만 실행됩니다.

　12.loadingMessage

유형: 문자열기본값은 로드입니다

사용법: $.mobile.loadingMessage = "로딩 중"

설명: 페이지 로딩 상태의 텍스트 내용을 설정합니다. false로 설정하면 아무것도 표시되지 않습니다.

　13.pageLoadErrorMessage

유형: 문자열, 기본값은 페이지 로드 오류입니다

사용법: $.mobile.pageLoadErrorMessage = "페이지 로딩 실패"

설명: Ajax 페이지 요청이 실패할 때 표시되는 프롬프트의 텍스트 내용을 설정합니다.

14.A급

유형: 부울 값, 기본값은 $.support.mediaquery 값입니다.

사용법: $.mobile.gradeA

설명: 브라우저가 지원되는 모든 조건을 충족하면 True가 반환됩니다.

JQuery Mobile과 HTML5의 3가지 단점

1. 기본 앱보다 느리게 실행됩니다. 제 생각에 가장 큰 단점은 최신 Android 및 iOS 하드웨어(듀얼 코어 Tegra 2 Android 휴대폰, 듀얼 코어 iPad2 태블릿)에서도 JQuery Mobile 앱이 상당히 느리다는 것입니다.

네이티브 프로그램에서. 특히 Android의 경우 브라우저가 iOS보다 느리고 버그가 더 많습니다(Google은 웹에 중점을 둔 회사이지만). 내 프로그램을 구형 Android 기기에서 테스트하지 않았으므로 전혀 실행되지 않을 수도 있습니다(예: Android G1). 나는 향후 12~24개월 내에 하드웨어 속도가 빠르게 향상될 것이며(예를 들어 쿼드 코어 장치는 2011년에 곧 출시될 예정) 성능이 곧 문제가 되지 않을 것이라고 믿습니다. 그런데 오늘은 정말 단점이 생겼습니다. iOS에만 초점을 맞추고 있다면 브라우저 성능을 기대할 수 있지만 적어도 그 점에서는 (Android, BlackBerry 등과는 달리) 안정적입니다.

2. 이상함(크로스 브라우저, 크로스 플랫폼 개발): JQuery Mobile은 아직 베타 버전이므로 버그가 많이 발생했습니다. 즉, JQuery 팀은 GitHub에서 제기된 문제에 여전히 적극적으로 대응하고 있습니다. 가장 큰 문제 중 하나는 다양한 모바일 플랫폼에서 다양한 브라우저의 이상한 동작이라고 생각합니다. 이 문제는 항상 비판을 받아 왔습니다. 앱이 약간 이상해 보일 수 있습니다. JQuery Mobile 팀이 위젯과 테마를 훌륭하게 처리했다고 생각하지만 기본 앱과는 상당히 다르게 보입니다. 이 문제가 사용자에게 얼마나 큰 영향을 미치는지는 알 수 없지만 알아두어야 할 사항입니다.

3. 제한된 기능과 기본 프로그램: 브라우저에서 실행되는 JavaScript는 기기의 많은 기능에 완전히 액세스할 수 없습니다. 대표적인 예가 카메라다. 그러나 PhoneGap과 같은 도구는 많은 일반적인 문제를 해결하는 데 도움이 될 수 있습니다. 저는 실제로 기본 Facebook 바인딩을 사용하여 PhoneGap을 통해 iOS 및 Android에 여러 버전의 앱을 배포하기 시작했으며 그 결과에 깊은 인상을 받았습니다. 앞으로 블로그에서 PhoneGap 사용 경험에 대해 글을 쓰겠습니다.