กริด jQuery Mobile

jQuery Mobile ติดตั้งเน็ต

jQuery Mobile มีชุดรูปแบบเเน็ตคอลัมน์ที่มีฐานที่ CSS อยู่ในได้。อย่างไรก็ตาม มันไม่เป็นไปตามที่แนะนำที่จะใช้รูปแบบคอลัมน์ในอุปกรณ์เคลื่อนที่ เนื่องจากความกว้างของหน้าจอในอุปกรณ์เคลื่อนที่มีจำกัด

แต่บางครั้งคุณจำเป็นต้องจัดตั้งองค์ประกอบย่อยที่เล็กกว่า เช่น ปุ่มหรือแถวนำทาง ในลักษณะที่ขว้างเคียงกันเหมือนตาราง ในกรณีนี้ รูปแบบคอลัมน์จึงเหมาะสมต่อการใช้งาน。

คอลัมน์ในเเน็ตมีความกว้างเท่ากัน (ความกว้างทั้งหมด 100%), ไม่มีเส้นตรง, พื้นหลัง, มาร์กเกิร์นด้านนอกหรือมาร์กเกิร์นด้านใน。

มีรูปแบบเเน็ตที่สามารถใช้งานได้สี่รูปแบบ:

ชั้นเเน็ต คอลัมน์ ความกว้างของคอลัมน์ ตรงกัน ตัวอย่าง
ui-grid-a 2 50% / 50% ui-block-a|b ทดสอบ
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c ทดสอบ
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d ทดสอบ
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e ทดสอบ

คำแนะนำ：ในตัวแทนคอลัมน์，ตามจำนวนคอลัมน์ที่มี องค์ประกอบย่อยสามารถตั้งค่าชั้น ui-block-a|b|c|d|e ได้。คอลัมน์เหล่านี้จะขว้างเคียงกันตามลำดับ。

ตัวอย่าง 1: สำหรับรูปแบบ ui-grid-a (layout สองคอลัมน์)，คุณจำเป็นต้องกำหนดสององค์ประกอบย่อย ui-block-a และ ui-block-b。

ตัวอย่าง 2: สำหรับรูปแบบ ui-grid-b (layout สามคอลัมน์)，กรุณาเพิ่มสามองค์ประกอบย่อย ui-block-a, ui-block-b และ ui-block-c。

ปรับแต่งแนวเนื้อหา

คุณสามารถปรับแต่งโปรไฟล์คอลัมน์ด้วย CSS ได้:

ตัวอย่าง

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

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

คุณยังสามารถปรับแต่งโปรไฟล์บล็อคด้วยรูปแบบในแถวได้:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

บรรทัดหลายบรรทัด

มีความเป็นไปได้ที่จะมีหลายบรรทัดในคอลัมน์เช่นกัน。

หมายเหตุ：ui-block-a-class จะสร้างบรรทัดใหม่เสมอ：

ตัวอย่าง

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

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