2016. 3. 16. 11:40ㆍlanguage/jquery mobile
Collapsible set 속성에 대해서 알아봅니다.
accordion (아코디언) 이라고도 합니다.
화면의 일부 (영역) 를 숨겨두었다가 클릭 등의 이벤트 발생시 나타내는 기능입니다.
쉽게 말해서 접었다 펼쳤다 하는 기능입니다.
list view 를 숨겨두었다가 펼쳐보는 기능을 만들어 봅시다.
먼저 소스를 살펴봅니다.
|
<section id="page1" data-role="page">
<header data-role="header"><h1>cofs header</h1></header>
<div class="content" data-role="content">
<div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible">
<h3>가나다 List</h3>
<ul data-role="listview">
<li data-role="list-divider">자음 버튼 나눔</li>
<li>
<a href="#">가나다</a>
</li>
<li>
<a href="#">라마바</a>
</li>
<li data-role="list-divider">모음</li>
<li><a href="#">아야어여</a>
</li>
<li><a href="#">오요우유</a></li>
</ul>
</div>
</div>
</div>
<footer data-role="footer"><h1>cofs footer</h1></footer>
</section> |
cs |
data-role="collapsibleset" 속성을 가지고 있는 div 태그를 봅니다.
이 태그는 collapsible들을 묵어주는 역할을 합니다.
그리고 그 안에는 data-role="collapsible" 속성을 가진 div 태그가 있습니다.
이 태그역역이 숨겨졌다가 나타났다가 하는 역할을 하게 됩니다.
여러 영역을 숨겨놓고 리스트처럼 보여줄 때에는 <div data-role="collapsible"> 를 여러번 만들면 됩니다.
그 바로 아래 h3 태그는 data-role="collapsible" 속성을 가진 div 태그의 숨겼다가 나타났다가 하는 버튼의 타이틀을 나타냅니다.
지정하지 않으면 화면에 나오지 않으니 주의바랍니다.
그리고 다른 속성들 중에 data-inset="false" 이라는 속성이 있는데 이는 화면의 전체 width 를 차지할 것인지 아니면 좌우 여백을 두고 가운데에 표시할 것인지를 결정합니다.
hr 태그 아래부터는 내용입니다.
내용은 위 소스처럼 listview 도 올수 있지만 다른 내용이 올 수 도 있습니다.
이번에는 listview 로 collapsible 기능을 구현해 봅니다.
collapsibleset 속성을 가진 div나 collapsible 속성을 가진 div 없이 listview 에 collapsible 속성을 추가해서 만들어 봅니다.
단, css 수정이 필요합니다.
|
<style>
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style> |
cs |
위 스타일 소스를 화면에 삽입합니다.
그리고 나서 다음과 같이 작성합니다.
|
<ul data-role="listview">
<li data-role="collapsible" data-inset="false" data-iconpos="right">
<h2>클릭</h2>
<ul data-role="listview" data-theme="b">
<li data-role="collapsible" data-inset="false" data-iconpos="right"><h2>한번더 클릭</h2>
<ul data-role="listview" data-theme="a">
<li><a href="#">마지막 리스트1</a></li>
<li><a href="#">마지막 리스트2</a></li>
<li><a href="#">마지막 리스트3</a></li>
</ul>
</li>
<li><a href="#">Eagle</a></li>
<li><a href="#">Sparrow</a></li>
</ul>
</li>
<li><a href="#">Humans</a></li>
<li data-role="collapsible" data-inset="false" data-iconpos="right">
<h2>Fish</h2>
<ul data-role="listview" data-theme="b">
<li><a href="#">Salmon</a></li>
<li><a href="#">Pollock</a></li>
<li><a href="#">Trout</a></li>
</ul>
</li>
<li data-role="collapsible" data-inset="false" data-iconpos="right">
<h2>Choose your preference</h2>
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Birds<input id="choose-birds-regular" type="checkbox"></label>
<label>Humans<input id="choose-humans-regular" type="checkbox"></label>
<label>Fish<input id="choose-fish-regular" type="checkbox"></label>
</fieldset>
</form>
</li>
</ul> |
cs |
여기서 보지 못했던 속성이 있는데 data-iconpos="right" 는 아이콘 버튼을 우측으로 정렬하는 속성입니다.
결과는 다음과 같고 직접 실행해 보시기 바랍니다.
심화 기능
외부 버튼으로 collapsibleset 을 컨트롤 할 수 있습니다.
먼저 collapsible 추가, 펼치기, 접기 기능을 가진 버튼과 collapsibleset 영역을 만듭니다.
|
<section id="page1" data-role="page">
<header data-role="header"><h1>cofs header</h1></header>
<div class="content" data-role="content">
<button id="add" type="button" data-icon="gear" data-iconpos="right" data-inline="true" data-mini="true">Add</button>
<button id="expand" type="button" data-icon="plus" data-iconpos="right" data-inline="true" data-mini="true">Expand last</button>
<button id="collapse" type="button" data-icon="minus" data-iconpos="right" data-inline="true" data-mini="true">Collapse last</button>
<div id="set" data-role="collapsibleset" data-iconpos="right" data-content-theme="a">
<div id="set1" data-role="collapsible" data-collapsed="true">
<h3>Section 1</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
</div>
<footer data-role="footer"><h1>cofs footer</h1></footer>
</section> |
cs |
다음으로 javascript 를 이용하여 collapsible 를 컨트롤 해 봅니다.
|
<script type="text/javascript">
$( document ).on( "pagecreate", function() {
var nextId = 1;
$("#add").click(function() {
nextId++;
var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
$( "#set" ).append( content ).collapsibleset( "refresh" );
});
$( "#expand" ).click(function() {
$("#set").children(":last").collapsible( "expand" );
});
$( "#collapse" ).click(function() {
$( "#set" ).children( ":last" ).collapsible( "collapse" );
});
});
</script> |
cs |
추가할 때 collapsibleset( "refresh" ) 이라는 함수가 있는데 이는 collapsibleset div 태그에 collapsible html 을 append 로 추가한 후 다시 그려주기 위해서 실행하는 함수 입니다.
그리고 collapsible( "expand" ) 함수는 collapsible를 펼칠 때 , collapsible( "collapse" ) 함수는 collapsible를 접을 때 사용합니다.