화면을 좌, 우로 밀어서 페이지를 이동하는 방법에 대해 설명합니다. swipeleft, swiperight 이벤트를 사용합니다. swipeleft는 사용자가 왼쪽으로 30픽셀 이상 쓸어 넘겼을 경우 발생합니다. swiperight는 사용자가 오른쪽을 30픽셀 이상 쓸어 넘겼을 경우 발생합니다. 만들 파일은 총 4개입니다. 먼저 페이지 이동에 사용될 html 파일 3개를 만듭니다. 처음에는 파일명을 똑같이 만드세요. 소스가 눈에 익고 이해될 때 본인의 입맛에 맞게 파일명도 바꿔보는걸 추천합니다. 014event.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 jquery mobile j..

이번 포스팅은 Panel 에 대해서 설명합니다. 모바일 웹을 사용하다보면 좌측 또는 우측에서 나왔다가 사라졌다가 하는 화면을 볼 수 있습니다. 보통 메뉴로 사용하거나 설정정보를 두거나 등 여러가지로 사용될 수 있습니다. jquery mobile 에서는 panel 이라고 하고 사용방법은 간단합니다. 먼저 필자가 구현한 모양은 다음과 같습니다. 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 jQuery Mobile back Add 내용입니다. 안녕 cofs 메뉴 설정 메뉴 Logout Colored by Color Scripter cs 1# : 기본적인 page 구조입니다. 2# : 헤더부분입니다. 5# : 헤더 내부에서 톱니바퀴 아이..

form 요소 세번째 시간입니다. select 와 input, textarea 태그처럼 문자 데이터를 입력받는 form 요소에 대해서 공부해보겠습니다. select 단어 그대로 무엇인가를 선택할 경우 사용하는 태그입니다. 1 2 3 4 5 6 7 Select, native menu Standard: 7 day Rush: 3 days Express: next day Overnight Colored by Color Scripter cs 기본적인 select 를 만드는 방법입니다. width가 화면의 가로 영역을 100% 차지하는 크기로 만들어 집니다. select를 작게 만들수도 있고 width도 화면 가로(너비)의 100%를 차지하지 않도록 만들 수 있습니다. 1 2 3 4 5 6 7 Mini select..

form 요소 두번째 시간입니다. 이번시간에는 Filp Switch , Checkbox, Radio Button 에 대해서 설명하겠습니다. Filp Switch Filp Switch 는 말 그대로 스위치 입니다. 플립 토글 이라고도 부릅니다. 실제 사용시 유용하게 사용되며 설정 부분이나 일정한 기능을 끄고 켜는 인터페이스를 구현할 경우 많이 사용합니다. 1 2 3 4 5 Flip switch: Off On Colored by Color Scripter cs 2번 라인 : form 요소 중 select 태그를 사용하고 data-role="slider" 속성을 사용합니다. option 은 2개만 가능하니 주의하시기 바랍니다. 크기를 작게 만들 수도 있습니다. 1 2 3 4 5 Mini flip switch:..

Form (폼) 요소에 대해서 공부합니다. Form 요소는 모두 태그 사이에 있어야 합니다. form 요소는 input, select, check, radio 등 여러 태그들이 올 수 있고 이 태그들은 사용자로부터 내용을 입력받게 됩니다. 또한 입력받은 내용들을 form 이 서버로 전송하는 역할을 하게 됩니다. 기존에 알고있던 html 의 form 요소보다 한층 더 업그레이드된 ui 를 제공하게 됩니다. 이번 시간에는 button과 slider 에 대해 살펴보겠습니다. button 기본적인 버튼은 a 태그, button 태그, input 태그로 표현할 수 있습니다. 소스부터 살펴봅니다. 1 2 3 Link button Button element cs 1번 라인 : a 태그를 사용한 버튼입니다. 클래스로 ..

내비게이션바를 이용하여 페이지를 이동해 보겠습니다. 내비게이션으로 페이지 이동을 한다고 해서 특별한 스킬이 필요한 것은 아닙니다. 단순히 앞에서 배운 페이지를 이동하는 방법과 페이지를 이동 후 버튼의 눌림상태를 표현해 주면 끝입니다. 페이지 이동은 앞에서 배운 a 링크를 이용하여 이동해 보겠습니다. (참고강좌 : http://cofs.tistory.com/152) 버튼의 눌림 상태는 class 속성으로 표현해 보겠습니다. This is header One Two Three 1 페이지 입니다. This is footer This is header One Two Three 2 페이지 입니다. This is footer This is header One Two Three 3 페이지 입니다. This is fo..

jquery mobile 내비게이션에 아이콘(icon)을 달아보겠습니다. 아이콘을 생성하는 방법은 아주 심플합니다. 아이콘을 생성할 때에는 data-icon 속성을 부여합니다. 아이콘의 종류는 대략 다음과 같습니다. 모두 jquery mobile 에서 제공되는 아이콘 입니다. 소스를 보면서 아이콘을 적용하는 방법을 살펴보겠습니다. Summary Favs Setup Colored by Color Scripter cs 아주 간단합니다. data-icon="아이콘명" 속성을 이용하여 a태그에 부여하면 자동으로 아이콘이 생성됩니다. 아이콘의 위치를 변경할 수도 있습니다. data-iconpos 속성을 사용하여 top, right, left, bottom 의 위치로 이동 가능합니다. 아이콘을 아래로 이동시켜 보겠..

기본적인 내비게이션을 만들고 내비게이션을 사라지게 하거나 나타내는 연습을 합니다. 내비게이션 바는 페이지 사이의 이동 버튼으로 많이 사용됩니다. 보통 페이지의 헤더나 푸터에 위치하며 내용 안에도 위치할 수 있습니다. 기본적인 네비게이션 소스를 보겠습니다. One Two Colored by Color Scripter cs data-role="navbar" 속성의 div 로 ul 태그를 감싸고 있습니다. 이때 ul 태그의 li 태그들이 네비게이션 버튼으로 사용됩니다. li 태그 내부의 a 태그의 class="ui-btn-active" 속성은 선택이 되어져 있는 상태를 의미합니다. 또한 버튼을 클릭했을때 상태는 jquery mobile 에서 자동으로 관리합니다. 버튼은 나란히 최대 5개까지 만들 수 있습니다...

listview 마지막 시간입니다. 이번에는 가볍에 훑어보고 지나가도록 하겠습니다. form 태그 안에 listview 를 써서 입력 태그를 배치하면 보기 좋게 정렬된 입력폼을 만들 수 있습니다. listview 를 이용하여 form 태그의 내부를 정렬하거나 배치할 수 있다는 것이지 무조건 listview 를 사용해서 form 을 만들어야 한다는 것은 아닙니다. 소스먼저 보겠습니다. function formSubmit(){ alert($("form#sampleForm").serialize()); } cofs header listview 입니다. Text Input: Textarea: Flip switch: Off On Slider: Choose shipping method: Standard: 7 day ..

Collapsible set 속성에 대해서 알아봅니다. accordion (아코디언) 이라고도 합니다. 화면의 일부 (영역) 를 숨겨두었다가 클릭 등의 이벤트 발생시 나타내는 기능입니다. 쉽게 말해서 접었다 펼쳤다 하는 기능입니다. list view 를 숨겨두었다가 펼쳐보는 기능을 만들어 봅시다. 먼저 소스를 살펴봅니다. cofs header 가나다 List 자음 버튼 나눔 가나다 라마바 모음 아야어여 오요우유 cofs footer Colored by Color Scripter cs data-role="collapsibleset" 속성을 가지고 있는 div 태그를 봅니다. 이 태그는 collapsible들을 묵어주는 역할을 합니다. 그리고 그 안에는 data-role="collapsible" 속성을 가진..