모바일 애플리케이션 디자인 / 개발자를위한 jQuery Mobile 초보자 안내서

지난 2 ~ 3 년 동안 모바일 웹 사이트에 대한 브라우저 및 OS 지원이 대폭 증가했습니다. 특히 애플의 아이폰 OS와 구글의 안드로이드 플랫폼이 주목할 만하다. 그러나 PalmOS와 Blackberry 같은 것들은 여전히 ​​혼합되어있다. 최근까지 단일 모바일 테마를이 모든 플랫폼에 일치시키는 것은 매우 어려웠습니다..

자바 스크립트가 시작되었지만 지금까지 진정한 통합 라이브러리가 없었습니다. jQuery Mobile은 jQuery의 모든 최상의 기능을 사용하여 모바일 기반 웹 소스로 이식합니다. 라이브러리는 기본 HTML 요소에 애니메이션, 전환 효과 및 자동 CSS 스타일을 포함하는 프레임 워크와 비슷합니다. 이 가이드에서는 자신 만의 jQuery 모바일 앱을 편안하게 디자인 할 수있는 방법으로 플랫폼을 소개하고자합니다..

기능 및 OS 지원

다른 프레임 워크에서 jQuery Mobile을 배우는 것이 좋습니다. 이 코드는 jQuery 코어를 기반으로 작성되었으며 스크립트를 작성하고 버그를 수정하는 적극적인 개발자 팀이 있습니다. HTML5 지원, Ajax 기반 네비게이션 링크, 터치 / 스 와이프 이벤트 핸들러 등 다양한 기능이 제공됩니다..

지원은 전화간에 다양하며 A-C의 3 가지 범주의 차트로 나뉩니다. A는 jQuery Mobile을 완벽하게 지원하는 최상위 계층이며 B는 Ajax를 제외한 모든 기능을 제공하지만 C는 기본 HTML이며 JavaScript는 거의 제공하지 않습니다. 운 좋게도 널리 사용되는 대부분의 운영 체제가 완벽하게 지원됩니다. 아래 예제를 몇 가지 추가했습니다..

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• 블랙 베리 6.0, 블랙 베리 7
• Palm WebOS 1.4-2.0, 3.0

더 배우고 싶다면 공식 문서 페이지를 읽으십시오. 횡설수설로 쓰여진 것이 아니기 때문에 실제로 따라하기 쉽습니다. 이제 jQuery 모바일 페이지 작성의 기본과 작은 애플리케이션을 작성하는 방법에 대해 살펴 보겠습니다.!

표준 HTML 템플리트

첫 번째 모바일 앱을 작동 시키려면 시작해야하는 템플릿이 필요합니다. 여기에는 jQuery 기본 코드와 모바일 JS 및 CSS, jQuery CDN에서 호스팅되는 모든 외부 코드가 포함됩니다. 아래 예제 코드를 확인하십시오..

여기에있는 유일한 외부 요소는 두 개의 메타 태그 여야합니다. 상단 뷰포트 태그는 모바일 브라우저에서 전체 확대 / 축소 효과를 사용하도록 업데이트합니다. 값 설정 width = device-width 페이지 폭을 전화 화면 너비와 정확히 일치하게 설정합니다. 그리고 무엇보다 jQuery Mobile은 이동하는 레이아웃에 적응할 수 있기 때문에 줌 기능을 비활성화하지 않습니다..

다음 메타 태그 X-UA 호환 Internet Explorer가 HTML을 가장 최근의 반복으로 렌더링하도록합니다. 오래된 브라우저 및 특히 모바일은 친숙하지 않은 렌더링 버그를 해결하려고합니다..

본문 내용 만들기

이제 jQuery 모바일이 까다로울 수 있습니다. 각 HTML 페이지는 반드시 모바일 사이트에서 1 페이지가되는 것은 아닙니다. 이 프레임 워크는 HTML5의 데이터 속성을 사용합니다.이 속성은 추가 할 때 데이터- 미리. 비슷한 방식으로 data-role = "page" 단일 HTML 파일에서 여러 div로 설정할 수 있으므로 한 페이지 이상을 제공합니다..

그런 다음 앵커 링크와 고유 ID가있는이 페이지 사이를 이동할 것입니다. 이 설정은 기본적이고 간단한 앱에 좋은 아이디어입니다. 3-5 페이지 만 있으면 모든 파일을 하나의 파일에 저장하십시오. 당신이 많은 양의 내용을 가지고 있지 않다면, 시간을 절약하기 위해 PHP include를 사용해보십시오..

분실 한 경우 아래 코드 예제를 확인하십시오..

 
 
 
톱 제목 표시 줄
 
 
 
다른 페이지 표시??
 
힌트 : 아래 버튼을 클릭하십시오.!
 
회사 소개
 
  
 
 
 
Page 2 여기에
 
 
 
단지 몇 가지 추가 콘텐츠.
 
내 말은, 너는 할 수있다. 돌아 가라. 언제든지.
 
 
   

색인 페이지의 앵커 링크를 잠깐 살펴보십시오. 공지 특성을 추가했습니다. 데이터 역할 = "버튼" 링크를 버튼으로 설정합니다. 하지만 기본 스타일을 사용하는 대신 데이터 테마 = "c". 이것은 jQ Mobile 내에서 기본적으로 CSS 스타일로 패키징 된 5 가지 (테마 a-e) 템플릿 사이를 전환합니다.

내 단추는 전체 페이지 너비에도 걸쳐 있습니다. 비헤이비어를 제거하려면 요소를 블록에서 인라인 표시로 설정해야합니다. 이 작업을 수행하기위한 속성은 다음과 같습니다. data-inline = "true" 어떤 앵커 버튼에 추가 할 수 있습니다..

머리글 및 바닥 글 막대

응용 프로그램의 맨 위와 맨 아래에서 머리글과 바닥 글 내용을 추가해야합니다. 이 디자인 스타일은 종종 Apple의 모바일 앱 스토어를 사용하여 인기를 얻은 iOS 앱에 기인합니다. jQ Mobile은 data-role 속성을 사용하여 머리말, 꼬리말 및 페이지 내용을 정의합니다. 이 분야에 대해 간략하게 살펴 보겠습니다..

톱 바 버튼

기본적으로 상단 표시 줄은 다른 모바일 앱과 유사한 방식으로 2 개의 링크 집합을 지원합니다. iOS는 기본적으로 “뒤로” 왼쪽에있는 버튼과 종종 “옵션들” 또는 “구성” 오른쪽으로.

 
 설정 
Page 2 여기에
 
 

위 코드는 헤더 정보와 함께 About 페이지의 div 컨테이너에 초점을 맞추고 있습니다. 추가 HTML 속성 data-add-back-btn = "true" 페이지 데이터 역할에 추가 할 때만 작동합니다. 목적은 브라우저의 뒤로 버튼과 비슷한 방식으로 작동하는 뒤로 버튼을 자동으로 포함시키는 것입니다..

콘텐츠 영역에서 사용한 것과 유사한 코드로 뒤로 버튼을 수동으로 추가 할 수있었습니다. 하지만 여러 페이지에서 설정하는 데 시간이 오래 걸립니다. 헤더 섹션 내의 모든 앵커 링크는 왼쪽 / 오른쪽 버튼 위치로 기본 설정됩니다. 사용하여 class = "ui-btn-right" 이렇게하면 내 설정 버튼의 위치가 바뀌어 뒤로 버튼을위한 여유 공간이 생깁니다. 또한 2 차 테마 스타일을 사용하여 몇 가지 추가 스컹크를 제공합니다.!

꼬리말 탐색

바닥 글 영역은 처음에는별로 유용하지 않습니다. 저작권 정보와 더 중요한 링크를 저장할 수있는 곳이지만 콘텐츠 영역의 맨 아래에 쉽게 추가 할 수 있습니다. 따라서 바닥 글을 사용하면 어떤 이점이 있습니까??

지금까지 보았던 가장 좋은 예는 페이지 링크를 제어하는 ​​탭 링크가있는 탐색 시스템으로 바닥 글 공간을 활용하는 것입니다. 전체 화면 효과를 선택하고, 아이콘을 추가하고, 게재 위치를 조정하고, 몇 가지 다른 속성을 선택할 수있는 많은 옵션이 있습니다. 그러나 3 개의 버튼이있는 간단한 바닥 글 탐색기를 작성하여이 방법의 아이디어를 얻자..

• 라이브 데모 미리보기

다음은 약 페이지 섹션에 대한 몇 가지 바닥 글 코드입니다.. data-role = "navbar" UL 요소 자체가 아닌 정렬되지 않은 목록을 담고있는 컨테이너 요소에 추가되어야합니다. 목록 내의 각 링크는 탭 막대로 간주되며 링크의 총 수에 따라 균등하게 나뉩니다. 추가 수업 우리 몸 b 우리는 몇 가지 사용 가능한 스타일 사이를 전환 할 때 미적 효과를 추가합니다..

첫 번째 버튼에 주목하면 속성이 있습니다. data-direction = "reverse". 이전처럼 뒤로 버튼 설정을 사용하여 홈 페이지로 돌아갈 수는 있지만 대신 페이지 ID를 사용했습니다. #색인. 기본적으로 응용 프로그램 윈도우는 오른쪽으로 이동하여 애니메이션이 뒤로 이동하기를 기대하기 때문에 꽤 끈적 해 보입니다. 시간이 있다면 더 많은 애니메이션 효과로 놀 수 있습니다. jQuery 문서의 전환 정보 페이지를 확인하십시오..

Ajax 및 동적 페이지

첫 번째 세그먼트는 jQuery로 모바일 앱을 구축하는 데 핵심 포인트를 실제로 열었습니다. 하지만 외부 페이지에서 데이터를로드하는 새로운 앱을 시작하고 싶습니다. 나는 매우 간단한 PHP 스크립트를 사용하여 $ _REQUEST [] 가변적 인 작은 Dribbble 샷을 표시합니다. 아래의 스크린 샷은 우리가 무엇을 만들지에 대한 아이디어를 제공합니다..

먼저 기본 템플릿에 index.html 페이지를 설정합니다. 이 홈 화면의 경우 목록보기 설정을 사용하여 각 링크를 순서대로 표시합니다. 이 작업은 콘텐츠 영역에서 data-role = "listview" 특성을 목록 컨테이너에 추가하십시오. 이전과 같은 머리글을 잘라내어이 새 색인 페이지의 모든 코드를 아래에 추가했습니다..

 
 
 
2011 년 10 월 촬영
 
 
 
 
첫 번째 이미지
 
두 번째 이미지
 
세 번째 이미지
 
네 번째 이미지
 
 
  
   

내 목록보기의 각 앵커 링크는 동일한 파일 (index.php)을 가리 킵니다. 하지만 매개 변수를 전달 중입니다. imgid 요청 변수로. image.php 파일에서 ID를 가져 와서 4 개의 사전 설정 값에 대해 테스트합니다. 일치하는 이미지가 있으면 일치하는 이미지 URL과 제목을 사용하고, 그렇지 않으면 기본 Dribbble 샷 만 표시합니다..

이미지 로더 스크립트

image.php 스크립트에는 여전히 기본 jQuery 모바일 템플릿이 코드에 추가되어 있습니다. 그것은 우리의 백 링크 속성의 추가를 제외하고는 실제로 매우 유사한 헤더와 꼬리말을 공유합니다. data-add-back-btn = "true". 이 버튼은 우리가 index.html에서 처음 온 경우에만 표시됩니다! 직접 image.php를로드 해보십시오. 아무 것도 없으므로 아무 것도 나타나지 않습니다. “뒤로” 로 이동.

필자는 PHP 로직을 먼저 검토함으로써 코드를 좀 더 이해할 수 있다고 생각합니다. 우리는 스위치 / 케이스 메소드를 사용하여 4 개의 서로 다른 ID를 확인하고 헤더 제목, 이미지 URL 및 원본 아티스트 소스 링크 제공.

모든것이 꽤 간단 해 보입니다 - 심지어 초보자 인 PHP 개발자도 따라 할 수 있어야합니다! 어쨌든 jQuery 코드가 중요하지 않다는 것을 이해하지 못한다면 걱정하지 마십시오. 이제이 새로운 페이지에서 작성한 템플릿을 살펴보아야합니다. 위의 전체 PHP 블록 다음에 모든 HTML 코드가 추가됩니다. 나는 ID를 사용했다. “이미지들” 콘테이너를 위해 각 새로운 사진으로 변화하기 위하여 머리말조차 설정하십시오.

 
 
 
 
 
 원본보기
 
 
  
 

이 데모가 얼마나 단순한 지 볼 수 있습니다. 그러나 전체 목적은 jQuery 모바일의 확장 성을 입증하는 것입니다. PHP를 쉽게 믹스에 추가 할 수 있으며 단 몇 시간 만에 정말 멋진 앱을 만들 수 있습니다..

멋진 섬네일 디자인 목록

마지막으로 구현할 수있는 효과 중 하나는 미리보기 페이지를 활발히 사용하기 위해 미리보기 이미지를 사용하는 것입니다. 또한 제목과 설명 상자에 텍스트를 나눠 아트웍 제목과 아티스트 이름을 모두 표시합니다..

Photoshop을 열고 80x80px 문서를 만듭니다. 각 이미지를 신속하게 크기 조정하고 각 이미지와 일치하도록 축소판을 저장하겠습니다. 그런 다음 목록보기 항목을 업데이트하려면 몇 가지 요소를 추가해야합니다..

아래 코드와 데모 예제를 통해 내가 무엇을 의미하는지 확인하십시오..

[라이브 데모 미리보기]

 
 
  
Wunderkit 작업
 
Sebastian Scheerer 저
 
  
Colleeeeeeeeeeeeege
 
스콧 힐
 
  
Facebook 용 포럼 앱
 
Ionut Zamfir 작성
 
  
지저귀다
 
샘 존스
 
 
 

에 대한 수업 아이 - 리 - 헤딩 과 아이 - 리 - desc 기본적으로 jQuery Mobile 스타일 시트에 추가됩니다. 이것은 이미지 클래스와 유사합니다. 아이 - 리 - 엄지 이는 이미지 높이에 따라 각 목록보기 막대의 크기를 자동으로 조정합니다. 이제부터는 애니메이션, 페이지 효과, 스타일 시트 등으로 프론트 엔드에서 더 많은 것을 만들 수 있습니다..

또는 새 이미지를 업로드하고 목록에 포함 할 축소판 그림을 자동으로 자르기 위해 백엔드 시스템을 구축하기 시작할 수도 있습니다. jQuery Mobile에는 많은 유연성이 있으므로 자바 스크립트 라이브러리로만 레이블링 할 수는 없습니다. 빠르고 확장 가능한 모바일 앱을 구축하기위한 전체 HTML5 / CSS / jQuery 프레임 워크의 역할.

결론

이 글을 쓰는 시점에서 jQuery Mobile 팀은 공식적으로 코드 라이브러리의 RC1.0을 발표했습니다. 이것은 모든 주요 버그 수정 사항이 부숴 졌거나 테스터가 정식 버전을 준비하고있는 경우 대부분을 의미합니다. 이 때문에 웹에서 많은 정보를 찾을 수 없습니다..

그러나 몇 달이 지나면 웹 개발자는 이러한 추세를 따라 잡을 것입니다. 스마트 폰이 크게 증가하면서 모바일 애플리케이션과 심지어 모바일 웹 레이아웃도 인기를 얻고 있습니다. 웹 개발자는 Android / iOS 앱을 제작하기위한 완전한 프로그래밍 언어를 배울 시간이 없습니다. 따라서 jQuery Mobile은 대다수의 모바일 업계 소프트웨어에 대한 지원을 포함하여 날씬한 대안이며 적극적인 개발자 커뮤니티를 통해 매일 계속 성장하고 있습니다..