본문 바로가기

웹앱63

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.
jQuery Mobile - Theming content Theming the content area 페이지 속성이 있는 테그에 data-theme=”e” 속성을 추가하여 해당 페이지에 테마를 적용할 수 있습니다. Theming collapsible blocks 접이식 해더에 색상을 적용하기 위해서는 data-theme 속성을 추가해 줍니다. 아이콘과 바디는 현재는 data 속성을 통해 테마를 적용할 수 없습니다. 그러나 직접 커스텀 css를 통해 스타일되어 질 수 있습니다. Themed examples A theme swatch on content & collapsible H1 Heading This is a paragraph that contains strong, emphasized and linked text. Here is more text so you.. 2011. 5. 25.
jQuery Mobile - Collapsible content markup(접이식 블록) 접이식 블록의 컨텐트를 만들기 위해 컨테이너를 하나 만들고 data-role=”collapsible” 속성을 추가합니다. 이 컨테이너 안에 직접적으로 해더 엘리먼트(H1~H6)를 추가합니다. 프레임웍은 그 해더 엘리먼트를 클릭가능한 버튼으로 스타일 해주며, 확장 가능한 지시자로 왼쪽에 “+”아이콘을 추가해줍니다. 해더태그 이후에 접혀지길 원하는 어떤 HTML 마크업이라도 추가 할 수 있습니다. 프레임웍은 해해더부분 클릭할 때 보여지고 사라지는 컨테이너로 이 마크업을 감쌀 것입니다. 접이식 예제1 이부분이 숨겨지고 보여질 부분입니다. 기본적으로 접이식 태그는 펼쳐져서 보여지는데, 만약, 로딩시 접혀져 보여지도록 하기 위해서는 data-collapsed=”true” 속성을 추가합니다. 아래는 4가지의 다른 .. 2011. 5. 24.
jQuery Mobile - Layout grids 여러 컬럼이 있는 레이아웃은 일반적으로 모바일환경에서는 추천되지 않습니다. 좁은 스크린의 길이 때문입니다. 그러나, 버튼이나 네이게이션 바와 같은 작은 요소들을 나열할 필요가 있을 경우가 있습니다. JQM 프레임웍에서는 ui-grid로 불리는 편리한 블록 스타일 class를 통해 css 기반 컬럼을 쉽게 만들수 있습니다. 두가지 프리셋 레이아웃이 있는데, 그중 하나는 ui-grid-a의 class를 사용하는 두개의 컬럼과 ui-grid-b의 class를 사용하는 세개의 컬럼입니다. 컬럼이 필요한 어느 상황에라도 사용이 가능합니다. Grid는 테두리나 백그라운드가 없이 보여질수 있는 100%의 가로 길이를 사용합니다. 패딩과 마진도 없습니다. 그래서, 그리드들은 그 내부에 있는 요소들의 스타일을 방해해서는.. 2011. 5. 23.

티스토리툴바