본문 바로가기

모바일웹60

jQuery Mobile - Nested Lists(내장된 리스트) List 아이템 안에 ul 태그나 ol 태그를 사용해 nested list를 만들수 있습니다. 자식 list와 해당 list를 클릭할 때 프레임워크는 헤더에 부모의 제목과 하위 요소의 목록이 채워진 새로운 UI 페이지를 생성합니다. 이런한 동적 nested list는 네비케이션의 보조 레벨로서 b 테마의 스타일을 적용받게 됩니다. List는 여러 레벨의 깊이를 갖을수 있고 모든 페이지와 링크는 프레임웍크에 의해 자동적으로 처리됩니다 Animals All your favorites from aarkvarks to zebras. Pets Canary Cat Dog Gerbil Iguana Mouse Farm animals Chicken Cow Duck Horse Pig Sheep Wild animals Aa.. 2011. 6. 25.
jQuery Mobile - Basic Linked Lists(링크 리스트) List view는 data-role=”listview”속성을 갖는 linked list 아이템을 포함하는 비정렬된 리스트입니다. JQM은 오른쪽 화살표 지시자를 추가하고, 모바일 환경에 적합한 스타일을 적용하여, 브라우저창의 가로 길이를 최대로 사용합니다. 리스트의 아이템을 탭(터치)하면 해당 아이템의 링크를 클릭한 것 처럼 동작하고 AJAX방식으로 페이지를 요청합니다. 새로운 페이지는 DOM으로 페이지에 추가되고, 페이지 전환 애니메이션이 보여집니다. Acura Audi BMW Cadillac Chrysler Dodge Ferrari Ford GMC Honda Hyundai Infiniti Jeep Kia Lexus Mini Nissan Porsche Subaru Toyota Volkswagon Vo.. 2011. 6. 24.
jQuery Mobile - Form Plugin Methods(폼 플러그인 메소드) JQM이 사용자 정의 컨트롤의 폼 컨트롤러를 자동으로 변환해준 후, 플러그인 메소드를 통해 많은 속성들을 조작할 수 있습니다. 아래는 현재 사용가능한 메소드들입니다. Github을 통해 업데이트 상황을 확인할 수 있습니다. Selectmenu Methods open : $('select').selectmenu('open'); close : $('select').selectmenu('close'); refresh value : $('select').selectmenu('refresh'); refresh and force rebuild : $('select').selectmenu('refresh', true); enable : $('select').selectmenu('enable'); disable : $.. 2011. 6. 16.
jQuery Mobile - Ajax Form Submission(폼 전송) JQM에서 폼 전송은 Ajax를 사용하여 자동적으로 동작하고, form과 결과 페이지 간의 이동을 자연스럽게 만들어 줍니다. Form submit을 보장하기 위해 action 과 method properties가 폼 요소로 명시 되어져야 합니다. 명시되지 않을 경우 method는 디폴트인 get으로 action는 $.mobile.path.get()을 통해 현재 페이지와 관련된 경로를 디폴트로 갖게 됩니다. form들은 앵커 태그와 같은 전송을 위한 속성을 수용합니다. Data-transition=”pop”과 data-direction=”reverse” 처럼 Ajax를 사용하지 않고 폼을 전송하기도 합니다. 전역적으로 Ajax 사용을 disable할 수 있고, data-ajax=”false”속성을 통해 폼.. 2011. 6. 14.
jQuery Mobile - Native form elements & buttons(네이티브 요소와 버튼) 프레임웍에서 폼 요소와 버튼들을 touch input에 적합한 컨트롤들로 자동적으로 변환시켜 줍니다. Data-role=”none”속성을 사용하면 어떤 폼 요소나 버튼들을 프레임웍에서 변환하지 않고 기본 요소로 사용할 수 있습니다. 모든 기본 스타일링은 그대로 사용하기 때문에 사용자 정의 스타일을 사용할 필요가 있습니다. 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 Gal.. 2011. 6. 13.
jQuery Mobile - Form themes(폼 테마) 5가지 테마를 사용한 예제 입니다. Body swatch A Text Input: Flip switch: Off On Slider: Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Choose shipping method: Standard: 7 day Rush: 3 days Express: next day Overnight Body swatch B Text Input: Flip switch: Off On Slider: Font styling: b i u Choose a pet: Cat Dog Hamster Lizard Choose shipping method: Standard: 7 day Rush: 3 days Express: next day Over.. 2011. 6. 10.
jQuery Mobile - Select menus(선택 매뉴) 선택매뉴는 기본 Select 요소와 좀 다릅니다. 하지만, 기본 select들은 뷰에 숨겨져 있으면서 JQM에 의해 스타일이 변경된 select 버튼으로 바뀝니다. 변화된 select들은 ARIA를 사용가능하며 데스크탑에서 키보드로 접근 할 수 있습니다. 선택버튼이 클릭되면, OS의 기본 select menu 선택자가 열리게 됩니다. Value가 매뉴에서 선택될 때, 사용자 지정 select 버튼은 새로운 선택과 일치하도록 업데이트 됩니다. 페이지에 select 위젯을 추가하기 위해, 표준 select요소와 option 요소의 셋을 생성하고, label 태그의 for속성에 select 태그의 id를 일치시킵니다. 그 후 div 태그로 감싸고 속성으로 data-role=”fieldcontain”을 추가합니.. 2011. 6. 9.
jQuery Mobile - Checkboxes(체크박스) Checkboxes checkbox들은 하나 이상의 아이템을 선택할 수 있는 옵션 목록을 제공합니다. 전형적인 checkbox는 터치 환경에 적합하지 않아서 jQuery Mobile에서는 label을 사용해 크고, 클릭하기 좋은 스타일로 만들어줍니다. 사용자 지정 아이콘을 사용하는 것도 가능합니다. Radio 버튼과 마찬가지로 input과 label 마크업을 사용하고, label 요소로 스타일을 제어하며 input 요소 위에 위치 되어집니다. 그래서, 만약, label의 이미지가 로드시 실패하더라도, input의 기능적인 제어는 가능합니다. 대부분의 브라우저에서는 label를 클릭하면 자동적으로 input이 클릭되게 되지만, 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다. Checkbox를 만들기 .. 2011. 6. 8.
jQuery Mobile - Radio buttons(라디오버튼) 라디오 버튼은 옵션 목록중에 하나의 항목을 선택 할 때 사용됩니다. 전형적인 라디오 버튼은 모바일 환경에서 클릭하기 어려움이 있어, jQuery Mobile에서는 크고, 클릭가능하도록 라벨 스타일로 보여지게 됩니다. 사용자 아이콘 셋을 라벨에 추가할 수도 있습니다. Radio 와 checkbox 컨트롤은 input과 label 마크업을 기본으로 사용합니다. Label 요소를 통해 스타일을 제어할 수 있는데 이는 실제 input 위에 위치 하게 됩니다. 그래서 만약, 라벨의 이미지가 로드하는데 실패했더라도 input의 기능적인 제어는 가능하게 됩니다. 대부분의 브라우저에서 라벨을 클릭하면 input이 자동적으로 클릭됩니다. 그러나 몇몇 모바일 브라우저에서는 수동적으로 해야 했습니다. Vertically g.. 2011. 6. 7.
jQuery Mobile - Flip toggle switches(플립 토글 스위치) Binary 타입의 on/off 혹은 true/false 데이터 입력을 위해 모바일 환경에서 보편적으로 사용되는 “flip” switch는 슬라이드처럼 드래그를 하거나 터치를 통해 선택할 수 있습니다. Flip 스위치를 만들기 위해서는 select 태그에 on과 off의 두 option 태그를 생성하고, label 태그의 for 속성의 값과 select 태그의 id 속성값을 매칭하고, 상위 div 태그로 감싸며 속성으로 data-role=”fieldcontain”을 추가합니다. Select slider: Off On 자바스크립트에서 filp switch를 refresh하는 방법은 아래와 같습니다. var myswitch = $("select#bar"); myswitch[0].selectedIndex = .. 2011. 6. 3.