모바일웹60 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. jQuery Mobile - Content formatting JQM에서 페이지의 컨텐트는 제약 조건을 두지 않습니다. 그러나 JQM 프레임웍은 많은 유용한 접을수 있는 패널(collapsible panels)과 다수열의 그리드 레이아웃(multiple-column grid layout)과 같은 툴,위젯들을 제공하고 생성하기 쉽도록 해줍니다. Basic HTML styles JQM에서 컨텐트의 스타일링은 간단합니다. 우리의 목적은 브라우저의 기본 렌더링을 우선으로 하고, 우리는 좀더 읽기 편하도록 패딩을 조정하고, 폰트와 색상을 적용한 theming system을 사용하면 됩니다 간편한 컨텐트 스타일링 작업는 디자이너와 개발자들에게 복잡한 스타일에 머리 싸매지 않도록 편한 작업환경을 만들어줍니다. Default HTML markup styling 기본적으로 JQM .. 2011. 5. 20. jQuery Mobile - Theming Buttons JQM은 버튼들의 스타일을 제어하는 rich theming system 을 가지고 있습니다. 테마가 적용된 Container에 하위 태그가 하나 추가가 되면, 자동적으로 부모 container가 가지고 있는 테마를 적용 받습니다. 그래서 ‘a’ 테마가 적용된 content의 자식 개체들은 자동적으로 a 테마를 적용 받습니다. 아래 버튼들은 같은 html 마크업에 다른 테마를 적용했습니다. A swatchButton B swatchButton C swatchButton D swatchButton E swatchButton A swatchButton 마지막 예제와 같이 상위 태그를 버튼으로 하고 하위 버튼에 테마를 적용하면, 기본 테마의 버튼안에 글자와 테마가 적용된 버튼을 구성으로 보여집니다. 각각의 버튼.. 2011. 5. 19. jQuery Mobile - Grouped Buttons 네비게이션 처럼 보이게 하기 위해서 여러 버튼을 한 블럭처럼 보이게 할 수 있습니다. 버튼들의 상위 div 태그에 data-role=”controlgroup” 속성을 추가하면 프레임웍이 세로로 나열한 버튼 그룹을 만들어 줄 것입니다. 각 버튼간에 적용된 마진을 제거하고 쉐도우를 삭제하여 중간에 나열된 버튼들이 어색하지 않도록 보여줍니다. Yes No Maybe 감싸고 있는 태그의 속성에 data-type=”horizontal” 속성을 추가하면, 한 라인에 가로방향으로 버튼들이 나열됩니다. 버튼안의 content 길이에 따라 버튼의 가로 길이가 결정되어집니다. Yes No Maybe 만약, 버튼이 개수가 많거나, 버튼 content가 길어서 스크린의 한 라인에 들어가지 않으면 자동으로 다음 줄로 내려가지니.. 2011. 5. 18. 이전 1 2 3 4 5 6 다음
