JQuery Mobile 오브젝트 사용

Jquery Mobile에서 사용하는 기본 오브젝트들을 사용하는 방법들을 정리해 보았다

 

1. 다이얼로그 

 

<a href="target.html" data-rel="dialog"> 다이얼로그 열기 </a>

 

 

 

2.  버튼

 

    2-1. 기본 버튼

 

<a href="target.html" data-role="button" > 버튼 </a>

 

 

    2-2. 폼 버튼

 

<button  type="button"> button tag </button>         <input   type="submit" value="submit button" />         <input   type="image" value="image button" />         <input   type="reset"  value="reset button" />         <input   type="button" value="button" />

 

 

    2-3. 아이콘 버튼 및 버튼 위치

 

<input   type="button"  data-icon="arrow-l" data-iconpos="right"   />

 

     - 사용할 수 있는 아이콘 목록

 

아이콘명	태그	아이콘명	태그
왼쪽 화살표	data-icon="arrow-l"	새로고침	data-icon="refresh"
오른쪽 화살표	data-icon="arrow-r"	앞방향/이전으로 돌아가기	data-icon="foward"
아래쪽 화살표	data-icon="arrow-d"	뒷방향/이후로 돌아가기	data-icon="back"
위쪽 화살표	data-icon="arrow-u"	그리드	data-icon="grid"
취소	data-icon="delete"	별/즐겨찾기	data-icon="star"
더하기	data-icon="plus"	알림	data-icon="alert"
빼기	data-icon="minus"	정보	data-icon="info"
체크	data-icon="check"	홈	data-icon="home"
톱니/설정	data-icon="gear"	검색	data-icon="search"

 

 

    - 아이콘 포지션

 

포지션명	속성 값	비고
오른쪽 맞춤	data-iconpos="right"
윗 맞춤	data-iconpos="top"
아래 맞춤	data-iconpos="bottom"
글자 없애기	data-iconpos="notext"	아이콘만 존재, 텍스트는 보이지 않음

 

 

   - 이외에 옵션

 

옵션명	사용법	비고
버튼의 길이를 텍스트에 맞추기	<input type="button"  data-inline="true" >
버튼 그룹 생성	< div data-role="controlgroup" >	세로로 붙은 것처럼 버튼 나열
버튼 가로 배치	< div data-type="horizontal">	가로로 붙은 것처럼 버튼 나열