jQuery를 모바일 테마
jQuery를 이동할 수있는 두 개의 다른 스타일의 테마를 제공하는 "a" 와 "b" 기타 등등 버튼 바, 콘텐츠 블록에 대한 다른 색상 각, 및 -.
사용, 응용 프로그램의 모양을 사용자 지정하려면 data-theme 속성을, 그리고 문자 속성을 지정 :
<div data-role="page" data-theme="a|b" >
| 값 | 기술 | 예 |
|---|---|---|
| a | 페이지 내용에 대한 밝은 회색 배경에 검은 색 텍스트 머리글과 바닥 글에 대한 회색 배경에 검은 색 텍스트 버튼에 밝은 회색 배경에 검은 색 텍스트 활성 버튼에 파란색 배경에 흰색 텍스트 링크에 파란색 텍스트 라이트 그레이 텍스트 (자리) 또는 입력 필드 흰색 배경에 검은 색 텍스트 (값) | 시도 해봐 |
| b | 페이지 내용에 대한 어두운 회색 배경에 흰색 텍스트 머리글과 바닥 글에 대한 어두운 회색 배경에 흰색 텍스트 버튼의 숯불 배경에 흰색 텍스트 A의 흰색 텍스트 "cyan" 활성 버튼에 파란색 배경 "Cyan" 링크에 파란색 텍스트 회색 텍스트 (자리) 또는 입력 필드에 검정색 배경에 흰색 텍스트 (값) | 시도 해봐 |
와 버튼에 class="ui-btn" , 사용 "ui-btn-a|b" : 버튼 중 하나를 회색 (기본값) 또는 검은 색 스타일을 클래스를
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
"a" 주제는 대부분의 요소에 사용하고, 자식 요소는 종종 부모 (또는 페이지)의 테마를 상속합니다.
테마 머리글과 바닥 글
예
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
»그것을 자신을 시도 대화 상자에서 테마 머리글과 바닥 글
예
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> »그것을 자신을 시도 테마 버튼
테마 아이콘
테마 팝업
머리글과 바닥 글에서 테마 버튼
예
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
»그것을 자신을 시도 테마 탐색 바
예
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> »그것을 자신을 시도 테마 패널
축소 버튼 및 콘텐츠를 테마
예
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> »그것을 자신을 시도 테마 목록
예
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> »그것을 자신을 시도 테마 분할 버튼
축소 목록을 테마
예
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> »그것을 자신을 시도 테마 양식
예
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</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="b">
<legend>Click me - I'm collapsible!</legend> »그것을 자신을 시도 새로운 테마 추가
jQuery를 모바일은 모바일 페이지에 새로운 테마를 추가 할 수 있습니다.
추가 (당신이 jQuery를 모바일을 다운로드 할 경우) CSS 파일을 편집하여 새로운 테마를 편집 할 수 있습니다. 그냥 스타일의 블록을 복사 편지 이름 (CZ)와 클래스 이름을 변경하고, 당신이 원하는대로 색상과 글꼴을 조정합니다.
또한 HTML 문서에 테마 클래스를 사용하여 새로운 스타일을 추가 할 수 있습니다 - 클래스 추가 "UI - 바 - (AZ)"를 도구 모음에 대해, "UI 차체 (AZ)"콘텐츠 및 UI 페이지 - 테마 - 용 ( 페이지에 대한 AZ) "
예
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
»그것을 자신을 시도 jQuery를 모바일 이전 버전의 자바 스크립트 요소가 부모의 테마를 상속하는 방법을 처리하는 데 사용. 1.4 프레임 워크는 성능 향상에 초점을 맞추고 자바 스크립트는 순수 CSS로 대체되었습니다.
: JQuery와 모바일 팀은 자신 만의 테마를 만들 수있는 도구, 만들었습니다 ThemeRoller . 또한 새로운 버전과 호환되도록 오래된 테마를 업그레이드하려면이 도구를 사용할 수 있습니다.