เอกสารประกอบการเรียนรายวิชาชาววังสวนสุนันทา

นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลัยราชภฏั สวนสนุ นั ทา 125

ตารางอย่างอัตโนมัติตามขนาดของพนื้ ท่ีที่พอดีกบั ข้อมูลมาก
น (คอลมั นอ์ ย่ดู ้านบน) แต่หากพื้นทน่ี ้อยจะปรบั การแสดงผล

อาจารยณ์ ัฐภัทร แกว้ รัตน

jQuery Mobile : Tables

1. Reflow Table ใชค้ าสงั่
<table data-role="table"

ส่วนประกอบท่สี าคญั ในการทาตาราง คือ

• <table data-role="table" class="ui-responsive">
• <thead> มาจากคาว่า Table Head คือ การกาหนดเซ็ตค
• <th> มาจากคาว่า Table Head แต่ต่างจาก <thead> คือ
• <tbody> มาจากคาว่า Table Body คือ การกาหนดส่วนข
• <tr> คือ Table Row หรอื แถวของขอ้ มลู ซึ่ง <tr> จะครอ
• <td> คือ Table Data หรือ Cell ข้อมลู (Data Cell) ซึ่งอ

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสุนนั ทา 126

" class="ui-responsive">

> </table> คือ Tag สาหรบั ระบุตาราง 1 ตาราง
คอลมั น์ของข้อมูลนนั่ เอง (Column)
อ <th> จะเป็นการกาหนดหัวขอ้ ย่อยๆ แต่ละคอลมั น์นั่นเอง
ของขอ้ มลู
อบ <td> เสมอ
อยู่ภายใต้ <tr> เสมอ

อาจารย์ณฐั ภทั ร แกว้ รตั น

jQuery Mobile : Tables

<table data-role="table" class="ui-responsive">
<thead>
<tr>
<th>CustomerID</th>
<th>CustomerName</th>
<th>ContactName</th>
<th>Address</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
</tr>
</tbody>

</table>

นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนนั ทา 127

อาจารย์ณัฐภัทร แก้วรัตน

jQuery Mobile : Tables

<table data-role="table" class="ui-responsive"> <tr>
<thead> <td>2</td>
<tr> <td>Antonio Moreno Taquería</td
<th>CustomerID</th> <td>Antonio Moreno</td>
<th>CustomerName</th> <td>Mataderos 2312</td>
<th>ContactName</th> <td>México D.F.</td>
<th>Address</th> <td>05023</td>
<th>City</th> <td>Mexico</td>
<th>PostalCode</th> </tr>
<th>Country</th> <tr>
</tr> <td>3</td>
</thead> <td>Around the Horn</td>
<tbody> <td>Thomas Hardy</td>
<tr> <td>120 Hanover Sq.</td>
<td>1</td> <td>London</td>
<td>Alfreds Futterkiste</td> <td>WA1 1DP</td>
<td>Maria Anders</td> <td>UK</td>
<td>Obere Str. 57</td> </tr>
<td>Berlin</td> <tr>
<td>12209</td> <td>4</td>
<td>Germany</td> <td>Berglunds snabbköp</td>
</tr> <td>Christina Berglund</td>
<td>Berguvsvägen 8</td>
<td>Luleå</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>

นภัทร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสุนนั ทา 128

<table data-role="table" class="ui-responsive">
<thead>

d> <tr>
<th> COLUMN </th>
</tr>

</thead>

<tbody>
<tr>
<td> DATA CELL </td>
<tr>
</tbody>

</table>

อาจารย์ณฐั ภัทร แก้วรัตน

jQuery Mobile : Tables

2. Column Toggle คือ ผใู้ ชส้ ามารถเลือกแสดงผลค

เพยี งพอต่อคอลมั นท์ ง้ั หมด ผูใ้ ชอ้ าจเลือกคอลัมนท์ สี่ นใจ

นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวิทยาลัยราชภฏั สวนสุนนั ทา 129

คอลมั นบ์ างคอลัมนข์ อ้ มูลได้ เนือ่ งมาจากการแสดงผลอาจไม่
จในเวลาหนงึ่ ๆ ได้

อาจารย์ณฐั ภัทร แกว้ รัตน

jQuery Mobile : Tables

2. Column Toggle ใชค้ าสัง่

<table data-role="table" data-mode="column

ส่วนประกอบทสี่ าคัญในการทาตารางเพ่มิ เตมิ สาหรับการทา
• data-priority คือ การกาหนดความสาคัญในการแสดงผล

ลาดบั ที่ 5 แตพ่ ื้นท่ีแสดงผลไมพ่ อ จะทาการซอ่ นคอลัมน์ที่ม
การคลกิ ปุ่ม Toggle

นภัทร์ สาขาวชิ าการจัดการสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสนุ ันทา 130

ntoggle" class="ui-responsive" id="myTable">
า Column Toggle คอื
โดยลาดบั 1 แสดงวา่ มคี วามสาคญั มากก็จะแสดงผล แต่หาก
มคี วามสาคัญน้อยไว้ แต่ผ้ใู ชก้ ส็ ามารถเรียกเปดิ คอลมั น์ได้ โดย

อาจารย์ณฐั ภัทร แกว้ รัตน

jQuery Mobile : Tables

<table data-role="table" data-mode="columntoggle" class="ui-re
<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>

นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสุนันทา 131

esponsive" id="myTable">

ความสาคัญต่า ระบุ data-priority=“6” พน้ื ทไ่ี มพ่ อจะไมแ่ สดงผล
แสดงผลตลอดเวลาเสมอ ไม่ตอ้ งระบุ data-priority

ความสาคญั สูง ระบุ data-priority="1”

อาจารย์ณฐั ภัทร แก้วรตั น

jQuery Mobile : Tables

นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลัยราชภัฏสวนสุนันทา 132

<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>

อาจารยณ์ ฐั ภทั ร แกว้ รตั น

jQuery Mobile : Tables

• ปมุ่ Column Toggle สามารถปรับแกไ้ ขได้ โดย

<table data-role="table" data-mode="col
data-column-btn-text=“COLUMNS!" id="m

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสุนนั ทา 133

ยปรบั ข้อมลู ใน Tag <table> ดังน้ี
lumntoggle" class="ui-responsive"
myTable">

อาจารยณ์ ัฐภทั ร แกว้ รัตน

jQuery Mobile : Styling Table

• การกาหนดการแสดงผลของตารางน้นั สามารถทาไดเ้ พ
ตาราง เปน็ ต้น โดยมีวิธีการดังนี้

1. การกาหนดเงาให้แกต่ าราง

<table data-role="table" data-mode="columntoggle" cla

2. การกาหนดเสน้ ขอบของตาราง สามารถกาหนดโ

<style>
tr {

border-bottom: 1px solid lightgray;
}
</style>

3. การกาหนดแบบลาดับแถว คู่ (even) / คี่ (odd

<style>
th {

border-bottom: 1px solid #d6d6d6;
}

tr:nth-child(even) {
background: #e9e9e9;

}
</style>

นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสนุ ันทา 134

es

พ่มิ เติม เชน่ การให้เงาแกต่ าราง การกาหนดขอบเส้น

ass="ui-responsive ui-shadow" id="myTable">

โดยใชค้ วามสามารถของ CSS

d) ต่างกัน

อาจารย์ณัฐภัทร แก้วรตั น

jQuery Mobile : Styling Table

<head>
<meta name="viewport" content="width=device
<link rel="stylesheet" href="http://code.jquery.c
<script src="http://code.jquery.com/jquery-1.11.
<script src="http://code.jquery.com/mobile/1.4.
<style>
th {

border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {

background: #e9e9e9;
}
</style>
</head>

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลัยราชภัฏสวนสุนันทา 135

es

e-width, initial-scale=1">
com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
.2.min.js"></script>
.5/jquery.mobile-1.4.5.min.js"></script>

อาจารยณ์ ฐั ภทั ร แกว้ รตั น

jQuery Mobile : Layout Grids

• Grid แปลว่า ตะแกรง โดยในการออกแบบเว็บไซต
ข้อมูลในลักษณะตารางปกติ ตา่ งจาก <table> ต
(Layout Grid) การแสดงผลเทา่ นนั้ ซ่ึงนกั ออกแบ
ตาแหนง่ ของข้อมลู /ภาพ บนเว็บได้ตรงตามความต

นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลัยราชภัฏสวนสนุ ันทา 136

ต์ด้วย JQUERY MOBILE นน้ั Grid คอื การแสดง
ตรงท่ี Grid ทาหนา้ ท่ีเปน็ การกาหนดโครงของตาราง
บบเว็บส่วนใหญ่ นิยมใช้ Grid มาช่วยในการจดั วาง
ตอ้ งการมากขนึ้

อาจารย์ณฐั ภัทร แกว้ รตั น

jQuery Mobile : Layout Grids

• Grid ท่ี JQUERY เตรียมมาใหน้ ั้น จะเป็นการใช้พื้น
เป็น % เนอื่ งจากอปุ กรณ์แตล่ ะชนิดมีขนาดความก
iPad กับ iPhone เป็นตน้ ดังนัน้ การใชค้ วามกวา้ ง
กาหนดส่วนประกอบ

• Grid ที่ JQUERY เตรยี มมาให้นั้น มี 5 ลกั ษณะ ค

Grid Class Columns Col
ui-grid-solo
ui-grid-a 1 100%
ui-grid-b
ui-grid-c 2 50% / 50%
ui-grid-d
3 33% / 33% / 33

4 25% / 25% / 25

5 20% / 20% / 20

นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลัยราชภฏั สวนสุนันทา 137

นท่ีแนวนอน คิดเป็นความกวา้ ง 100% สาเหตทุ ีใ่ ช้
กวา้ งหน้าจอแตกตา่ งกัน เช่น ขนาดความกวา้ งจอ
งเป็น % จะสะดวกต่อผอู้ อกแบบเวบ็ ไซต์ในการ

คือ Corresponds To
ui-block-a
lumn Widths ui-block-a|b
ui-block-a|b|c
3% ui-block-a|b|c|d
5% / 25% ui-block-a|b|c|d|e
0% / 20% / 20%

อาจารย์ณัฐภทั ร แก้วรตั น

jQuery Mobile : Layout Grids

<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-

shadow">First Column Button</a><br>
<span>First Column: This is some text. This

is some text. This is some text. This is some text.
This is some text.</span>

</div>

<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-
shadow">Second Column Button</a><br>
<span>Second Column: This is some text.
This is some text. This is some text. This is some
text.</span>
</div>
</div>

นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสนุ นั ทา 138

<div class="ui-grid-a">

อาจารยณ์ ฐั ภัทร แกว้ รัตน

jQuery Mobile : Customize G

• Customize Grids คือ การที่ผู้ออกแบบเวบ็ ตอ้ งก

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

นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสุนันทา 139

Grids

การปรบั ปรุง Style ของ Grid ใน ส่วนของ CSS

class="ui-grid-b">
<div class="ui-block-a"><span>First Column</span></div>
<div class="ui-block-b"><span>Second
mn</span></div>
<div class="ui-block-c"><span>Third
mn</span></div>
div>

อาจารยณ์ ัฐภทั ร แก้วรัตน

jQuery Mobile : Multiple Row

• Multiple Row หรือ การทาตารางแบบหลายแถว
ตลอดเวลา

<div data-role="main" class="ui-content"> 1
<p>Three-column Layout:</p>
<div class="ui-grid-b">

<div class="ui-block-a" style="border:1px solid

black;"><span>Some Text</span></div>

<div class="ui-block-b" style="border:1px solid

black;"><span>Some Text</span></div>

<div class="ui-block-c" style="border:1px solid

black;"><span>Some Text</span></div>

</div>

<p>Three-column Layout With Multiple Rows:</p>

<div class="ui-grid-b">

<div class="ui-block-a" style="border:1px solid

นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวิทยาลัยราชภัฏสวนสนุ นั ทา 140

ws

ว เราสามารถนา CSS ทีป่ ระกาศใช้ มาเรียกใชไ้ ด้

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

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

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

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

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

black;"><span>Some Text</span></div>
</div>
</div>

อาจารยณ์ ัฐภัทร แก้วรตั น

jQuery Mobile : Multiple Row

1
2

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลัยราชภฏั สวนสนุ นั ทา 141

ws

อาจารยณ์ ฐั ภัทร แก้วรตั น

jQuery Mobile : Responsive G

• Responsive Grids คือ Grids หรือ ตาราง ที่ตอบ
ปรับเปลีย่ นขนาดไป หรอื แกนท่ใี ชอ้ ุปกรณเ์ ปลีย่ น
ขนาดน้ันๆ โดย เพิ่ม value ในส่วนของ Class ใน
<div class="ui-grid

นภัทร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสุนนั ทา 142

Grids

บสนองผู้ใช้ กรณีทห่ี นา้ จอ Web Browser มีการ
นไป หนา้ เว็บกจ็ ะถูกปรับให้สอดคลอ้ งกบั หน้าจอ
น div
d-b ui-responsive">

อาจารย์ณฐั ภัทร แกว้ รัตน

jQuery Mobile : Responsive G

<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow">
<span>First Column: This is some text. This is som

some text.</span>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow">
<span>Second Column: This is some text. This is

text.</span>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-shadow">
<span>Third Column: This is some text. This is so
</div>

</div>

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสุนันทา 143

Grids

>First Column Button</a><br>
me text. This is some text. This is some text. This is

>Second Column Button</a><br>
some text. This is some text. This is some

>Third Column Button</a><br>
ome text. This is some text. This is some text.</span>

อาจารย์ณฐั ภทั ร แกว้ รตั น

jQuery Mobile : List Views

• List Views คอื การแสดงรายการ หรือ แสดงลิสต
• การใช้ List Views ควรทาความเขา้ ใจเกีย่ วกับ Lis

• ในภาษา HTML มี Tag ท่ีใชใ้ นการแสดง List ขอ้ มูลมา
1. <ol> </ol> หรือ Ordered List เป็น List ทส่ี ร้าง
2. <ul> </ul> หรอื Unordered List เป็น List ที่ไม
โดยทง้ั OL และ UL นั้น จะต้องใชร้ ว่ มกบั LI เสมอ โดย <
นนั่ เอง ดงั นั้น จะใช้ <ol> หรอื <ul> โดดๆ ไม่ได้ จะตอ้ ง

<ol data-role="listview">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>

</ol>

นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสุนนั ทา 144

ต์ข้อมูล
st เบอื้ งต้น ดังน้ี

านานแล้ว โดยมี List 2 ลักษณะ คือ
งลาดบั ตวั เลข
ม่แสดงลาดบั ตวั เลข
<li> </li> หรอื List Item คือ ชุดขอ้ มูลใน List แตล่ ะตวั
งใช้ร่วมกับ <li> เสมอ ดังตวั อยา่ ง

อาจารย์ณัฐภัทร แก้วรตั น

jQuery Mobile : List Views

<div data-role="main" class="ui-content">
<h2>Ordered List:</h2>
<ol data-role="listview">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ol>
<h2>Unordered List:</h2>
<ul data-role="listview">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>

</div>

นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนนั ทา 145

อาจารย์ณัฐภทั ร แก้วรัตน

jQuery Mobile : List Views

• การกาหนด Inset (ใสก่ รอบ) = True เพอ่ื ทาให้

นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลัยราชภัฏสวนสนุ ันทา 146

List มกี รอบ

<div data-role="main" class="ui-content">
<h2>A standard list:</h2>
<ul data-role="listview">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul><br>
<h2>List with data-inset="true":</h2>
<ul data-role="listview" data-

inset="true">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>

</div>

อาจารย์ณฐั ภทั ร แก้วรตั น

jQuery Mobile : List Dividers

• List Dividers หรือ ตัวแยก/จัดกล่มุ List นั่นเอง

นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนันทา 147

List Dividers

อาจารยณ์ ัฐภทั ร แก้วรตั น

jQuery Mobile : List Dividers

<div data-role="main" class="ui-content">
<h2>List Dividers</h2>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
<li data-role="list-divider">Asia</li>
<li><a href="#">India</a></li>
<li><a href="#">Thailand</a></li>
<li data-role="list-divider">Africa</li>
<li><a href="#">Zimbabwe</a></li>
<li><a href="#">Uganda</a></li>
</ul>

</div>

นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสนุ นั ทา 148

>

อาจารย์ณัฐภทั ร แกว้ รัตน

jQuery Mobile : List Dividers ช

• autodividers คือ การให้ JQUERY MOBILE ชว่ ย

<ul data-role="listview" data-autod
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

นภัทร์ สาขาวชิ าการจัดการสารสนเทศ มหาวทิ ยาลัยราชภัฏสวนสนุ ันทา 149

ชนิด autodividers

ยสร้างตัวแยกให้อตั โนมตั ิ ดงั ตัวอย่าง

dividers="true">

อาจารยณ์ ัฐภทั ร แก้วรตั น

jQuery Mobile : List Dividers ช

<ul data-role="listview" data-autodividers="true" dat
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>

</ul>