외부메모리 -_-

Theming

테마가 적용된 Container에 하위 태그가 하나 추가가 되면, 자동적으로 부모 container가 가지고 있는 테마를 적용 받습니다. 그래서 ‘a’ 테마가 적용된 content의 자식 개체들은 자동적으로 a 테마를 적용 받습니다.

아래 버튼들은 같은 html 마크업에 다른 테마를 적용했습니다.

<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="content" data-theme="e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div> 
< div data-role="button" ><h4>A swatch</h4><a href="index.html" data-role="button" data-theme="a">Button</a></div>

상위태그에 테마가 적용되어 있어도 하위 태그에서 다른 테마를 적용할 수 있습니다.
프레임웍이 제공하는 테마는 a~e까지 5가지 입니다. 만약, 테마 f를 적용하였을 경우 오류가 발생하는 것이 아니라 디폴트 테마로 보여지게 됩니다.

네비게이션 처럼 보이게 하기 위해서 여러 버튼을 한 블럭처럼 보이게 할 수 있습니다.

버튼들의 상위 div 태그에 data-role=”controlgroup” 속성을 추가하면 프레임웍이 세로로 나열한 버튼 그룹을 만들어 줄 것입니다. 각 버튼간에 적용된 마진을 제거하고 쉐도우를 삭제하여 중간에 나열된 버튼들이 어색하지 않도록 보여줍니다.

<div data-role="controlgroup">
< a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
< /div>

감싸고 있는 태그의 속성에 data-type=”horizontal” 속성을 추가하면, 한 라인에 가로방향으로 버튼들이 나열됩니다. 버튼안의 content 길이에 따라 버튼의 가로 길이가 결정되어집니다.

<div data-role="controlgroup" data-type="horizontal">
< a href="index.html" data-role="button">Yes</a>
< a href="index.html" data-role="button">No</a>
< a href="index.html" data-role="button">Maybe</a>
< /div>

만약, 버튼이 개수가 많거나, 버튼 content가 길어서 스크린의 한 라인에 들어가지 않으면 자동으로 다음 줄로 내려가지니 유의해야 합니다.

그리고, 버튼에 아이콘을 추가하듯이 하여, 그룹 버튼을 꾸밀수도 있습니다.

<div data-role="controlgroup" data-type="horizontal" > 
< a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 
< a href="index.html" data-role="button" data-icon="arrow-d">Down hahahaha</a> 
< a href="index.html" data-role="button" data-icon="delete">Delete</a>
< /div>

Adding Icons to Buttons

버튼에 아이콘을 추가할 수 있습니다.
JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다.
저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다. data-icon 속성을 추가하여 사용합니다.

< a href="index.html" data-role="button" data-icon="delete">Delete</a>

Icon set

Left arrow - data-icon="arrow-l"

Right arrow - data-icon="arrow-r"

Up arrow - data-icon="arrow-u"

Down arrow - data-icon="arrow-d"

Delete - data-icon="delete"

Plus - data-icon="plus"

Minus - data-icon="minus"

Check - data-icon="check"

Gear - data-icon="gear"

Refresh - data-icon="refresh"

Forward - data-icon="forward"

Back - data-icon="back"

Grid - data-icon="grid"

Star - data-icon="star"

Alert - data-icon="alert"

Info - data-icon="info"

Home - data-icon="home"

Search - data-icon="search"

Icon positioning

아이콘의 디폴트 위치는 왼쪽입니다.
아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다.
notext 값을 주면 버튼의 텍스트 부분이 줄어 아이콘 버튼이 됩니다.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">right position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">top position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">bottom position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">notext icon Delete </a>

Theming headers and footers

해더와 풋터는 페이지의 스타일의 중요한 역할을 하기 때문에 기본적으로 ‘a’ 테마가 적용될 것입니다. 다른 테마를 적용하기 원한다면 data-theme 속성에 원하는 테마를 a~e까지 셋팅하면 해당 테마가 적용됩니다. 예를들면, 헤더바를 b로 스위칭합니다.

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div>

<a href="add-user.php" data-theme="b">Save</a> 

페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다.

고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다.

<div data-role="footer" data-id="foo1" data-position="fixed"> 
<div data-role="navbar"> 
<ul> 
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li> 
<li><a href="footer-persist-b.html">Albums</a></li> 
<li><a href="footer-persist-c.html">Emails</a></li> 
</ul> 
</div><!-- /navbar --> 
< /div><!-- /footer -->

네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다.