jQuery/jQueryMobile 썸네일형 리스트형 [jQueryMobile] 레이아웃 구성하기 · jQuery Mobile을 사용하면 쉽게 레이아웃을 구성할 수 있다. · div 태그의 class 속성에 uigrid를 입력해 레이아웃을 구성한다. · ui-grida-a부터 ui-grida-d까지 입력이 가능하다. ■ ui-grid 클래스로 화면 나누기 ① 01. ui-grid-a를 사용해 레이아웃을 구성하면 내부 요소의 클래스에 ui-block-a와 ui-block-b를 입력해 위치를 지정한다. ui_grid_one.php Mobile ui-block-a ui-block-b FOOTER 02. 실행하면 이등분돼 div태그를출력하는데. ui-grid-a클래스는 화면을 이등분 한다는 의미이다. ui-grid-b는 화면을 3등분하며, ui-grid-c는 화면을 4등분 한다는 의미이다. ■ ui-bloc.. 더보기 [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. 출력하면 아래와같이 리스트앞에 이미지가 출력되는 것을 확인 할 수 있다. 더보기 이전 1 2 3 4 다음
