이전 글에서 언급했던 CSS 를 이용해서 accordion menu 를 customizing 할 수 있습니다. title 과 content 두 부분 모두를 customizing 한 예제입니다.
Styling accordion menus
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-collapsible-heading span.ui-btn-text {
font-style : normal;
color : red;
}
.ui-collapsible-heading-collapsed span.ui-btn-text{
font-style : italic;
color : black;
}
.ui-collapsible-content {
background : black;
color : white;
text-align : center;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<div id=id1 data-role=collapsible>
<h1>Menu 1 : Click to open / close</h1>
<p> Paragraph 1.1 </p>
<p> Paragraph 1.2 </p>
<p> Paragraph 1.3 </p>
</div>
<div id=id2 data-role=collapsible>
<h1>Menu 2 : Click to open / close</h1>
<p> Paragraph 2.1 </p>
<p> Paragraph 2.2 </p>
<p> Paragraph 2.3 </p>
</div>
</div>
</div>
</body>
</html>
|
|
tistory560_01.html
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
|---|---|
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |
| accordion menu 열고 닫는 것 구현하기 (0) | 2012.12.20 |
| Ajax 로 accordion menu 삽입하기 (0) | 2012.12.20 |
| HTML을 jQuery Mobile 의 accordion menu 로 변환하기 (1) | 2012.12.18 |
| 다이나믹 하게 accordion menu 생성하기 (0) | 2012.12.17 |