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" 속성을 가진..

이번 강좌는 말풍선 생성, 우측 버튼 아이콘 변경, 좌측 아이콘 생성, 좌측 썸네일 생성 하는 방법까지 총 4가지를 공부하겠습니다. 위에 나열된 4가지 기능 모두 jquery mobile 에서 제공되니 간편하게 만들 수 있습니다. 1. 말풍선 생성 ( Count bubbles ) 말풍선은 다음 그림처럼 자연스럽게 ui를 제공하고 있습니다. li 태그에 안에 span 태그를 사용하고 ui-li-count 클래스를 지정하면 말풍선을 위 그림처럼 표현할 수 있습니다. 말풍선 표시 가나다12 라마바80 Colored by Color Scripter cs 2. 우측 아이콘 변경 우측 아이콘은 다음 그림처럼 변경 가능합니다. li 태그에 data-icon 속성을 이용하면 가능합니다. 아이콘 변경 1 삭제 아이콘 정..

리스트의 버튼영역을 2개로 나눌 수 있습니다. 이는 a 태그를 2개 사용하는 것으로 만들 수 있으며 자동으로 그 영역이 정해집니다. 이번 강좌부터는 section 영역만 소스로 올리겠습니다. CSS3 Animations 가나다 List 자음 버튼 나눔 가나다 네이버 라마바 다음 모음 아야어여 오요우유 cofs Colored by Color Scripter cs 첫번째 리스트 그룹과 같이 버튼 영역이 나뉘게 됩니다. 다음은 검색기능을 구현해 보겠습니다. 검색 기능은 data-filter="true" 로 구현 가능합니다. cofs header 가나다 List 자음 버튼 나눔 가나다 네이버 라마바 다음 모음 아야어여 오요우유 cofs footer Colored by Color Scripter cs 마지막으로 ..

listview 는 가장 많이 사용되는 기능입니다. 리스트 뷰 강좌는 여러 강좌로 나눌 계획입니다. 가장 많이 사용되는 많큼 조금더 디테일하게 속성들을 하나하나 살펴볼 예정입니다. jquery mobile 은 순서 업는 목록 (ul 태그) 또는 순서 있는 목록 (ol 태그)을 모두 표현할 수 있습니다. data-role="listview" 속성을 사용하면 가능합니다. 목록 버튼 만들기 목록 태그의 item (li 태그)에 a 태그를 넣으면 버튼 목록으로 사용할 수 있습니다. 평범한 목록을 원한다면 a 태그를 사용하지 않으면 됩니다. 목록 섹션 해더 ( 그룹 구분 ) 만들기 data-role="list-divider" 속성을 사용하면 해더를 목록 중간중간에 삽입할 수 있습니다. 위의 속성을 모두 사용한 기..

jquery mobile은 페이지를 이동하거나 대화상자를 표시할 때 애니메이션을 제공합니다. a 태그에 data-transition 속성을 이용하여 적용합니다. transition 속성은 다음과 같습니다. fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 위 속성들은 페이지 전환에 사용 가능하며 팝업이나 툴팁에는 일부 속성만 사용 가능합니다. data-direction="reverse" 속성을 사용하면 애니메이션이 반대로 실행되도록 합니다. 자동으로 생성된 버튼이나 대화상자는 jquery mobile에서 자동으로 역방향 애니메이션이 실행되도록 합니다. 예제소스입니다. jquery mobile jQuery Mob..

jquery mobile은 페이지 url을 자동으로 관리합니다. 사용자가 링크 또는 버튼으로 페이지를 이동할때마다 jquery mobile은 location.hash 객체를 갱신하여 히스토리 해시에 이동 정보를 저장합니다. 대화상자 ( 다이얼로그 팝업, dialog ) 는 modal 이므로 히스토리 해시에 저장되지 않습니다. 페이지 사이를 정확하게 직접 이동하려면 changePage() 메소드를 사용하여야 합니다. 페이지를 이동하기 전에 어떤 처리를 해야한다거나 할 때 직접 호출하여 사용할 수 있습니다. changePage() 메소드에 대한 상세한 정보는 아래 주소에 나와있습니다. http://api.jquerymobile.com/jQuery.mobile.changePage/ 사용 방법은 다음과 같습니다..

대화상자를 만드는 방법은 엄청 간단합니다. 대화상자 또는 다이얼로그 팝업 이라고 할 수 있고 사용 방법은 페이지를 이동하는 링크에 data-rel="dialog" 속성만 추가하면 사용가능합니다. jquery mobile jQuery Mobile 1 page go page2 cofs jQuery Mobile 2 page cofs Colored by Color Scripter cs 대화상자 ( 다이얼로그 팝업 ) 은 modal 대화상자로서 해스토리 해쉬에는 저장되지 않습니다. 그러므로 다이얼로그에서 다른 페이지로 이동 후 뒤로가기를 실행해도 다이얼로그로 돌아가지 않습니다. 아래 소스를 실행해보세요 jquery mobile jQuery Mobile 1 page go page2 cofs jQuery Mobile..

jquery mobile은 비동기 방식이므로 페이지를 로딩하는 이벤트와 로딩하기 전 후 이벤트를 구별합니다. jquery에서는 보통 ready 메소드를 사용하여 jquery(douvument).read(); 또는 약식으로 $(function(){}); 으로 사용하기도 합니다. pagebeforehide a 페이지에서 b 페이지로 이동하기 전에 a 페이지에서 발생하는 이벤트 입니다. ui.nextPage는 이동할 페이지 b 이며 b가 없을 경우에는 빈 jquery 객체입니다. pagebeforeshow a 페이지에서 b 페이지로 이동하기 전에 b 페이지에서 발생하는 이벤트 입니다. ui.prevPage는 이동 시작 페이지 a 이며 a가 없을 경우에는 빈 jquery 객체입니다. pagehide 전환 시작 ..

앞 강좌에서 배운 data-role 속성으로 페이지의 역할을 지정해 보았습니다. http://api.jquerymobile.com/data-attribute/ 여기에 방문하면 더 많은 data 속성을 확인할 수 있습니다. 이번에는 페이지를 이동해 보겠습니다. jquery mobile은 한 파일 안에 여러 페이지를 나누어 작성 가능하고 이들을 이동시킬 수 있기 때문에 앱과 비슷한 모양을 가추어 부드럽게 처리할 수 있습니다. 또한 네이게이션을 자동으로 관리하여 뒤로가기버튼이나 딥링크도 제공됩니다. 한 파일에 여러 페이지가 있어 한번 로딩으로 여러 페이지를 이동할 수 있으며 여러번 로딩하지 않아도 되는 장점이 있습니다. 반면에 한번에 여러페이지가 있는 파일을 내려받기 때문에 큰 파일일수록 처음 내려받는 시간이..