jquery mobile 에서 alert 만들기 (jquery plugin 사용) pc 웹에서도 사용가능합니다. jquery mobile 을 사용해서 하이브리드 앱을 만들다 보니 alert 창이 너무 거슬린다. 이유는 alert 창에 웹주소가 표시되기 때문이다. 그래서 jquery mobile dialog (다이얼로그 팝업)를 이용해보니 알림이라기 보다는 팝업의 느낌이 강했다. 화면도 사라지고 별도에 다이얼로그 창 하나가 떠서 페이지를 이동한 느낌이 강했다. http://cofs.tistory.com/154

Listview 를 이용한 커스텀 accordion 만들기 / 아래로 펼치기, 접기 Listview 를 이용해서 accordion 을 만드는 방법에 대해서 설명한다. 이 방법은 api 에 있는 기본적인 방법이 아닌 jquery animate 를 사용하여 다른 방식으로 구현한 방법이다. 먼저 기본적인 api 에 있는 방법은 아래 링크에서 설명하고 있다. http://cofs.tistory.com/161 내가 구현하고 싶은 모양은 이런 모양이였다. ( 머리속에만 있어서 완성된 화면으로 대체합니다. ) 두 이미지는 완성된 이미지를 스크린샷 찍은 것이다. 기본적인 accordion 과는 조금 다른 모양이다. 펼치기/접기를 하는 버튼이 하단에 위치한다. 만드는 방법은 그리 어렵지 않다. jquery 를 다룰 줄 ..

화면을 좌, 우로 밀어서 페이지를 이동하는 방법에 대해 설명합니다. 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개까지 만들 수 있습니다...