โทรง 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">Go To The Themed Dialog Page</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="#">รายการ</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">สีแดง</option>
  <option value="green">สีเขียว</option>
  <option value="blue">สีฟ้า</option>
</select>

ทดลองด้วยตัวเอง

ฟอร์มที่สามารถย่อยให้เห็นได้ที่มีสไตล์

ตัวอย่าง

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>คลิกฉัน - ฉันสามารถย่อยให้เห็นได้!</legend>

ทดลองด้วยตัวเอง

เพิ่มสไตล์ใหม่

jQuery Mobile ยังอนุญาตให้คุณเพิ่มสไตล์ใหม่ในหน้าเว็บเคลื่อนที่

โปรดแก้ไขไฟล์ CSS (เช่น ที่ได้ดาวน์โหลด jQuery Mobile) เพื่อเพิ่มหรือแก้ไขสไตล์ใหม่。เพียงแค่คัดลอกสไตล์หนึ่งส่วน และเปลี่ยนชื่อประเภทด้วยตัวอักษร (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>

ทดลองด้วยตัวเอง