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

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

บไปด้วยเครอ่ื งมอื /ป่มุ ทีส่ ามารถพบและเข้าถงึ ได้
จะอยู่ในสว่ น Header หรือ Footer

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

jQuery Mobile : Toolbars on

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-b
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-
</div>

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

Header Bars

btn-icon-left">Home</a>
-btn-icon-left">Search</a>

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

jQuery Mobile : Toolbars on

• หากตอ้ งการให้ปุม่ อยูท่ างซ้าย ให้กาหนด
<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon
<h1>Welcome To My Homepage</h1>
</div>
• หากต้องการใหป้ มุ่ อยู่ทางขวา ให้กาหนด
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-ico
</div>

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

Header Bars

n-home ui-btn-icon-left">Home</a>

on-home ui-btn-icon-left">Search</a>

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

jQuery Mobile : Toolbars on

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn
<a href="#" class="ui-btn ui-icon-plus ui-btn
<a href="#" class="ui-btn ui-icon-plus ui-btn
</div>

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

Footer Bars

n-icon-left">Add Me On Facebook</a>
n-icon-left">Add Me On Twitter</a>
n-icon-left">Add Me On Instagram</a>

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

jQuery Mobile : Toolbars on

<div data-role="footer" style="text-align:ce

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

Footer Bars

enter;">

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

jQuery Mobile : Toolbars on

<div data-role="footer" style="text-align:c
<div data-role="controlgroup" data-type
<a href="#" class="ui-btn ui-icon-plus ui-b
<a href="#" class="ui-btn ui-icon-plus ui-b
<a href="#" class="ui-btn ui-icon-plus ui-b
</div>
</div>

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

Footer Bars

center;">
e="horizontal">
btn-icon-left">Add Me On Facebook</a>
btn-icon-left">Add Me On Twitter</a>
btn-icon-left">Add Me On Instagram</a>

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

jQuery Mobile : Positioning H

• ตาแหนง่ ของ Header และ Footer น้ัน สามารถก
1) Inline คือ การท่ี Header และ Footer ไม่ถูก

ขอ้ มลู
2) Fixed คือ การที่ Header และ Footer จะถกู

Header และ Footer บนเว็บเพจตลอดเวลา)
3) Fullscreen คอื การที่ Header และ Footer

หากผูใ้ ช้แตะทหี่ นา้ จอ จะทาให้ Header และ
Main เต็มจอ และหากแตะอกี คร้งั จะทาให้ H

<div data-role="header" data-
<div data-role="footer" data-

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

Headers and Footers

กาหนดได้ 3 ลกั ษณะ คือ
กยดึ ไวค้ งท่ี แต่จะถกู เลอื่ นไปพร้อมๆ กับการเลอ่ื นดู

กยดึ ไวค้ งท่ี ไมถ่ ูกเลือ่ นไปพรอ้ มขอ้ มูล (แสดง

r จะถูกยึดไวแ้ ละมีลักษณะก่งึ โปรง่ ใส นอกจากนี้
Footer หายไป ซง่ึ ทาให้เหน็ ข้อมูลในส่วนของ
Header และ Footer แสดงอกี คร้ัง

-position=“ "></div>
-position=“ "></div>

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

jQuery Mobile : Positioning H

<div data-role="header" data-position=“Fullscreen”></div>
<div data-role="footer" data-position=“Fullscreen”></div>

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

Headers and Footers

>

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

jQuery Mobile : Navigation Ba

• Navigation Bars คือ แถบนาทาง มลี กั ษณะเป็นก
และ Footer เพอื่ สะดวกในการใช้งาน

<div data-role="header">
<div data-role="navbar">
<ul>

<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>

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

ars

กลมุ่ ของปุ่มตา่ งๆ โดยปกตจิ ะอยูใ่ นสว่ น Header

ul คือ unordered list คอื การเรยี งหวั ข้อ
แบบไมใ่ ชต้ วั เลข
li คือ list Item คือ หวั ข้อแต่ละหวั ขอ้
ทง้ั ul และ li น้ัน เป็นคาสั่งใน HTML ซงึ่ ใช้
ในการทารายการหวั ข้อ แตใ่ น jQuery Mobile
นามาประยกุ ตเ์ พอ่ื ทา Navigation Bars

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

jQuery Mobile : Navigation Ba

<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<div data-role="navbar">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
</div>

<div data-role="main" class="ui-content">
<p>My Content..</p>
</div>

<div data-role="footer">
<h1>My Footer</h1>
</div>
</div>

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

ars

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

jQuery Mobile : Icons in Navig

• Navigation Bars สามารถใส่ icon ให้ปมุ่ ได้ โดยว
มาแลว้ ในส่วนของ Buttons
<a href="#anylink" data-ic

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

gation Buttons

วธิ ีการเดียวกับการใส่ icon ใหป้ ่มุ ปกตทิ ีเ่ คยผา่ น
con="search">Search</a>

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

jQuery Mobile : Icons in Navig

Attribute Value Home
data-icon="home" Right Arro
data-icon="arrow-r" Search
data-icon="search"

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

gation Buttons

Description
ow

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

jQuery Mobile : Icons Referen

• การใส่ ICON ให้ปุ่ม ในแบบต่างๆ
<a href="#anylink" class="ui-btn ui-icon-refr
<button class="ui-btn ui-icon-refresh ui-btn
<input type="button" value="Refresh page"
<a href="#anylink" data-icon="refresh">Ref
<li data-icon="refresh"><a href="#">Click m

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

nce

resh ui-btn-icon-left">Refresh Page</a>
n-icon-left">Refresh Page</button>
data-icon="refresh">
fresh Page</a>
me</a></li>

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

jQuery Mobile : Icons Referen

• http://www.w3schools.com/jquerymobile/

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

nce

/jquerymobile_ref_icons.asp

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

jQuery Mobile : Icons Referen

• http://www.w3schools.com/jquerymobile/

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

nce

/jquerymobile_ref_icons.asp

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

jQuery Mobile : Icons Referen

• http://www.w3schools.com/jquerymobile/

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

nce

/jquerymobile_ref_icons.asp

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

jQuery Mobile : Icons Referen

• http://www.w3schools.com/jquerymobile/

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

nce

/jquerymobile_ref_icons.asp

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

jQuery Mobile : Icons Referen

• http://www.w3schools.com/jquerymobile/

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

nce

/jquerymobile_ref_icons.asp

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

jQuery Mobile : Positioning Ic

• การกาหนดตาแหนง่ ของ icon ใน Navigation Ba
data-iconpos="top" ซึง่ ใส่ไว้ในสว่ นของ NavB

<div data-role="navbar" data-iconpos="top
<ul>
<li><a href="#" data-icon="home">Hom
<li><a href="#" data-icon="arrow-r">Pa
<li><a href="#" data-icon="search">Sea
</ul>

</div>

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

cons

ars สามารถกาหนดได้ โดยการใช้ Attribute ชอื่ วา่
Bar
p">

me</a></li>
age Two</a></li>
arch</a></li>

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

jQuery Mobile : Positioning Ic

<div data-role="navbar" data-

Attribute Value Description
data-iconpos="top" ชดิ บน
data-iconpos="right" ชิดขวา
data-iconpos="bottom" ชดิ ล่าง
data-iconpos="left" ชดิ ซ้าย

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

cons

-iconpos=" ">

n

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

jQuery Mobile : Active Button

• เมื่อแตะปุ่มใดๆ และตอ้ งการแสดงการเลอื กปมุ่ น้นั
<li><a href="#anylink" class="u

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

ns

นๆ สามารถใช้ class="ui-btn-active"
ui-btn-active">Home</a></li>

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

jQuery Mobile : Active Button

• หากตอ้ งการใหค้ า้ งสถานะการแตะไว้ จะต้องใส่ c

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

ns

class="ui-btn-active ui-state-persist"

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

jQuery Mobile : Panels

• Panels คอื แผน่ ขอ้ มูล หรือ แผงข้อมูล

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

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

jQuery Mobile : Panels

• การใช้งาน Panel น้นั จะใช้งานผ่าน <div> แตจ่
เป็นส่วน (Division) ของ Panel)

<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>

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

จะทาการกาหนด data-role="panel" (หน้าท่ี

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

jQuery Mobile : Panels

<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>
<div data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel
<a href="#myPanel" class="ui-btn ui-btn-inline">O
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

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

การเรยี กใช้งาน Panel จะตอ้ งสร้างก่อน หรือ หลงั
ในส่วนของ Header

l.</p>
Open Panel</a>

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

jQuery Mobile : Closing Pane

• การปดิ Panel หรือ การผิดแผงข้อมลู นน้ั สามารถ
1) การปดิ แบบปกติ คือ การแตะส่วนทไ่ี ม่ใช่ Pan
2) การปดิ แบบต้องลาก (left swipe) ไปทางซ้าย
3) การปิดแบบใดๆ ทไ่ี มใ่ ช่การลาก (swipe close
4) การปดิ แบบสร้างปุม่ ในแผง Panel เพื่อแตะแล

<a href="#pageone" data-rel="close" c