jQuery 썸네일형 리스트형 [jQueyrMobile] 아코디언 위젯 사용하기 ■ jQueyr Mobile 아코디언 위젯 사용하기. 01. 모바일이라는 화면의 특성상 한 화면에 모든 내용을 담기는 굉장히 어렵다. 따라서 아코디언 형태의 위젯을 많이 사용하는데. div 태그의 data-role 속성을 collapsible로 입력하고 내부에 원하는 내용을 입력하면 아코디언이 만들어진다. collapsible.php Mobile Accordion Lorem ipsum dolor sit amet, consectetur adipiscing elit. Accordion Lorem ipsum dolor sit amet, consectetur adipiscing elit. Accordion Lorem ipsum dolor sit amet, consectetur adipiscing elit. FO.. 더보기 [jQueryMobile] jQueryMobile 입력 양식 ■ jQueryMobile의 기본 입력양식 01. 가장 기본적인 type 속성으로 text와 password를 갖는 input 태그이다. 별도의 설정 없이도 모바일에 맞는 입력양식으로 변화하지만, data-role 속성이 fieldcontain인 div 태그로 감싸면 입력의 형태를 자동으로 잡아줍니다. type_text.php Mobile 텍스트 INPUT 패스워드 INPUT FOOTER 02. 출력결과는 아래와같다. ■ jQueryMobile의 체크 입력 양식 01. type 속성이 radio나 checkbox인 경우 fieldset 태그의 data-role 속성을 controlgroup으로 입력하고 label 태그의 for 속성을 정확하게 입력하고 id 명칭과 일치 시켜야만 예쁜 형태를 형성한다. r.. 더보기 [jQueryMobile] jQueryMobile의 페이지 이동 ■ jQuery Mobile의 페이지 이동 jQuery Mobile은 a 태그를 눌러 이동할 대상 페이지를 다음과 같이 세가지로 구분한다. · 내부 페이지 : 같은 HTML 페이지 안에 존재하는 페이지(참조 : http://wickedmagic.tistory.com/536) · 외부 페이지 : 다른 도메인에 존재하는 페이지 · 로컬 페이지 : 같은 도메인에 존재하는 페이지 01. 페이지 이동을 위한 첫번째 메인 페이지를 만드록 jQuery Mobile을 사용하기 위한 구성요소를 추가한 페이지를 만든다. content 내부의 첫 번째 링크는 외부 페이지로 링크하는 것이고, 두 번째링크는 로컬 페이지로 이동한다. main_page.php Mobile External Link Local Link FOOTER .. 더보기 [jQueyrMobile] 리스트에 이미지 사용하기 ■ jQueyr Mobile 리스트에 이미지 사용하기 · 리스트에 이미지를 넣고 싶을 때는 곱다로 img 태그를 넣어주면 된다. · img 태그를 넣으면 jQuery Mobile이 자동으로 이미지를 80 × 80의 크기로 변경해 삽입한다. 01. 이미지를 삽입하기 위한 코드는 아래와 같다. list_img.php Mobile CAT BANJO CAT CUPID CAT FOOD CAT LADY FOOTER 02. 출력하면 아래와같이 리스트앞에 이미지가 출력되는 것을 확인 할 수 있다. 더보기 [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.. 더보기 이전 1 2 3 4 5 6 7 ··· 21 다음
