Latest web development tutorials

jQuery를 모바일 테마

jQuery를 모바일 "은"을 "B"에서, 두 개의 서로 다른 테마 스타일을 제공합니다 - 각 테마 버튼, 도구 모음 등의 콘텐츠 블록 색상이 일치하지 않는, 시각적 효과는 각 주제에 대한 동일하지 않습니다.

응용 프로그램의 모양을 사용자 정의 할 수있는 요소 데이터-테마 속성을 설정하여 : 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

값 기술 예
회색 배경 머리와 하단 페이지의 흑백 텍스트는 파란색 배경에 흰색 텍스트에 회색 배경 배경 검은 색 버튼 회색 텍스트 활성화 버튼과 링크에 검은 색 텍스트입니다
입력 입력 상자 자리 표시 자 속성 값은, 값은 검정 밝은 회색입니다 		시험
B 머리의 아래쪽에 흰색 텍스트 페이지 검은 색은 검은 색 바탕에 흰색 텍스트있는 파란색 배경에 흰색 텍스트로 숯불 배경 버튼과 링크를 활성화 흰색 텍스트 버튼
입력 입력 상자 자리 표시 자 속성 값은, 값은 흰색 밝은 회색입니다 		시험

버튼 스타일을 사용하여 클래스 = "UI-BTN"사용 "UI가-btn을-A | B"클래스 설정 버튼이 회색 (기본값) 또는 검은 색입니다 : 

<a href="#" class="ui-btn ui-btn-a|b">按钮</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>

»시도

항목 버튼

예

<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

»시도

테마 아이콘

예

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

»시도

주제 팝

예

<div data-role="popup" id="myPopup" data-theme="b">

»시도

머리의 맨 아래에있는 테마 버튼

예

<사업부의 데이터 역할 = "헤더">
<a href="#" class="ui-btn ui-btn-b"> 홈 </a>
<H1> 내 홈페이지에 오신 것을 환영합니다 </ H1>
<a href="#" class="ui-btn"> 검색 </a>를
</ DIV>

<사업부의 데이터 역할 = "바닥 글">
<a href="#" class="ui-btn ui-btn-b"> 페이스 북 </a>에에 나를 따르라
<a href="#" 트위터 </a>에에 나를 따르라 class="ui-btn">
<a href="#" class="ui-btn ui-btn-b"> 인스 타 그램 </a>에에 나를 따르라
</ DIV>

»시도

주제 네비게이션

예

<div data-role="footer" data-theme="b">
  <h1>文本头部</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="panel" id="myPanel" data-theme="b">

»시도

항목 축소 버튼과 내용

예

<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>

»시도

주제 분할 버튼

예

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

»시도

항목 축소 목록

예

<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를 . 당신은 새 버전과 호환하고, 오래된 테마를 업그레이드하려면이 도구를 사용할 수 있습니다.