jQuery Mobile 테마

jQuery Mobile 테마

jQuery Mobile은 다섯 가지 다른 스타일 테마를 제공합니다. 'a'에서 'e'까지 - 각 테마는 다른 색상의 버튼, 패널, 콘텐츠 블록 등을 포함합니다. jQuery Mobile의 한 테마는 여러 가지 보이는 효과와 색상으로 구성되어 있습니다.

애플리케이션의 외관을 맞춤화하려면 data-theme 속성을 사용하고, 이 속성에 문자를 할당하세요:

<div data-role="page" data-theme="a|b|c|d|e">
값 설명 예제
a 기본적으로. 검은 배경에 흰 텍스트. 테스트
b 파란 배경에 흰 텍스트 / 회색 배경에 검은 텍스트 테스트
c 연한 회색 배경에 검은 텍스트 테스트
d 하얀 배경에 검은 텍스트 테스트
e 오렌지 배경에 검은 텍스트 테스트

푸시:좋아하는 테마를 혼합하세요!

기본적으로, jQuery Mobile는 헤더와 푸터에 "a" 테마를 사용하며, 헤더 내용에 "c" 테마(밝은 회색)를 사용합니다. 그러나, 테마를 혼합할 수 있습니다.

주제화된 페이지, 내용 및 푸터

예제

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

본인이 직접 시도해보세요

주제화된 대화 상자

예제

<a href="#pagetwo" data-rel="dialog">주제화된 대화 상자 페이지로 이동</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

본인이 직접 시도해보세요

주제화된 버튼

예제

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

본인이 직접 시도해보세요

주제화된 아이콘

예제

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

본인이 직접 시도해보세요

페이지의 헤더와 푸터에 주제화된 버튼

예제

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">홈</a>
  <h1>내 홈페이지로 환영합니다</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">검색</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">버튼 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">버튼 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">버튼 3</a>
</div>

본인이 직접 시도해보세요

주제화된 네비게이션 패널

예제

<div data-role="footer" data-theme="e">
  <h1>여기에 푸터 텍스트 삽입</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">버튼 1</a></li>
      <li><a href="#" data-icon="arrow-r">버튼 2</a></li>
      <li><a href="#" data-icon="arrow-r">버튼 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >버튼 4</a></li>
    </ul>
  </div> 
</div>

본인이 직접 시도해보세요

주제화된 접히는 버튼과 내용

예제

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>나를 클릭하세요 - 내가 접히는 것입니다!</h1>
  <p>확장된 내용입니다.</p>
</div>

본인이 직접 시도해보세요

주제화된 목록

예제

<ul data-role="listview" data-theme="e">
  <li><a href="#">목록 항목</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">목록 항목</a></li>
  <li><a href="#">목록 항목</a></li>
</ul>

본인이 직접 시도해보세요

테마화된 분할 버튼

예제

<ul data-role="listview" data-split-theme="e">

본인이 직접 시도해보세요

테마화된 접히는 목록

예제

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

본인이 직접 시도해보세요

테마화된 양식

예제

<label for="name">전체 이름:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">좋아하는 색상 선택:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

본인이 직접 시도해보세요

테마화된 접히는 양식

예제

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>클릭하세요 - 내려 접히는 것입니다!</legend>

본인이 직접 시도해보세요

새 테마 추가

jQuery Mobile은 또한 새 테마를 추가할 수 있는 모바일 페이지를 제공합니다.

CSS 파일을 편집하여 새 테마를 추가하거나 편집합니다. 스타일의 일부를 복사하고, 문자 이름(f-z)으로 클래스를 이름을 변경한 다음, 원하는 색상과 글꼴로 조정하세요.

HTML 문서에서 테마 클래스를 사용하여 새 스타일을 추가할 수도 있습니다. 도구 표시줄에 클래스 ui-bar-(a-z)를 추가하고, 내용에 클래스 ui-body-(a-z)를 추가하세요：

예제

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

본인이 직접 시도해보세요