본문 바로가기

----- IT -----/jQuery Moblie66

jQuery Mobile - API media, active state 알파 버전에서 있었던 Media Query Helper Classes는 beta 버전으로 오면서 사용이 중지 되었다고 합니다. CSS3를 사용해서 할 것을 추천한다고 되어있네요. 이 내용은 orientation과 breakpoint와 $.mobile.media()를 사용한 미디어 쿼리로 구성되어 있는데, 추천되어진 것처럼 CSS3로 충분히 구현 가능하니, 자세한 내용은 기술하지 않을 생각입니다. 관심 있으신 분은 아래 링크에서 보시면 될 것 같습니다. http://jquerymobile.com/demos/1.0b1/docs/api/mediahelpers.html Global “Active” state jQuery Mobile 프레임워크는 어떤 요소가 선택되었을 때 “active”라고 불려지는 테마를 사용.. 2011. 7. 18.
jQuery Mobile - API Methods (API 함수) jQuery Mobile은 사용자 어플리케이션에서 사용할 수 있도록 $.mobile.object의 여러 methods와 properties를 제공합니다. 상세한 인수와 옵션은 JQM 홈페이지에서 참고하세요. http://jquerymobile.com/demos/1.0b1/docs/api/methods.html $.mobile.changePage(method) 페이지 전환시 프로그램적으로 변경합니다. 이 매소드는 폼을 전송하거나 링크를 클릭할 때 발생하는 페이지 로딩이나 페이지 전환시 내부적으로 사용됩니다. // 페이지 이동시 전환효과는 slideup이 되며, about/us.html 페이지로 이동됩니다. $.mobile.changePage( "about/us.html", { transition: "sli.. 2011. 7. 15.
jQuery Mobile - API Event (이벤트 Api) jQuery Mobile 은 여러가지의 사용자 이벤트를 제공합니다. 이런 이벤트에는 다양한 터치와, 마우스, 윈도우 이벤트들이 있는데 모바일 환경 및 데스크탑 환경에서도 사용할 수 있도록 바인딩 할 수 있습니다. Live()와 bind()를 사용해 jQuery 이벤트를 다루듯이 이러한 이벤트들을 바인드 할 수 있습니다. Touch events Tap 원 터치시 touch 이벤트가 발생합니다. Taphold 터치 후 약 1초간 유지할 경우 이벤트가 발생합니다. Swipe 1초 동안 30px이상 수평으로 드래그 할 경우 이벤트가 발생합니다. Swipeleft 왼쪽 방향으로 swipe이 발생하는 경우 swiperight 오른쪽 방향으로 swipe이 발생하는 경우 Orientation change event 모.. 2011. 7. 13.
jQuery Mobile - API Configuring Defaults(기본 설정 변경) JQM은 다른 jquery와 jquery ui를 사용하는 프로젝트와 다르게, 많은 마크업들의 UI를 로드되기 전에 자동적으로 변형합니다. (document.ready 이벤트가 호출되기 전). 이런 변형은 jQuery Mobile의 디폴트 설정을 기반으로 적용됩니다. 이러한 설정을 쉽게 셋팅할 수 있는 방법에 대해 알아봅니다. The mobileinit event jQuery Mobile이 실행될 때, document 객체의 mobileinit 이벤트를 호출하게 됩니다. 이 mobileinit 이벤트를 바인드 함으로서 JQuery Mobile의 디폴트 설정들을 오버라이드 할 수 있습니다. $(document).bind("mobileinit", function(){ //이곳에 변경하고 싶은 설정을 셋팅합니다.. 2011. 7. 8.
jQuery Mobile - Theming Lists(리스트에 테마적용하기) 기본 스타일의 리스트의 디폴트 테마는 구분자는 b 테마로, 리스트 항목은 c 테마 입니다. Divider Inbox 12 Outbox 0 Sent 328 리스트의 테마를 셋팅하기 위해서는 리스트에 data-theme 속성을 사용합니다. Divider Inbox 12 Outbox 0 Sent 328 리스트의 특정 항목에 테마를 적용하기 위해서는 항목 태그에 data-theme 속성을 사용하면 됩니다. Divider Inbox 12 Outbox 0 Sent 328 Trash 34 Theming dividers 리스트 구분자에만 테마를 변경하고자 할 경우에는 data-divider-theme 속성을 사용합니다. Divider Inbox 12 Outbox 0 Sent 328 리스트의 카운트 수에 테마를 변경하고.. 2011. 7. 7.
jQuery Mobile - Inset Lists(인셋 리스트) 만약, 리스트가 다른 타입의 컨텐츠를 갖는 페이지에 속해 작은 마진과 둥그런 모서리를 갖는 content area 내부의 블록 안에 추가된다면, data-inset=”true”속성을 리스트(ul or ol)에 추가하여 삽입된 페이지 모양을 적용합니다. Simple list Acura Audi BMW Cadillac Ferrari Count bubbles Inbox 12 Outbox 0 Drafts 4 Sent 328 Trash 62 Numbered list The Godfather Inception The Good, the Bad and the Ugly Pulp Fiction Schindler's List Divided, formatted content Stephen Weber You've been in.. 2011. 7. 6.
jQuery Mobile - Lists with Forms(폼 리스트) 리스트 내부에 폼을 만들어 넣을 수도 있습니다. Text Input: Textarea: Search Input: Flip switch: Off On Slider: Choose as many snacks as you'd like: Cheetos Doritos Fritos Sun Chips Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Layout view: List Grid Gallery Choose shipping method: Standard: 7 day Rush: 3 days Express: next day Overnight Your state: Alabama Alaska Arizona Arkansas California Colorado Conn.. 2011. 7. 5.
jQuery Mobile - Read-Only Lists(읽기 전용 리스트) List view는 또한 인터렉티브하지 않은 리스트로 사용될 수 있습니다. 보통은 삽입된 리스트의 경우에 사용됩니다. 이 리스트는 링크를 갖지 않는 정렬된 혹은 비정렬된 리스트로 빌드 됩니다. 프레임웍크는 이러한 리스트를 디폴트로 c 테마의 스타일을 적용합니다. 그리고 클릭 가능한 리스트 보다 작은 사이즈의 text와 공간을 사용합니다. Simple list Acura Audi BMW Cadillac Ferrari Count bubbles Inbox 12 Outbox 0 Drafts 4 Sent 328 Trash 62 Numbered list The Godfather Inception The Good, the Bad and the Ugly Pulp Fiction Schindler's List Divide.. 2011. 7. 4.
jQuery Mobile - Search Filter(검색 필터 리스트) JQM은 간단한 client-side의 검색요소를 갖는 필터를 쉽게 제공합니다. 필터가 가능한 리스트를 만들기 위해, 간단하게 data-filter=”true”속성을 리스트에 추가합니다. 프레임웍크는 리스트 위에 검색박스를 추가하고, 사용자 유형으로 현재 검색 문자열을 포함하지 않는 목록 항목을 필터링하는 동작을 추가합니다. Input의 placeholder text는 디폴트로 “Filter items…”라고 보여집니다. 이 문구를 변경하고 싶다며 mobileinit 이벤트에 바인드하여 $.mobile.listview.prototype.options.filterPlaceholder 옵션을 셋팅하거나, data-filter-placeholder 속성을 list view에 사용하여 셋팅할 수 있습니다. 검색.. 2011. 7. 1.
jQuery Mobile - Thumbnails & Icons(썸네일과 아이콘 리스트) 리스트 항목 왼쪽에 thumbnail을 추가하기 위해, 리스트 내부에 첫번째 child 요소로 이미지를 추가하면 됩니다. 그러면 프레임웍크는 80 픽섹의 square로 이미지를 변형합니다. 표준 16x16 픽셀 아이콘을 사용하기 위해서는 이미지 요소에 ui-li-icon의 class를 추가하면 됩니다. Broken Bells Broken Bells Warning Hot Chip Wolfgang Amadeus Phoenix Phoenix Of The Blue Colour Of The Sky Ok Go Elephant The White Stripes Kid A Radiohead XX XX Congratulations MGMT Ashes Grammar A Sunny Day in Glasgow Hot Fuss .. 2011. 6. 30.