Home Back

egovframework

Theme

Theme 기능을 이용하여 하위 레벨의 색상을 변경할 수 있다. 최상위 테마 변경 Tag는 <data-role="page"> 이며 변경시 page 하위의 Header, Footer, Panel, UX Component의 색상이 변한다.

기본코드

테마를 적용할 최상위 div Tag에 data-theme="[a~g]"를 추가한다.

Header Title

Page 테마 적용시
Header, Panel, Footer 의 색상이 변경된다.

Footer Title

  • <div data-role="header" data-theme="e">
  • <h1>Header Title</h1>
  • </div>
  • <div data-role="content">
  • <p>Page 테마 적용시
  • Header, Panel, Footer 의 색상이 변경된다.</p>
  • </div>
  • <div data-role="footer" data-theme="e">
  • <h1>Footer Title</h1>
  • </div>

테마 예제

테마를 적용 할 경우 하위 컴포넌트들의 색상이 일괄 변형된다. 만약 해당 상위테마를 사용하고 싶지 않은 경우 적용하고 싶지 않은 요소의 최상위 div Tag에 다른 테마를 정의한다.

a 테마 적용 (data-theme="a")
Header
New

Bar theme "a"

Save
  • <div data-role="header" data-position="inline" data-theme="a">
  • <a href="#" data-icon="plus">New</a>
  • <h1>Bar theme "a"</h1>
  • <a href="#" data-icon="arrow-r" data-iconpos="right">Save</a>
  • <div>
Footer
  • <div data-role="footer" data-theme="a">
  • <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
  • <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
  • <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
  • <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
  • </div>
Button
Button
  • <a href="#" data-role="button" data-theme="a">Button</a>
Panel

Panel a

  • <div class="ui-body-a">
  • <h4>Panel a</h4>
  • </div>
Tabs
  • <div data-role="navbar" data-theme="a">
  • <ul>
  • <li><a href="#" class="ui-btn-active">One</a></li>
  • <li><a href="#">Two</a></li>
  • <li><a href="#">Three</a></li>
  • </ul>
  • </div>
Form
  • <form>
  • <div data-role="content" data-theme="a">
  • <div data-role="fieldcontain">
  • <label for="name">Text :</label>
  • <input type="text" id="name"/>
  • </div>
  • <div data-role="fieldcontain">
  • <label for="slider">Slider:</label>
  • <input type="range" id="slider" value="0" min="0" max="100" />
  • </div>
  • </div>
  • </form>
Menu
  • <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
  • <li data-role="list-divider">Menu</li>
  • <li><a href="#menu1" data-rel="dialog" data-transition="slide">전자정부 모바일 표준프레임워크 개요</a></li>
  • </ul>
Dialog
ActionSheet Dialog data-theme="a" Overlay Dialog data-theme="a" Alert Dialog data-theme="a" Confirm Dialog data-theme="a" Show prompt Dialog data-theme="a"
Grid

ui-block-a

ui-block-b

  • <div class="ui-grid-a">
  • <div class="ui-block-a"><div class="ui-body-a" style="text-align:center"><h3>ui-block-a</h3></div></div>
  • <div class="ui-block-b"><div class="ui-body-a" style="text-align:center"><h3>ui-block-b</h3></div></div>
  • </div>
List
  • Nested List
  • Numbered List
  • Split Button
  • List Divider
  • Count Bubble
  • Thumbnail
  • List Icon
  • Content Formatting
  • Search Filter Bar
  • Change Mode List
  • Checked List
  • <ul data-role="listview" data-inset="true" data-theme="a">
  • <li>Nested List</li>
  • <li>Numbered List</li>
  • <li>Split Button</li>
  • <li>List Divider</li>
  • <li>Count Bubble</li>
  • <li>Thumbnail</li>
  • <li>List Icon</li>
  • <li>Content Formatting</li>
  • <li>Search Filter Bar</li>
  • <li>Change Mode List</li>
  • <li>Checked List</li>
  • </ul>
Check Box
Check Box :
  • <div data-role="fieldcontain">
  • <fieldset data-role="controlgroup" data-type="horizontal">
  • <legend>Check Box :</legend>
  • <input type="checkbox" name="checkbox-6" id="checkbox-6" data-theme="a" />
  • <label for="checkbox-6" >check 1</label>
  • <input type="checkbox" name="checkbox-7" id="checkbox-7" data-theme="a" />
  • <label for="checkbox-7" >check 2</label>
  • <input type="checkbox" name="checkbox-8" id="checkbox-8" data-theme="a" />
  • <label for="checkbox-8" >check 3</label>
  • </fieldset>
  • </div>
Radio
Radio Button:
  • <fieldset data-role="controlgroup">
  • <legend>Radio Button:</legend>
  • <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" data-theme="a" checked="checked" />
  • <label for="radio-choice-1" >radio 1</label>
  • <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-theme="a" />
  • <label for="radio-choice-2" >radio 2</label>
  • </fieldset>
Icon
  • <div data-role="controlgroup" data-type="horizontal">
  • <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a">arrow-l</a>
  • <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a">arrow-r</a>
  • <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a">arrow-u</a>
  • <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a">arrow-d</a>
  • <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a">delete</a>
  • <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a">plus</a>
  • <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a">minus</a>
  • <a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a">check</a>
  • <a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a">gear</a>
  • <a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a">refresh</a>
  • <a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a">forward</a>
  • <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a">back</a>
  • <a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a">grid</a>
  • <a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a">star</a>
  • <a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a">alert</a>
  • <a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a">info</a>
  • <a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a">search</a>
  • <a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a">home</a>
  • <a href="#" data-role="button" data-icon="phone" data-iconpos="notext" data-theme="a">phone</a>
  • <a href="#" data-role="button" data-icon="mail" data-iconpos="notext" data-theme="a">mail</a>
  • <a href="#" data-role="button" data-icon="gps" data-iconpos="notext" data-theme="a">gps</a>
  • <a href="#" data-role="button" data-icon="audio" data-iconpos="notext" data-theme="a">audio</a>
  • <a href="#" data-role="button" data-icon="camera" data-iconpos="notext" data-theme="a">camera</a>
  • <a href="#" data-role="button" data-icon="file" data-iconpos="notext" data-theme="a">file</a>
  • <a href="#" data-role="button" data-icon="mic" data-iconpos="notext" data-theme="a">mic</a>
  • <a href="#" data-role="button" data-icon="explorer" data-iconpos="notext" data-theme="a">explorer</a>
  • </div>
Selector / Switch
  • <div data-role="fieldcontain">
  • <label for="select-choice-1" class="select">Select Menu:</label>
  • <select id="select-choice-1" data-theme="a">
  • <option value="choice1">choice 1</option>
  • <option value="choice2">choice 2</option>
  • <option value="choice3">choice 3</option>
  • <option value="choice4">choice 4</option>
  • </select>
  • </div>

  • <div data-role="fieldcontain">
  • <label for="switch">Switch :</label>
  • <select id="switch" data-role="slider" data-theme="a" data-track-theme="a">
  • <option value="off">Off</option>
  • <option value="on">On</option>
  • </select>
  • </div>

collapsible 1

collapsible 1 content

collapsible 2

collapsible 2 content

  • <div data-role="collapsible-set">
  • <div data-role="collapsible" data-theme="a" data-content-theme="a">
  • <h3>collapsible 1</h3>
  • <p>collapsible 1 content</p>
  • </div>
  • <div data-role="collapsible" data-collapsed="false" data-theme="a" data-content-theme="a">
  • <h3>collapsible 2</h3>
  • <p>collapsible 2 content</p>
  • </div>
  • </div>
  • </div>

Copyright(c)2012 Ministry of Government Administration and Home Affairs.