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

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

els

ถทาได้ 4 วิธี
nel จากนน้ั แผง Panel จะถกู ปิดลง
ย (data-dismissible = “True | False”)
e) (data-swipe-close = “True | False”)
ละปดิ Panel

class="ui-btn ui-btn-inline">Close Panel</a>

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

jQuery Mobile : Closing Pane

2) การปิดแบบตอ้ งลาก (left swipe) ไปทางซ้าย

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

els

ย (data-dismissible = “True | False”)

<div data-role="panel" id="myPanel"
data-dismissible="false">

<h2>Panel Header</h2>
<p>Close the panel by pressing the Esc
key or by swiping to the left.</p>
</div>

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

jQuery Mobile : Closing Pane

3) การปิดแบบใดๆ ทีไ่ ม่ใช่การลาก (swipe close

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

els

e) (data-swipe-close = “True | False”)

<div data-role="panel" id="myPanel"
data-swipe-close="false">

<h2>Panel Header</h2>
<p>Close the panel by clicking outside of
it or by pressing the Esc key.</p>
</div>

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

jQuery Mobile : Closing Pane

4) การปิดแบบสรา้ งปุ่มในแผง Panel เพ่อื แตะแล

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

els

ละปิด Panel

<div data-role="panel" id="myPanel">
<h2>Panel Header</h2>
<a href="#pageone" data-rel="close"

class="ui-btn ui-btn-inline ui-shadow ui-
corner-all ui-btn-a ui-icon-delete ui-btn-
icon-left">Close panel</a>
</div>

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

jQuery Mobile : Panel Display

• Effect การแสดง แผงข้อมูล (Panels) มี 3 ลักษณ

Attribute Value การแสดงแผง Panel แบบ
data-display="overlay"
data-display="push" การแสดงแผง Panel แบบ
เล่อื นหลบไปทางขวา
data-display="reveal"
เปน็ การแสดงแบบท่วั ไป คอื

<div data-role="panel" id="overlayPa
<div data-role="panel" id="revealPan
<div data-role="panel" id="pushPane

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

y

ณะ คือ

Description
บทับข้อมูล
บไมท่ บั ขอ้ มูล และแผงเลอ่ื นแสดงมาจากทางขวาพรอ้ มกบั ส่วนหลกั

อ การแสดงแผง Panel จะเกิดจาก ส่วนหลกั เล่อื นหลบไปทางขวา

anel" data-display="overlay">
nel" data-display="reveal">
el" data-display="push">

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

jQuery Mobile : Panel Display

Attribute Value การแสดงแผง Panel แบบ
data-display="overlay"

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

y

Description
บทับข้อมลู

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

jQuery Mobile : Panel Display

Attribute Value การแสดงแผง Panel แบบ
data-display="push" เลือ่ นหลบไปทางขวา

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

y

Description
บไมท่ ับขอ้ มูล และแผงเลือ่ นแสดงมาจากทางขวาพรอ้ มกับส่วนหลกั

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

jQuery Mobile : Panel Display

Attribute Value เปน็ การแสดงแบบทั่วไป ค
data-display="reveal"

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

y

Description
คอื การแสดงแผง Panel จะเกดิ จาก ส่วนหลัก เลื่อนหลบไปทางขวา

ส่วนหลกั เลื่อนหลบ
ให้ Panel

วิธีการน้ี เปน็ ค่าโดย
ปรยิ าย (Default)

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

jQuery Mobile : Positioning Pa

• โดยทวั่ ไป (Default) นั้น การแสดงผลแผง Panel
ดา้ นขวาได้ โดยใช้ Attribute ช่อื วา่ data-positio
<div data-role="panel" id="my

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

Panels

l จะแสดงในด้านซ้าย แตส่ ามารถกาหนดให้แสดงใน
on="right"
yPanel" data-position="right">

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

jQuery Mobile : Positioning Pa

• การกาหนดตาแหน่งของแผง Panel ยงั สามารถกา
<div data-role="panel" id="myPane

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

Panels

าหนดใหอ้ ยกู่ ับท่ี (Fixed) หรือ ไม่อยกู่ บั ท่ี ได้
el" data-position-fixed="true">

data-position-fixed="true"

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

jQuery Mobile : Collapsible C

• Collapsible คอื การพบั เกบ็
• Collapsible Content Blocks คือ บลอ็ คเนอ้ื หาทส่ี ามารถ
• Collapsible Content Blocks สามารถเรยี กใช้โดยการระบ

<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

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

Content Blocks

ถพับเก็บได้
บุ Attribute คือ data-role="collapsible" ใน <div>

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

jQuery Mobile : Collapsible C

<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Blocks</h1>
</div>

<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
</div>

<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>

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

Content Blocks

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

jQuery Mobile : Collapsible C

• โดยปกตแิ ลว้ (Default) ในส่วนของ Content Blo
เครอ่ื งหมาย + หรอื แถบ Collapse Block เพือ่ เป
สามารถกาหนดให้ Collapse Block แสดง Cont
Attribute คือ data-collapsed="false“ (หม
การพบั เกบ็ /ซ่อนในการแสดงผลตอนแรก)

<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="false
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>
</div>

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

Content Blocks

ock จะปิด (Closed) และรอใหผ้ ู้ใชแ้ ตะในสว่ นของ
ปิดสว่ นของ Content Block แตผ่ ู้ออกแบบเว็บ
tent Block ในขณะแสดงหน้าเวบ็ เพจ โดยกาหนด
มายความว่า การพบั เก็บ = เทจ็ ; ซ่งึ ทาใหไ้ ม่เกิด

e">

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

jQuery Mobile : Nested Colla

• Nested คือ รัง หรอื การซ้อนกัน
• Nested Collapsible Blocks คอื การพับเกบ็ ชน

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

apsible Blocks

นดิ มกี ารซ้อนกัน

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

jQuery Mobile : Nested Colla

<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible">
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible

block.</p>
</div>
</div>

</div>

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

apsible Blocks

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

jQuery Mobile : Collapsible S

• Collapsible Sets คอื กลุ่มของเคร่ืองมือพบั เกบ็
ครอบ <div data-role="collapsible">

<div data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
</div>

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

Sets

ใชก้ ารระบุ <div data-role="collapsibleset">

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

jQuery Mobile : Collapsible P

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

Popup

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

jQuery Mobile : Collapsible P

<div data-role="main" class="ui-content">

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon

<div data-role="popup" id="myPopup" class="ui-content">
<h2>Choose collapsible</h2>
<div data-role="collapsibleset">
<div data-role="collapsible">

<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
</div>
</div>

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

Popup

n-gear ui-btn-icon-left">Show Collapsible Popup</a>

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

jQuery Mobile : Remove rounded cor

• โดยปกติ ขอบของ Collapsible นั้น จะมีลกั ษณะ
กาหนดใหไ้ ม่แสดงขอบมนได้ โดยกาหนด Attribu

<div data-role="collapsible" data-inset="false">
<h1>This is a collapsible block without rounded

corners</h1>
<p>By default, collapsibles have rounded corners

with some margin, use the data-inset="false" attribute
to make them full width without corners.</p>
</div>

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

rners and add full width on collapsibles

ะเปน็ ขอบมน 4 มุม ผอู้ อกแบบเวบ็ สามารถ
ute คือ data-inset="false"

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

jQuery Mobile : Minify collap

• Minify collapsibles คอื Collapsible ทมี่ ขี นาด
data-mini="true"

<div data-role="collapsib

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

psibles

ดเลก็ โดยสามารถกาหนด Attribute คอื
ble" data-mini="true">

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

jQuery Mobile : Changing the

• ผูอ้ อกแบบเวบ็ สามารถปรับเปลย่ี น ICON บน Co
1. data-collapsed-icon คอื ICON ทแ่ี สดงในส
2. data-expanded-icon คอื ICON ทีแ่ สดงในส

<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed-icon=
<h1>The data-collapsed-icon specifies the icon of th
<p>The data-expanded-icon specifies the icon of th
</div>
</div>

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

e icon

ollapsibles ได้ โดยมี 2 ลักษณะ คอื
สถานะพบั เก็บ
สถานะขยาย/แผ่ขอ้ มูล

="arrow-d" data-expanded-icon="arrow-u">
he button</h1>
he button when the content is expanded.</p>

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

jQuery Mobile : Changing the

<div data-role="main" class="ui-content">
<div data-role="collapsible" data-iconpos="right">
<h1>Click me - I'm collapsible!</h1>
<p>For icon positioning in collapsibles, only the value
</div>

</div>

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

e icon position

e "left" or "right" is allowed. <b>Note:</b> left is default.</p>

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

สว่ นท่ี 3

• JQUERY MOBILE TABLES
• JQUERY MOBILE GRIDS
• JQUERY MOBILE LIST VIEWS
• JQUERY MOBILE LIST CONTENT
• JQUERY MOBILE FILTER ITEMS

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

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

jQuery Mobile : Tables

• ในการออกแบบเวบ็ ไซตส์ าหรับใชง้ านบนอุปกรณเ์
ของคาวา่ “Responsive” หรอื การตอบสนองผ

• Responsive คือ คาทเี่ นน้ ตอบสนองการทางานใ
เหมาะสมมากท่ีสุด เพอื่ สรา้ ง User Experience
(Screen Size) หรือในแกนใด (Orientation)

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

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

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

jQuery Mobile : Tables

• Responsive Tables คือ ตารางท่ีตอบสนองการ
อุปกรณ์เคลอ่ื นทไี่ ด้อยา่ งเหมาะสม ซึ่ง JQUERY M
Tables ไว้ 2 ลักษณะ คือ

1. Reflow คือ การปรับการไหลของขอ้ มลู ในตาร
ขอ้ มูลมากท่สี ดุ ซง่ึ หากพื้นทีพ่ อจะแสดงในลกั ษ
พ้นื ท่นี ้อยจะปรบั การแสดงผลเป็นตารางแนวต

2. Column Toggle คอื ผู้ใช้สามารถเลือกแสดง
แสดงผลอาจไม่เพียงพอต่อคอลัมนท์ ้งั หมด ผูใ้ ช

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

รใช้งานของผู้ใช้บนเวบ็ เบราเซอร์ทีท่ างานบน
MOBILE เตรียมการทางานแบบ Responsive

รางอยา่ งอตั โนมัติตามขนาดของพื้นที่ที่พอดกี บั
ษณะตารางแนวนอน (คอลัมนอ์ ยูด่ ้านบน) แตห่ าก
ต้ัง (คอลัมน์อยดู่ ้านซ้าย)
งผลคอลัมนบ์ างคอลัมนข์ อ้ มลู ได้ เนือ่ งมาจากการ
ช้อาจเลอื กคอลัมนท์ ี่สนใจในเวลาหนึ่งๆ ได้

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

jQuery Mobile : Tables

1. Reflow Table คือ การปรับการไหลของขอ้ มูลในต

ทส่ี ุด ซึ่งหากพืน้ ทีพ่ อจะแสดงในลักษณะตารางแนวนอน
เป็นตารางแนวตั้ง (คอลัมนอ์ ยู่ด้านซา้ ย)