ธีมมือถือ jQuery
jQuery มือถือให้สองรูปแบบที่แตกต่างกันสไตล์ "a" และ "b" - แต่ละคนมีสีที่แตกต่างกันสำหรับปุ่มบาร์บล็อกเนื้อหาและอื่น ๆ
ปรับแต่งรูปลักษณ์ของแอพลิเคชันของคุณให้ใช้ data-theme แอตทริบิวต์และกำหนดแอตทริบิวต์ด้วยตัวอักษร:
<div data-role="page" data-theme="a|b" >
| ความคุ้มค่า | ลักษณะ | ตัวอย่าง |
|---|---|---|
| a | ตัวอักษรสีดำบนพื้นหลังสีเทาอ่อนสำหรับเนื้อหาของหน้า ข้อความสีดำบนพื้นสีเทาสำหรับส่วนหัวและส่วนท้าย ตัวอักษรสีดำบนพื้นหลังสีเทาอ่อนสำหรับปุ่ม ข้อความสีขาวบนพื้นหลังสีฟ้าสำหรับปุ่มที่ใช้งาน ข้อความสีฟ้าในการเชื่อมโยง ข้อความสีเทาอ่อน (ยึด) หรือตัวอักษรสีดำ (ค่า) บนพื้นหลังสีขาวสำหรับช่องใส่ | ลองมัน |
| b | ข้อความสีขาวบนพื้นสีเทาเข้มสำหรับเนื้อหาของหน้า ข้อความสีขาวบนพื้นสีเทาเข้มสำหรับส่วนหัวและส่วนท้าย ข้อความสีขาวบนพื้นถ่านสำหรับปุ่ม ข้อความสีขาวบน "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> ลองตัวเอง» ปุ่มชุดรูปแบบ
ไอคอนชุดรูปแบบ
ตัวอย่าง
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
ลองตัวเอง» ชุดรูปแบบป๊อปอัป
ปุ่มชุดรูปแบบในส่วนหัวและท้าย
ตัวอย่าง
<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 ยังช่วยให้คุณเพิ่มรูปแบบใหม่ไปยังหน้าเว็บมือถือของคุณ
เพิ่มหรือแก้ไขรูปแบบใหม่โดยการแก้ไขไฟล์ CSS (ถ้าคุณมีดาวน์โหลด jQuery Mobile) เพียงคัดลอกบล็อกของรูปแบบและเปลี่ยนชื่อชั้นเรียนที่มีชื่อตัวอักษร (CZ) และปรับสีและแบบอักษรที่คุณต้องการ
นอกจากนี้คุณยังสามารถเพิ่มรูปแบบใหม่โดยใช้การเรียนในรูปแบบเอกสาร HTML - เพิ่มระดับ "UI-Bar- (แอริโซนา)" สำหรับแถบเครื่องมือ "UI-ร่างกายของ (แอริโซนา)" สำหรับเนื้อหาและ 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>
ลองตัวเอง» ในรุ่นก่อนหน้าของมือถือ jQuery, JavaScript ใช้ในการจัดการวิธีการที่เป็นองค์ประกอบที่ควรสืบทอดธีมของผู้ปกครอง ในฐานะที่เป็น 1.4 กรอบมุ่งเน้นไปที่การปรับปรุงประสิทธิภาพและ JavaScript ได้ถูกแทนที่โดยบริสุทธิ์ CSS
ทีมงานมือถือ jQuery ได้สร้างเครื่องมือที่ช่วยให้คุณสามารถสร้างธีมของคุณเอง: ผู้ ThemeRoller นอกจากนี้คุณยังสามารถใช้เครื่องมือนี้ในการอัพเกรดรูปแบบเก่าที่จะทำให้พวกเขาเข้ากันได้กับรุ่นใหม่