본문 바로가기

----- IT -----113

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.
jQuery Mobile - Split Button Lists(분할 버튼 리스트) 리스트 항목에서 하나 이상의 가능한 액션이 있을 경우, split 버튼은 두가지의 독립적은 클릭 가능한 항목(리스트 항목과 오른쪽의 작은 화살표 아이콘)으로 사용할 수 있습니다. Split list를 만들기 위해, 간단하게 li 태그안에 두번째 링크를 추가하고 프레임웍크는 화살표모양의 아이콘에 링크와 같은 스타일과 세로 구분선을 추가할 것입니다. 그리고 접근성을 위한 텍스트 링크에서 링크의 제목 속성을 셋팅합니다. Broken Bells Broken Bells Purchase album Warning Hot Chip Purchase album Wolfgang Amadeus Phoenix Phoenix Purchase album Of The Blue Colour Of The Sky Ok Go Purchas.. 2011. 6. 27.