jQuery/jQueryMobile 썸네일형 리스트형 [jQueyrMobile] 아이콘 사용하기 ■ jQueyr Mobile 아이콘 사용하기 · jQuery Mobile 리시트의 오른쪽에 잇는 화갈표를 다른 이미지로 교체할 수 있다. · a태그를 하나더 생성하고, data-icon 속성을 입력하면 아이콘을 교체하여 사용할 수 있다. · jQuery Mobile은 자체적으로 51개의 아이콘을 지원한다. 01. 아이콘을 교체하여 사용하기 위한 코드는 아래와 같다. data_icon.php Mobile action alert arrow-d arrow-d-l arrow-d-r arrow-l arrow-r arrow-u arrow-u-l arrow-u-r audio back grid bars bullets calendar camera carat-d carat-l carat-r carat-u check clo.. 더보기 [jQueyrMobile] 리스트 구분자 사용 및 그룹화 ■ jQueyr Mobile 리스트 구분자 jQuery Mobile에서는 ul 태그나 ol 태그 같은 리스트 태그의 data-role 속성을 listview로 입력하면 스마트폰의 리스트와 같은 모습으로 바꿀 수 있다. 그리고 리스트 안에는 리스트의 요소를 구분할 구분자 라는 것이 있는데. jQuery Mobile에서 구분자를 만들려면 li 태그의 jQuery Mobile 속성값을 list-divider로 입력하면 바꿀 수 있다. 01. list-divider 구분자를 사용하여 리스트를 구분하기 위한 코드는 아래와 같다. list_drivider.php Mobile TWICE 나연 사나 모모 미나 LOVELIZ KEI 유지애 정예인 APINK 윤보미 박초롱 정은지 FOOTER 02. 위에서 생성한 파일을 .. 더보기 [jQueyrMobile] 다이얼로그(알림) 창 띄우기 ■ jQueyr Mobile 다이얼로그(알림) 창 띄우기 jQuery Mobile에서 data-rel 속성에 dialog를 입력하면 다이얼로그 형태로 페이지가 전환된다. 이 경우에도 data-transition 속성을 사용하여 슬라이드 애니메이션 효과를 줄수 있다. 01. data-rel을 이용한 다이얼로그 창 뜨위기 코드는 아래와 같다. inside_move_data_rel.php Mobile DIALOG SLIDE DIALOG POP DIALOG SLIDEDOWN DIALOG FLIP FOOTER Other Page Lorem ipsum dolor sit amet FOOTER 02. 위 코드를 브라우저 상에서 실행시키면 아래와 같은 화면이 나타나고 하나의 열을 선택하고 나면 03. 그럼 아래와 같이 .. 더보기 [jQueyrMobile] 페이지 이동간 슬라이드 애니메이션 ■ jQueyr Mobile 페이지 이동간 슬라이드 애니메이션 jQuery Mobile은 기본적으로 왼쪽 슬라이드 방식으로 페이지간 이동이 이루어지지만. data-transition 속성 값을지정함으로서 슬라이드 애니메이션을 교체할 수 있다. slide · 기본값이 되는 왼쪽 슬라이드 애니메이션 · data-transition을 지정하지 않아도 해당 방식으로 전환된다. slideup · 다음 페이지가 화면 아래에서 위로 올라온다. slidedown · 다음 페이지가 화면 위에서 아래로 내려온다. pop · 다음페이지가 가운데서 부터 커지면서 전환된다. fade · 첫번째 페이지가 흐려지면서 다음 페이지로 전환된다. flip · 첫번째 페이지가 뒤집히면서 다음페이지로 전환된다. 01. data-transi.. 더보기 [jQueryMobile] 내부 페이지 이동 및 Back 버튼 추가 ■ jQueyr Mobile 내부 페이지 이동 jQueyr Mobile에서 페이지를 이동하려면 여러개의 페이지를 생성하고 a 태그의 href 속성에 이동할 페이지의 id를 입력해야 한다. 01. 페이지 이동을 위한 예제 코드는 아래와 같다. inside_move.php Mobile List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 FOOTER Other Page Lorem ipsum dolor sit amet FOOTER 02. 그럼 아래와 같은 출력 결과에서 하나의 행을 클릭하면 03. 다음 행으로 이동한 모습을 확인 할 수 있다. ■ jQueyr Mobile 내부 페이지 Back 버튼 생성 jQuery Mobile에서 아이폰처럼 뒤로 가기 버튼.. 더보기 이전 1 2 3 4 다음
