본문 바로가기

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

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.
jQuery Mobile - Slider(슬라이더) Slider 위젯을 사용하기 위해서는 input태그에 새롭게 추가된 type=”rage” 속성을 사용합니다. 현재 값을 나타내는 value 속성과 최소값인 min 속성, 최대값인 max속성을으로 슬라이더를 설정합니다. 슬라이더를 드래그하면 현재 값이 업데이트 되고, 폼을 submit시에 현재 값이 전송됩니다. Input slider: slider는 키보드의 shortcut키를 통해서도 값을 변경할 수 있는데, 현재 값보다 증가시키고자 할 경우에는 방향키 오른쪽 이나 윗쪽 키, page up키를 사용하여 할 수 있고, 현재 값보다 감소시키고자 할 경우에는 방향기 아래쪽 키나 왼쪽 키, page down키를 사용합니다. 최소값이나 최대값으로 이동시킬 때는 home키나 end 키를 사용할 수 있습니다. Ref.. 2011. 6. 2.
jQuery Mobile - Text inputs(텍스트) Input 태그의 text와 textarea는 기본 HTML 엘리먼트들입니다. JQM에서 모바일에 사용하기 유용하도록 변환해줍니다. Text input은 문자열을 입력받을 경우에 사용하며, input 태그에 type=”text” 속성을 사용하여 생성합니다. 같이 사용하는 label태그의 for 속성의 값과 input태그의 ID 값으로 매칭됩니다. 이 두가지 엘리먼트를 하나의 그룹처럼 하기 위해 div태그로 감싸고 data-role=”fieldcontain” 속성을 추가합니다. Text Input: Password input은 비밀번호를 입력받을 경우에 사용하며, input 태그에 type=”password” 속성을 추가하여 사용합니다. 마찬가지로 label 태그의 for속성의 값이 input 태그의 ID.. 2011. 5. 31.
jQuery Mobile - Form Elements samples Form elements 다양한 폼 컨트롤 엘리먼트들에 대해 알아보겠습니다. Native elements들은 간혹 화면에서 보여지지 않을 수 있습니다. 하지만, 폼을 전송할 때 해당 값들은 정상적으로 전송될 것입니다. 기본 폼 요소를 기반으로 하기 때문에 모든 사용자 지정 컨트롤을 지원하지 않는 브라우저는 기존처럼 보여질 것입니다. 1) Text Input: Textarea: 2) Search Input: Flip switch: Off On 3) Slider: Choose as many snacks as you'd like: Cheetos Doritos Fritos Sun Chips 4) Font styling: b i Choose a pet: Cat Dog Hamster Lizard 5) Layout .. 2011. 5. 30.
jQuery Mobile - Form basics Form structure 모든 form들은 action과 method속성을 갖는 form태그로 감싸집니다. 이는 서버상에서 폼 데이터 프로세싱을 다루게 될 것입니다. ... Markup Conventions JQM에서 form들을 사용할 때, HTTP post방식이나 get방식으로 submit되는 폼의 표준 가이드의 대부분이 사용됩니다. 그러나, 한가지 주의할 점은 폼 컨트롤의 id 속성이 응답페이지에서 유일해야 할 뿐만 아니라 사이트의 페이지들에서도 유일해야 할 필요가 있습니다. 이것은 JQM의 싱글 페이지 네비게이션 모델로서 동시에 많은 다른 페이지들이 하나의 DOM에 표현되는 것을 허용하기 때문입니다. 그래서, 유일한 id속성을 사용할 때 주의해야 합니다. DOM의 각 페이지중에 유일하게 될 것입.. 2011. 5. 27.

티스토리툴바