티스토리 뷰
Ajax, hash들과 & 역사(관련 이야기)
[jQuery Mobile의 네비게이션 모델]
jQuery Mobile안에 있는 "page"는 data-role 속성을 일반적으로 각각 일반적인 표식, 양식 그리고 사용자 jQuery Mobile 위젯을 포함하는 "header", "content" 그리고 "footer"의 역할을 가진 div 요소들이 되는 경향이 있는 "page"로 설정한 요소(보통 div)로 구성되어 있다.
page를 불러오는 기본 작업흐름은 다음과 같습니다: 먼저, 페이지는 보통의 HTTP 요청을 가지고 요청되고, 그 뒤 "pages"는 요청되어 page의 DOM으로 들어가집니다. 이렇게 때문에, DOM은 그 ID에 대한 연결에 의해 재방문될 수 있는 매 시간에 다수의 "pages"를 가질지도 모릅니다.
url이 요청되면, 응답에 하나 또는 그 이상의 "pages"가 있을 것입니다, 그러나 하나만 보여질 것입니다. 하나 이상의 "page"를 저장하는 것에 대한 이점은 여러분이 방문될 수도 있는 고정 페이지를 미리 가져오는 것을 허용한다는 것입니다.
[Hash로 운전되는 page 항해]
jQuery Mobile내의 모든 항해는 location.hash에서의 변경에 기반을 두고 있습니다. 가능한 언제나, hash의 변경사항들은 현재 "page"와 DOM에서 이미 제시되었거나 Ajax를 통해 자동으로 불러와졌을 지도 모르는 다음 것 사이의 부드러운 변화를 시작할 것입니다.
jQuery Mobile에 의해 생성된 Hash 값들은 항상 불러와진 첫번째 "real" 페이지의 URL에 연관된 전체 경로들로 통일됩니다. hash는 항당 유효한 URL로 유지됩니다, 그래서 jQuery mobile의 어떤 "page"도 링크에서 책갈피되거나 참조될 수 있습니다.
일반적으로, hash의 변경사항들은 jQuery mobile에서 링크가 클릭될 때 언제나 생성됩니다. 클릭될 때, jQuery mobile은 link가 local URL을 참조하는지 확인할 것이고 그런다면, 발생하는 link의 기본 클릭 동작을 막고 location.hash를 link의 href 속성값으로 설정할 것입니다.
그러나 그것이 hash 값을 설정할 수 있기 이전에. jQuery mobile은 관련 경로를 처음 불러와진 페이지의 전체 절대 경로로 변환하는 논리를 적용해야합니다, 모든 Ajax 요청들은 초기 페이지에 연관되어이기 때문입니다.
Hash 값들은 Ben Alman의 hashchage 특별한 이벤트 플러그인(jQuery Mobile core에서 포함되는)을 사용하는 window 객체로의 도약인 hashchange 이벤트를 통해 다뤄집니다.
hash 변경이 발생할때(그리고 또한 첫번째 페이지가 불러올때), hashchange 이벤트 핸들러는 실행하고 hash가 DOM에 이미 있는 요소의 ID를 참조하는지 확인할 것이고, 그렇지 않다면 hash에서 참조되는 url에 대한 ajax 요청을 만들 것입니다.
Ajax 요청이 완료될 때, 응답은 그 내용(data-role 속성이 "page"와 같은 자식 요소)의 하위 설정으로 걸러지며 그 요소는 hash와 같은 주어진 ID 속성이고 DOM에 삽입됩니다.
새로운 페이지가 보여지기 전에, <base> HTML 태그는 새로운 불러와진 page의 경로와 일치되도록 갱신되어 페이지에서 참조되는 어떤 자산(css.images.js.etc)이 적절한 path로부터 요청되어질 것입니다.
참조된 페이지가 DOM에 제시될 때, changePage 함수는 현재 활동 페이지와 hash에서 참조되는 페이지간의 변환에 사용됩니다. 페이지 변화들은 CSS 애니메이션에 적용하는 추가/삭제되는 클래스들을 통해 발생합니다.
예를 들어, 왼쪽으로 미끄러지는 변화에서, 기존 페이지는 클래스 "slideleft"와 "out"이 주어지고, 전체 페이지는 클래스 보여지는 새로운 "active" 페이지로 표시하는 "ui-page-active"의 클래스 뿐아니라 "slideleft"와 "in"가 주어집니다.
애니메이션이 완료될때, "in"과 "out"클래스들은 삭제되고 기존 페이지는 "ui-page-active" 클래스를 잃어버립니다.
[기본 url 관리의 개발자 설명]
jQuery Mobile은 생성된 절대 URL 경로들과 <base> 요소의 href 속성에대한 조작의 조합을 사용하는 http 요청들을 관리합니다.
이 두 방법의 조합은 여러분이 불러오는 페이지들에대한 전체 경로 정보를 포함하는 URL들, 그리고 이 불러와진 페이지들에 의해 만들어진 자산 요구에 직접적으로 적합한 기본 요소를 만드는 것을 허락합니다.(이미지들이나 스타일시트들 같은).
jQuery Mobile core는 http 요구들에 관계되는 표준으로 사용되어지는 기본 url 조작에 관한 3개의 내부적 기능들을 포함하고 있습니다:
getBaseURL:"#"를 제거하고, "."나 "&" 문자(jQuery mobile은 그 부분이 파일이름이라고 가정한다)를 포함했다면 마지막 "/" 문자 뒷 부분의 어떤 url도 삭제한 location.hash를 반환하는 기능.
setBaseURL: <base> 요소의 href 속성을 getBaseURL()의 값으로 설정
resetBaseURL: <base> 요소의 href 속성을 location.pathname으로 설정(초기-http-요청된 페이지에 관련된 경로)(initially-http-requested page).
이것들은 페이지가 요청하고 변경하고 있는 그 시간에 호출됩니다. DOM이 준비된 상태에서, 초기 페이지를 불러오는 동안, <base>요소는 생성되어 <head> 페이지에 추가됩니다.
그후 바로 resetBaseURL()이 <base> 요소의 href를 location.pathname으로 설정하기 위해 호출됩니다.
hash 값의 변경은 먼저 resetBaseURL()라고 부르고 jQuery Mobile이 Ajax가 hash의 전체값(이미 전체경로이고, 기본 경로가 아닌것을 요청하는)을 요청하도록하는 것을 허용하는 우리의 hashchange 이벤트 핸들러를 실행합니다.
그 요청이 전송된 후, <base> 요소의 href속성을 getBaseURL()의 값으로 재설정하고 이미지들, 스타일시트들, 그리고 적절한 기본 경로로 요청되는 페이지에 내장된 스크립트들에 대한 어떠한 참조도 허용하는 setBaseURL()이 호출됩니다.
[자동생성된 페이지들과 하위 hash url들]
몇 플러그인들은 동적으로 페이지의 내용을 깊은 연결들을 통해 도달될 수 있는 분할 탐색 페이지들에 쪼개넣는 것을 선택할지도 모릅니다.
하나의 예로 이것은 구성된 UL(또는 OL)을 각각 ID가 부여되어서 jQuery Mobile의 어떤 일반적인 "page"같은 것에 연결될 수 있는 분할 페이지들로 쪼개넣을 Listview 플러그인이 될 수도 있습니다.
그러나, 이 페이지들에 연결하기 때문에, 그것들을 만드는 페이지는 반드시 먼저 서버에 요청 되어야만 합니다.
이 작업을 하기위해, 플러그인들에 의해 자동생성된 페이지들은 <div id="page.html&subpageidentifer"> 같은 특별한 ID 구조를 따르는 것을 사용합니다.
또한, 예를들어, listview 플러그인에 의해 생성된 페이지는 이런 ID를 가질지도 모릅니다:
id="artists.html&ui-page=listview-1"
페이지가 요청되었을 때, jQuery Mobile은 URL을 "&ui-page"에 나누는 것을 알고 그 키(&ui-page) 이전에 있는 URL의 특정부분에 대한 HTTP 요청을 만듭니다.
위에서 언급한 listview 예제의 경우, URL은 다음과 같을 것입니다:
http://example.com/artists.html&ui-page=listview-1 ... 그리고 jQuery Mobile은 id="artists.html&ui-page=listview-1"를 가진 div를 만든 다음 활성 페이지로 표시할 하위 페이지를 만들 atists.html을 요청할 것입니다.
&ui-page= 이후 뿐만 아니라 전체 URL 경로를 포함하는 요소의 ID를 주목하십시오. 이것은 jQuery Mobile이 URL들을 페이지 ID들에 일치시키는 단일 동일 방법론을 사용하는 것을 허용합니다.
[Ajax 탐색기가 사용되지 않을 때의 경우]
특정 조건하에, 보통 http 요청들은 Ajax 요청들 대신에 사용될 것입니다. 이것이 사실인 경우는 외부 웹사이트들에 있는 페이지에 연결할 때입니다.
여러분은 또한 아래의 link 속성들을 통해 보통 http 요청들이 만들어 지는 것을 특화시킬 수 있습니다:
rel=external
target("_blank"같은 어떤 값과 함께)
note: 우리는 아마도 data-request-type="http"같은 사용자 속성을 추가해야 할 것입니다
[양식 제출]
ajaxform 플러그인을 사용하고 있을때, 양식 제출은 Ajax 요청들을 통해 자동적으로 될 수 있고, 결과는 변화를 유발하도록 기존 페이지에 추가되거나 새로운 페이지에 주입될 수 있습니다.
전자의 경우, 현재 페이지의 "content" div는 서버의 응답 HTML에 있는 "content" div로 대체될 것입니다.
[알려진 제약사항들]
jQuery Mobile의 페이지 네비게이션 모델에 의해 만들어진 비표준 환경은 여러분이 페이지를 만들 때 알아야하는 몇가지 상황들을 소개합니다.
■ 파일명 url(href="typeofcats/index.html" 대신 href=typeofcats" 같은)없이 디렉토리들에 연결할 때, 여러분은 따라오는 슬래쉬를 반드시 제공해야합니다.
이것은 jQuery Mobile이 url안의 마지막 "/" 문자 후가 파일명이라고 가정하고 참조될 미래의 페이지들로부터 기존 url을 만들때 그 영역을 삭제할 것입니다.
■ jQuery Mobile로 움직이는 사이트의 페이지들에 의해 참조되는 어떤 유일한 자산들도 "page" 요소("page"의 data-role 속성을 가진 요소) 안에 위치해야합니다.
예를들어 특정 페이지에 특별한 스타일들이나 스크립트들에 대한 연결들은 그 div안에서 참조되어야 합니다.
■ 반면, 어떤 유일하지 않은 자산들도(site-wide를 사용한) 스크립트들을 한번이상 실행하는 것을 막기위해 HTML 문서의 <head> 영역안이나 "page" 에리먼트의 바깥 가장 최근(가까운곳)에서 참조되어야 합니다.
■ 하위 hash url 참조에서 사용된 "ui-page" 키 이름은 여러분이 원하는 어떤 값도 설정될 수 있어서, 여러분의 URL 구조에 합성됩니다.이 값은 jQuery.mobile.subPageUrlKey.에 저장됩니다.
'Javascript' 카테고리의 다른 글
| 스마트폰 터치, jquery touchmove 제어 (0) | 2012.03.20 |
|---|---|
| jQuery Mobile 기본 템플릿 사용 요약 (0) | 2011.04.14 |
| a태그에서 onclick으로 함수 실행할때 href 동작 안하도록 (0) | 2011.03.14 |
| javascript의 new Date()를 이용한 시간 출력 소스 초간단!! html 바로 적용 가능 (0) | 2011.03.14 |
| 따라다니는 날개 배너 (0) | 2011.03.14 |
- Total
- Today
- Yesterday
- rm으로 삭제
- MySQL
- 삭제한 파일 복원
- 시도 이름
- JavaScript
- 법정동코드
- HTML
- MariaDB
- Android
- delete
- 안드로이드 개발
- app
- r
- 안드로이드
- apache
- Tomcat
- c++
- API
- LAPM
- 시군구 이름
- install
- Non-Interactive
- java
- 앱개발
- json
- 파일삭제
- 리눅스
- Linux
- 지역고유코드
- Android 개발
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |