끄적끄적 개발수첩

숨김 패널

메뉴나 폼 등을 숨겨 놓았다가 필요할 때 페이지를 전환하지 않고 제공하기 위한 뷰

* 컨테이너에 data-role="panel" 속성을 설정하면 된다.

* data-display 속성으로 표시 방법을 설정한다.

- overlay 페이지 내용 위에 패널이 펼쳐지는 형태

<div data-role="panel" id="panel1" data-display="overlay" data-theme="b">
    <form>
        <h3>로그인 패널</h3>
        <label for="name">사용자명:</label>
        <input name="name" id="name" type="text" value="" data-mini="true" data-clear-btn="true">
        <label for="password">비밀번호:</label>
        <input name="password" id="password" type="password" value="" data-mini="true" data-clear-btn="true">
        <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" data-role="button" data-rel="close">취소</a></div>
            <div class="ui-block-b"><a href="#" data-role="button" data-rel="close">저장</a></div>
        </div>
    </form>
</div>

컬럼 토글 테이블

테이블 컬럼을 선택적으로 표기하거나 숨길 수 있는 테이블

* 사용자가 팝업 메뉴를 통해 표시 할 컬럼을 직접 선택할 수 있다.

* 컬럼에 우선 순위를 부여해서 크기 허용 범위 안에 표시할 테이블 컬럼 항목들을 제한 할 수 있다.

* data-role="table" data-mode="columntoggle" id="tableId" 태그를 갖는 <table> 태그안에 구현하면 된다.

* <table> 태그의 id 값은 팝업 메뉴에 쓰인다.

* data-priority 속성 값으로 우선순위를 정할 수 있으며 우선 순위값이 높은 순(1이 가장 높고 6이 가장낮다) 으로 컬럼 선택 메뉴에 표시된다.

* ui-responsive 클래스

- 허용 범위 칸큼 표시 테이블 컬럼들을 자동 조절

* table-stripe 속성값

- 행들을 구별하기 쉽도록 줄무늬 형태로 행을 표시한다.

<table class="ui-responsive table-stripe" id="my-table1" data-mode="columntoggle" data-role="table">
	<thead>
	<tr>
		<th data-priority="2">학년</th>
		<th>이름</th>
		<th data-priority="3">성별</th>
		<th data-priority="1">성적</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>1</th> <td>홍길동</td> <td>남</td> <td>94</td>
	</tr>
	<tr>
	<th>4</th> <td>신나라</td> <td>여</td> <td>77</td>
	</tr>
	<tr>
		<th>3</th> <td>홍미미</td> <td>여</td> <td>88</td>
	</tr>
	</tbody>
</table>

페이지 탭

모바일의 좁은 페이지 공간을 여러 개의 탭 페이지를 선택적으로 브라우징 할 수 있도록 돕는 효율적인 브라우징 인터페이스

* 탭 컨테이너 상위에 data-role="tabs" 속성을 갖는 <div> 태그를 설정하면 된다.

* 탭 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 든 태그들이다.

* 탭 은 <a> 태그의 href 속성에 표시 할 페이지 컨테이너의 id를 넣는다. #tabId

* 페이지 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 있으면 같은 공간을 공유한다.

<div data-role="tabs">
	<div data-role="navbar">
		<ul>
			<li><a href="#tab1">탭1</a></li>
			<li><a href="#tab2">탭2</a></li>
			<li><a href="#tab3">탭3</a></li>
		</ul>
	</div>
	<div id="tab1">
		<h1>첫번째 탭 내용</h1>
	</div>
	<div id="tab2">
		<h1>두번째 탭 내용</h1>
	</div>
	<div id="tab3">
		<h1>세번째 탭 내용</h1>
	</div>
</div>

검색 필터 리스트

리스트뷰의 위쪽에 검색 필터 상자를 추가

* 입력한 키워드를 검색해 일치하는 항목만 보여준다.

* listdivider 는 검색 대상에서 제외한다.

* data-role="listview" 속성을 가진 <ul> 태그에 data-filter 속성에 true 값을 넣는다.

<div data-role="content">
    <p>content영역</p>			
    <ul data-role="listview" data-filter="true" data-filter-placeholder="검색키워드를 입력하세요">
        <li data-role="listdivider">ㄱ<span class="ui-li-count">1</span></li>
        <li><a href="#">강</a></li>
        <li data-role="listdivider">ㅂ<span class="ui-li-count">2</span></</li>
        <li><a href="#">바다</a></li>
        <li><a href="#">바다새</a></li>							
        <li data-role="listdivider">ㅎ<span class="ui-li-count">1</span></</li>
        <li><a href="#">하늘</a></li>
    </ul>
</div>	

여러 줄 리스트뷰

강조할 내용을 <h> 태그로 나머지 내용은 <p> 태그를 사용해 일정한 형식으로 상세한 설명과 관련 정보들을 표시한 뷰

* <p> 태그의 내용이 길어지면 자동으로 줄여준다.

<li>

  <a href="#">

      <p class="ui-li-aside">우측 위에 표시</p>

      <h3>제목</h3>

      <p>내용</p>

  </a>

</li>

아이콘 리스트뷰

강 항목 왼쪽에 이미지를 아이콘처럼 표시

<li><a href="#"><img src="listicon.png" class="ui-li-icon">리스트1</a></li>