끄적끄적 개발수첩

컬럼 토글 테이블

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

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

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

* 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>

검색 필터 리스트

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

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

* 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>

썸네일 리스트뷰

썸네일 이미지를 항목 왼쪽에 추가한 리스트뷰

<li><a href="#"><img src="listimg.png">리스트1</a></li>

리스트 구분자

리스트에서 원하는 항목을 찾기 쉽도록 그룹별로 분류명을 표시하는 구분자

<div data-role="content">
	<p>content영역</p>  <br/> 
	<ul data-role="listview">
    	<li data-role="listdivider">카테고리 이름</li>
    	<li><a href="#">메뉴 이름</a></li>
	</ul>
</div>