ธีมมือถือ jQuery
jQuery มือถือให้สองรูปแบบรูปแบบที่แตกต่างจาก "A" จาก "B" - แต่ละปุ่มแกนแถบเครื่องมือ ฯลฯ สีบล็อกเนื้อหาไม่สอดคล้องกันผลภาพไม่เหมือนกันสำหรับแต่ละหัวข้อ
โดยการตั้งค่าแอตทริบิวต์ขององค์ประกอบข้อมูลรูปแบบที่สามารถปรับแต่งลักษณะของการประยุกต์ใช้:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| ความคุ้มค่า | ลักษณะ | ตัวอย่าง |
|---|---|---|
| หน้าตัวอักษรสีดำบนพื้นหลังสีเทาหัวและด้านล่างมีตัวอักษรสีดำบนพื้นหลังพื้นหลังสีเทาสีดำปุ่มปุ่มเปิดใช้งานข้อความสีเทาและเชื่อมโยงไปยังข้อความสีขาวบนพื้นหลังสีฟ้า กล่องรับสัญญาณยึดค่าแอตทริบิวต์เป็นสีเทาอ่อนค่าเป็นสีดำ | ความพยายาม | |
| B | หน้าพื้นหลังสีดำมีข้อความสีขาวที่ด้านล่างของหัวที่มีข้อความสีขาวบนพื้นหลังสีดำปุ่มข้อความสีขาวเปิดใช้งานปุ่มพื้นหลังถ่านและเชื่อมโยงไปยังข้อความสีขาวบนพื้นหลังสีฟ้า กล่องรับสัญญาณยึดค่าแอตทริบิวต์เป็นสีเทาอ่อนค่าเป็นสีขาว | ความพยายาม |
ปุ่มรูปแบบการใช้ class = "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="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" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
ลอง»
หัวข้อปุ่ม
ไอคอนธีม
กระทู้ป๊อป
ชุดรูปแบบปุ่มที่ด้านล่างของหัวและ
ตัวอย่าง
<div ข้อมูลบทบาท = "หัว">
<a href="#" class="ui-btn ui-btn-b"> บ้าน </a>
<h1> ยินดีต้อนรับสู่หน้าแรกของฉัน </ h1>
<a href="#" ค้นหา class="ui-btn"> </a>
</ div>
<div ข้อมูลบทบาท = "ส่วนท้าย">
<a href="#" class="ui-btn ui-btn-b"> Follow me on Facebook </a>
<a href="#" class="ui-btn"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Follow me on Instagram </a>
</ div>
<a href="#" class="ui-btn ui-btn-b"> บ้าน </a>
<h1> ยินดีต้อนรับสู่หน้าแรกของฉัน </ h1>
<a href="#" ค้นหา class="ui-btn"> </a>
</ div>
<div ข้อมูลบทบาท = "ส่วนท้าย">
<a href="#" class="ui-btn ui-btn-b"> Follow me on Facebook </a>
<a href="#" class="ui-btn"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Follow me on Instagram </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>
<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="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<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>
<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>
<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>
<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>
<legend>Click me - I'm collapsible!</legend>
ลอง»
เพิ่มหัวข้อใหม่
มือถือ jQuery สามารถเพิ่มหัวข้อใหม่ในหน้ามือถือ
โดยการปรับเปลี่ยนไฟล์ CSS ที่จะเพิ่มหรือแก้ไขรูปแบบใหม่ (ถ้าคุณได้ดาวน์โหลด jQuery Mobile) คุณจะต้องคัดลอกโมดูลสไตล์และจากนั้นอีกครั้งตัวอักษรชื่อชั้นคำสั่ง (CZ) และเพิ่มสีและลักษณะแบบอักษรที่คุณชื่นชอบ
นอกจากนี้คุณยังสามารถเพิ่มเอกสาร HTML ที่เกี่ยวข้องกับรูปแบบใหม่แถบเครื่องมือเพิ่มระดับ: UI-Bar- (AZ), เพิ่มหมวดหมู่เนื้อหาข้อความ: UI-ร่างกายของ (AZ) เพิ่มหมวดหมู่หน้านี้: UI-หน้า Theme- ( 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>
.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 มือถือเป็นองค์ประกอบโดยใช้ JavaScript เพื่อสืบทอดรูปแบบธีมปกครอง กับรุ่น 1.4 กรอบเน้นมากขึ้นในการปรับปรุงประสิทธิภาพการทำงานเป็นไม่ได้ใช้งาน JavaScript เพื่อสืบทอด แต่ใช้ CSS บริสุทธิ์ ทีมงานมือถือ jQuery สำหรับเรื่องนี้ได้สร้างเครื่องมือในการอยู่ ThemeRoller คุณสามารถใช้เครื่องมือนี้ในการอัพเกรดรูปแบบเก่าทำให้มันเข้ากันได้กับรุ่นใหม่ |
|---|