jQuery Mobile Collapsible(접고 펴는 기능)

안녕하세요!!

요즘 8년 다닌 직장을 그만두고 새로운 직장에 취업해서 서울 본사에서 일 배우느라 정신없어서 포스팅을 이제야 씁니다. 주말 빼고 하루에 하나씩 계속 쓰는게 목표인데 이게 정말 쉽지 않은것 같습니다. ^^;

그래도 오늘 힘내서 jQuery Mobile 접고 펴는 기능(Collapsible)에 대해서 한번 알아보겠습니다.

접고 펴는 기능은 버튼을 클릭하면 열렸다가 다시 버튼을 클릭하면 닫히는 기능을 말합니다.

<div data-role="collapsible">
<h1>이곳을 클릭하세요!!</h1>
<p>내용을 입력하세요...</p>
</div>
기본 소스는 위와 같습니다. 위 구문에서 중요한것은 collapsible 입니다.

<h1>버튼</h1> 안의 내용은 자동적으로 버튼이 되고 <p>내용</p> 은 내용을 넣으시면 됩니다.

일단 소스를 보면서 다시 설명드리겠습니다.

<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible 접고 펴기</h1>
</div>

<div data-role="content">
    <div data-role="collapsible">
      <h1>이곳을 클릭하세요</h1>
      <p>내용을 입력하세요.</p>
    </div>
</div>

<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved</h1>
</div>
</div>

</body>
</html>
// collapsible 을 data-role 에 적고 <h1>버튼</h1> 이곳이 버튼이 됩니다. 그리고 그 아래 <p>내용</p> 내용을 입력하면 됩니다.

위 구문을 실행하면 아래와 같이 나오게 됩니다.

버튼을 클릭하기전 화면!

버튼을 클릭했을때 화면!

그리고 처음부터 열려있는 화면을 만드려면 <div data-role="collapsible" data-collapsed="false"> 을 사용하면 됩니다.

그리고 또 두 개이상의 중첩된 기능을 만드려면

<div data-role="collapsible">
<h1>첫 번째 클릭</h1>
<p>내용을 입력하세요.</p>
<div data-role="collapsible">
<h1>두 번째 클릭</h1>
<p>내용을 입력하세요!!!.</p>
</div>
</div>

// 위의 내용을 첫 번째 소스에 적용하면 아래와 같이 나옵니다.

처음 실행화면!

첫 번째 버튼을 클릭했을때!

두 번째 버튼을 클릭했을때!!

그리고 마지막으로 Collapsible Set 이 있습니다. 말 그대로 세트 기능입니다.

collapsible-set 기능을 잘 살펴보시기 바랍니다.

첫 번째 버튼을 클릭했을때!!

두 번째 버튼을 클릭했을때!!

세 번째 버튼을 클릭했을때!!!

소스를 적용하면 위 그림 처럼 나오게 됩니다. 클릭한 버튼의 내용이 나오게 되고 다른 버튼들은 닫히게 됩니다.

직접 테스트 해보면서 응용하여 소스를 만들어보시기 바랍니다.

오늘은 이것으로 포스팅을 마치겠습니다.

남은 시간 즐겁게 보내시고 즐거운 프로그래밍 되시기 바랍니다.

jQuery Mobile 네비게이션 바(Navigation Bars) (0)	2013.11.15
jQuery Mobile 툴바(Toolbars) (0)	2013.11.13
jQuery Mobile 툴바(toolbars) (0)	2013.11.11
jQuery Mobile 버튼 (0)	2013.10.31
jQuery Mobile 페이지2 (2)	2013.10.28

진격의 IT