ตารางที่ตอบสนองต่อ
การออกแบบที่ตอบสนองเป็นประโยชน์เมื่อคุณต้องการเนื้อหาของหน้าเว็บบนมือถือเพื่อตอบสนองต่ออุปกรณ์ของผู้ใช้เช่นขนาดหน้าจอและการวางแนวของมัน
ด้วยชื่อชั้นง่าย jQuery มือถือเป็นความตระหนักในขนาดหน้าจอของผู้ใช้ที่มีอยู่และปรับขนาดโดยอัตโนมัติตัวเองเพื่อแสดงเนื้อหาที่เกี่ยวข้องสำหรับผู้ใช้ที่เฉพาะเจาะจง
ตารางที่ตอบสนองต่อช่วยให้เราสามารถแสดงชุดใหญ่ของข้อมูลตารางที่จะดูน่าสนใจสำหรับทั้งโทรศัพท์มือถือและเดสก์ท็
มีสองประเภทของตารางการตอบสนองคือ: reflow และคอลัมน์สลับ
ตาราง reflow
โหมด reflow ตำแหน่งข้อมูลตารางในแนวนอนไปจนถึงขนาดต่ำสุดแล้วแถวทั้งหมดจะถูกจัดกลุ่มเข้าด้วยกันในแนวตั้ง
สร้างตารางเพิ่มข้อมูลบทบาท = "ตาราง" และชั้นของ "ui-responsive" ใน <table> องค์ประกอบ:
สำหรับตารางการตอบสนองการทำงานได้อย่างถูกต้องจะต้องมี <thead> และ <tbody> องค์ประกอบ
อย่าใช้ rowspan หรือแอตทริบิวต์ colspan; พวกเขาจะไม่ได้รับการสนับสนุนในตารางการตอบสนอง
คอลัมน์ Toggle Table
โหมด "สลับคอลัมน์" จะซ่อนคอลัมน์เมื่อไม่มีความกว้างพอที่จะแสดงข้อมูล
การสร้างตารางคอลัมน์สลับเพิ่มต่อไปนี้ <table> องค์ประกอบ:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >โดยค่าเริ่มต้น jQuery Mobile จะซ่อนคอลัมน์จากด้านขวาของตาราง แต่คุณจะได้รับอนุญาตเพื่อระบุคอลัมน์ที่ควรจะซ่อนหรือแสดงในลำดับที่เฉพาะเจาะจง เพิ่มแอตทริบิวต์ข้อมูลความสำคัญกับส่วนหัวของตาราง (<th>) และระบุตัวเลขระหว่าง 1 (ลำดับความสำคัญสูงสุด) 6 (ลำดับความสำคัญต่ำสุด):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>ถ้าคุณไม่ได้ระบุความสำคัญสำหรับคอลัมน์คอลัมน์จะเป็นถาวรและไม่สามารถนำไปหลบซ่อนตัวอยู่
วางไว้ด้วยกันและคุณได้สร้างตารางคอลัมน์สลับ! ขอให้สังเกตว่ากรอบการทำงานจะเพิ่มปุ่มในมุมขวาด้านบนของตาราง นี้จะช่วยให้ผู้ใช้สามารถเลือกคอลัมน์ที่จะแสดงในตาราง:
ตัวอย่าง
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
ลองตัวเอง» เพื่อเปลี่ยนข้อความปุ่มตารางสลับใช้แอตทริบิวต์ข้อมูลคอลัมน์ btn-ข้อความ:
ตัวอย่าง
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> ลองตัวเอง» ตารางจัดแต่งทรงผม
ใช้ "UI-เงา" ชั้นเรียนเพื่อเพิ่มเงาให้กับตาราง:
เพิ่มเงา
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
ลองตัวเอง» สำหรับการจัดแต่งทรงผมในตารางต่อไปใช้ CSS:
เพิ่มขอบด้านล่างของทุกแถวของตาราง
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
ลองตัวเอง» เพิ่มขอบด้านล่างของทุก <TH> องค์ประกอบและสีพื้นหลังให้ทุกคนแม้กระทั่งแถวของตาราง
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
ลองตัวเอง»