본문 바로가기

javascript62

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 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.
jQuery Mobile - Text Formatting & Counts(텍스트와 리스트 카운트) 프레임웍크는 HTML 의미적 마크업을 통해 해더/설명, 보조정보, 카운트와 같은 일반적인 목록 패턴에 대한 텍스트 서식 규칙을 포함하고 있습니다. - 리스트 항목 오른쪽에 숫자 indicator를 추가하기 위해, ui-li-count의 class를 갖는 요소안에 number로 감쌉니다. - 텍스트 계층을 추가하려면, 제목의 폰트를 강조하고 강조를 사용하지 않는 구문을 사용합니다. - 보조 정보는 ui-li-aside의 class를 갖는 요소를 감싸서 리스트 항목의 오른쪽에 추가되어집니다. Friday, October 8, 2010 2 Stephen Weber You've been invited to a meeting at Filament Group in Boston, MA Hey Stephen, if y.. 2011. 6. 29.
jQuery Mobile - List dividers(리스트 구분자) List 항목은 구분선으로 나누거나 리스트 항목 그룹으로 만들 수 있습니다. 어떤 리스트 항목이더라도 data-role=”list-divider” 속성을 추가만 하면 됩니다. 이러한 항목은 b 테마로 스타일 되어지지만, data-dividertheme 속성을 리스트 요소(ul 혹은 ol)에 사용하여 구분자 테마를 지정할 수 있습니다. A Adam Kinkaid Alex Wickerham Avery Johnson B Bob Cabot C Caleb Booth Christopher Adams Culver James D David Walsh Drake Alfred E Elizabeth Bacon Emery Parker Enid Voldon F Francis Wall G Graham Smith Greta Pee.. 2011. 6. 28.