외부메모리 -_-

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>

디폴트 버튼의 가로 길이는 스크린을 꽉 채운 형태입니다.
만약, 작은 버튼을 만들고자 한다면, 버튼 속성으로 data-inline=”true” 를 추가해 주면 됩니다.

<a href="index.html" data-role="button" data-inline="true">Button</a>

만약, 같은 라인에 여러 버튼을 나열하고 싶은때는 버튼 태그를 data-inline=”true” 속성을 추가한 상위 div 태그로 감싸줍니다.

<div data-inline="true">
<a href="index.html" data-role="button">Cancel </a>
<a href="index.html" data-role="button" data-theme="b">Save </a>
< /div>

하지만 실제로 해보니 아직은 적용이 안되네요. 버젼이 올라가면 가능해질 것 같습니다.
불편하지만 현재까지는 각 태그별로 속성을 추가하여야 합니다.

<a href="index.html" data-role="button" data-inline="true">Cancel lalalaalal</a>
< a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>

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>

버튼들은 앵커 태그를 사용하는 링크와 같은 네비게이션의 용도와 폼을 전송하기 위한 용도로 많이 사용됩니다.

Styling links as buttons

링크를 위한 앵커 태그에 data-role=”button” 속성을 추가하면, 프레임웍에서 해당 링크를 버튼 스타일로 보이도록 css를 생성해 줍니다.

<a href="index.html" data-role="button">link bar</a>

Form buttons

편리한 스타일링을 위해 프레임웍에서 자동적으로 버튼 태그를 변환해줍니다. Input 타입이 submit, reset, button, image들도 data-role=”button” 속성이 없더라도 버튼 처럼 자동으로 변환해줍니다.

<button> 기본 버튼 </button>
< input type="button" value="button" />
< input type="submit" value="submit" />
< input type="reset" value="reset" />
< input type="image" value="image" />

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를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다.

이 툴바는 전체 화면을 꽉 채우는 컨텐트를 사용해야하는 특별한 상황에서 사용됩니다. 페이지를 클릭시 해더와 풋터가 보였다 안보였다 하하 원할 때 사용합니다. 보통 사진이나 이미지, 비디오 화면인 경우에 적합합니다.
이를 사용하기 위해서는 data-role=”page” 속성의 div태그에 data-fullscreen=”true”속성을 추가하고, 해더와 풋터에 data-position=”fixed” 속성을 사용하여야 합니다.

Fullscreen 모드는 페이지에 감춰있기 때문에, 모든 컨텐트에서 항상 보여지는 것은 아니니 유의하셔야 합니다. 반면에, fixed 모드는 항상 페이지의 상단과 하단에 보여지며 스크롤로 보여지지 않는 화면에서 터치시 보여지게 됩니다.

<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed"> …. </div>

평소엔 보이다가 화면을 터치하거나 페이지를 스크롤하면 페이지 뒤로 사라지는 툴바를 구현합니다.
이를 위해 툴바 컨테이너에 data-position="fixed" 속성을 추가해 줍니다.

<div data-role="header" data-position="fixed">
	<h1>Fixed toolbars</h1>
</div>

JQM은 보통 header나 footer 안에 존재하는 바에 옵션 아이콘 5개 버튼까지 제공하는데 유용한 기본적인 navbar 위젯을 가지고 있습니다.

Navbar는 data-role=”navbar”를 가지는 컨테이너 엘리먼트로 감싸져 있는 링크들의 리스트로 코드화되어 있습니다. 엥커 태그에 class=”ui-btn-active” 속성을 추가 하면 링크들중 하나를 active(seleted) 상태로 셋팅하게 됩니다. 다음 예제는 footer내에 두개의 버튼으로 이루어진 navbar에서 “One” 버튼을 활성화 하였습니다.

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
< /div><!-- /footer -->