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

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

ชนิด autodividers

ta-inset="true">

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

jQuery Mobile : List Icons

• List Icons คอื สญั ลกั ษณท์ ี่ปรากฏบนลิสต์ โดยเพ

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

พิม่ attribute <li data-icon=“location">

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

jQuery Mobile : List Icons

<ul data-role="listview" data-inset="true"
<li><a href="#">Default is right arrow</a
<li data-icon="plus"><a href="#">data
<li data-icon="minus"><a href="#">da
<li data-icon="delete"><a href="#">da
<li data-icon="location"><a href="#">d

</ul>

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

">
a></li>
a-icon="plus"</a></li>
ata-icon="minus"</a></li>
ata-icon="delete"</a></li>
data-icon="location"</a></li>

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

jQuery Mobile : List Icons ชน

• เราสามารถสร้าง ICON ของตนเองได้ โดยจะตอ้ งม
จะตอ้ งใช้ Tag <img> ช่วยแทรกภาพ

<li><a href="#"><img src="us.png" alt

<ul data-role="listview" data-inset="true">
<li><a href="#"><img src="us.png" alt="USA" class="
<li><a href="#"><img src="gb.png" alt="Great Britain
<li><a href="#"><img src="finland.png" alt="Finland
<li><a href="#"><img src="germany.png" alt="Germa
<li><a href="#"><img src="france.png" alt="France"

</ul>

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

นดิ สร้าง Icon ของตนเอง

มีขนาด 16px X 16px (กวา้ ง ยาว 16 pixels) โดย

t="USA" class="ui-li-icon">USA</a></li>

"ui-li-icon">USA</a></li>
n" class="ui-li-icon">Great Britain</a></li>
d" class="ui-li-icon">Finland</a></li>
any" class="ui-li-icon">Germany</a></li>
class="ui-li-icon">France</a></li>

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

jQuery Mobile : List Icons ชน

<li><a href="#"><img src="us.png" alt=

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

นดิ สรา้ ง Icon ของตนเอง

="USA" class="ui-li-icon">USA</a></li>

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

jQuery Mobile : List Thumbn

• Thumbnails แปลวา่ หัวแมโ่ ปง้ น้ิว ดังนั้น List Th
กว่า icon ปกติ ท่ีอธิบายข้อมูลไดอ้ ย่างกระชับ

<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="chrome.png"></a>
</li>
<li>
<a href="#"><img src="firefox.png"></a>
</li>

</ul>

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

nails

humbnails หรอื List ทม่ี ีภาพเหมือนขนาดใหญ่

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

jQuery Mobile : List Thumbn

<ul data-role="listview" data-inset="true"> <h2
<li> <p>
<a href="#"> 2004
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web

browser. Released in 2008.</p>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla.

Released in 2004.</p>
</a>
</li>

</ul>

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

nails

2>Mozilla Firefox</h2>
>Firefox is a web browser from Mozilla. Released in
4.</p>

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

jQuery Mobile : Split Buttons

• Split Buttons คอื การแยกปุ่ม ใน List

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

s

<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web

browser. Released in 2008.</p>
</a>
<a href="#">Some Text</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released

in 2004.</p>
</a>
<a href="#">Some Text</a>
</li>

</ul>

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

jQuery Mobile : Split Buttons

<ul data-role="listview" data-inset="true">
<li data-role="divider">Browsers</li>
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser.

Released in 2008.</p>
</a>
<a href="#download" data-transition="pop" data-

icon="gear">Download Browser</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released in

2004.</p>
</a>
<a href="#download" data-transition="pop" data-

icon="gear">Download Browser</a>
</li>

</ul>

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

s

<div data-role="page" id="download" data-
dialog="true">
<div data-role="main" class="ui-content">
<h3>Split Button Example</h3>

<p>The buttons below are for
demonstration purposes only.</p>

<a href="#" class="ui-btn ui-btn-inline ui-
btn-b ui-shadow ui-corner-all ui-icon-check
ui-btn-icon-left ui-btn-inline ui-mini" data-
rel="back">Download</a>

<a href="#" class="ui-btn ui-btn-inline ui-
shadow ui-corner-all ui-btn-inline ui-mini"
data-rel="back">Cancel</a>
</div>
</div>

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

jQuery Mobile : Split Buttons

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

s

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

jQuery Mobile : Count Bubbl

• Count Bubbles คอื การแสดง ฟองตัวเลข หรอื

<ul data-role="listview" data-inset="true">
<li><a href="#">Inbox<span class="ui-li-count">25<
<li><a href="#">Sent<span class="ui-li-count">432</
<li><a href="#">Trash<span class="ui-li-count">7</sp
</ul>

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

les

แสดงตวั เลขบน List ดงั ภาพ

</span></a></li>
/span></a></li>
pan></a></li>

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

สว่ นที่ 4

• JQUERY MOBILE FILTERS
• JQUERY MOBILE FORM (BASIC)
• JQUERY MOBILE FORM : INPUTS

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

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

jQuery Mobile : Filters

• Filters คอื ตวั กรองขอ้ มลู โดยใน JQUERY MOB
ในการเรยี กดูขอ้ มูลใน List นั่นเอง โดยการทางาน
(Responsive) โดยการคีย์อกั ษร ดงั ภาพตัวอยา่ ง

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

BILE ไดเ้ ตรียมเคร่อื งมือดงั กล่าวไวเ้ พ่ือใหผ้ ใู้ ช้สะดวก
นของ Filters มีลกั ษณะตอบสนองผใู้ ช้

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

jQuery Mobile : Filterable Ele

• Filterable Elements แปลว่า สว่ นข้อมลู เล็กๆ ท
ทีน่ จ้ี ะถกู เรียกว่า Element (เอล'ละเมนิ ท)ฺ ซึ่งกค็ อื

• สว่ นประกอบในการทา Filter มี 2 สว่ น ดังน้ี

• FORM สาหรบั การรบั ขอ้ มูล

• ลิสต์ (LIST)

<form class="ui-filterable">
<input id="myFilter" data-typ
</form>

<ul data-role="listview" data-f
<li><a href="#">Adele</a><
<li><a href="#">Billy</a></l
<li><a href="#">Calvin</a><
</ul>

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

ements

ทถี่ ูกกรองได้ โดยขอ้ มลู ที่เราตอ้ งการกรองนนั้ ใน
อ ข้อมลู เล็กๆ ท่จี ะถกู กรอง

pe="search"> Form รบั ขอ้ มูล

filter="true" data-input="#myFilter">

</li> LIST แสดงการกรองข้อมูล
li>

</li>

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

jQuery Mobile : Filterable Ele

<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter"

data-autodividers="true" data-inset="true">
<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>

</div>

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

ements

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

jQuery Mobile : Filterable Ele

• หากต้องการแสดงขอ้ มลู ลายนา้ ในส่วนของกล่องข
<input id="myFilter" data-type="search

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

ements

ข้อความนาเข้าขอ้ มลู จะต้องใชค้ าส่งั
h" placeholder="Search for names..">

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

jQuery Mobile : Custom Filte

• Custom Filter คือ การปรบั แตง่ การกรองเพม่ิ เต
หรอื อกั ษรที่ปรากฎในส่วนของ Element เท่านัน้
ขอ้ ความอ่นื ได้ เช่น

• ตอ้ งการกรองขอ้ มลู SMARTPHONE แต่อาจ
• หรอื ประยกุ ต์ใช้ในการกรองคนทช่ี ่ืนชอบ เชน่ ต

สามารถพมิ พค์ าวา่ fav เพอ่ื กรองเฉพาะคนท่ีมกี าร

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

er

ตมิ โดย การกรองแบบปกติ จะเปน็ การกรองอักขระ
แต่ในบางคร้งั เราอาจตอ้ งการกรองข้อมูลโดยใช้

จพมิ พค์ าว่า IPHONE เปน็ ต้น
ตอ้ งการขอ้ มลู Christina ซึ่งเป็นคนที่ช่ืนชอบ ก็
รโยงกับข้อมลู fav เป็นต้น

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

jQuery Mobile : Custom Filte

<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<p>In this example, we have used the data-filtertext="fav" on "Adele". This

means that you are no longer able to search for the list item "Adele" anymore.
You can only find Adele by typing the keywords "f, a, v or fav".)</p>

<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-
autodividers="true" data-inset="true">
<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 data-filtertext="fav"><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Frank</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>
</div>

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

er

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

jQuery Mobile : Forms

• FORMS คือ เคร่ืองมอื ในการรบั ข้อมลู จากผใู้ ช้ เชน่
• FORMS เปน็ สงิ่ สาคญั มากในการออกแบบเว็บ เน

ตอ่ ไปประมวลผลในภาษาตา่ งๆ เช่น PHP ASP.NE
• ดงั นั้น ผอู้ อกแบบเวบ็ ไซตจ์ ะตอ้ งทาความเข้าใจเก่ีย

ออกแบบเวบ็ ไซต์ท่ที างานไดอ้ ย่างราบรืน่ สร้างปร

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

น การปอ้ นข้อมูล ตวั เลือก เชค็ บ็อกซ์ เป็นต้น
น่ืองจากเปน็ ส่งิ ทรี่ บั ข้อมูลนาเขา้ จากผใู้ ช้ เพ่ือสง่
ET JSP เปน็ ต้น
ยวกับ Form เปน็ อย่างดี เพอื่ สามารถนาไป
ระสบการณผ์ ใู้ ช้อย่างเหมาะสม (User Experience)

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

jQuery Mobile : Form Structu

• Form Structure คอื โครงสรา้ งของ Form
• Form Structure มีโครงสรา้ งดังน้ี
1. <form></form> แท็กฟอร์ม เป็นการบอกให
2. Method =“post/get” แอ็ตทริบวิ ท์ Metho

POST
3. Action = “เว็บเพจปลายทางท่ีสง่ ข้อมลู ไปหา”
4. แท็กเครอื่ งมือ เช่น <label></label> หรือ <

<form method="post" a
<label for="fname">Fir
<input type="text" nam

</form>

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

ure

หเ้ บราเซอร์แสดงฟอรม์ กรอกขอ้ มลู ตา่ งๆ
od สามารถกาหนดได้สองลักษณะ คือ GET และ

”
<input/> เป็นตน้ ซึง่ เครื่องมอื จะอย่ใู น สว่ นตอ่ ไป

action="demoform.php">
rst name:</label>
me="fname" id="fname">

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

jQuery Mobile : Form Structu

• ใน JQUERY MOBILE ไดเ้ ตรียมอปุ กรณต์ ่างๆ เบื้อ

• Text Inputs

• Search Inputs

• Radio Buttons

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

ure

องตน้ ดงั น้ี

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

jQuery Mobile : Form Structu

• Checkboxes

• Select Menus

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

ure

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

jQuery Mobile : Form Structu

• Sliders

• Flip Toggle Switches

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

ure

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

jQuery Mobile : Form Structu

• คาส่งั เบอื้ งต้นทส่ี าคญั มีดังน้ี
1. คาสงั่ ทีใ่ ชส้ าหรับแสดงผลขอ้ มูลเกริน่ เกี่ยวกับข

<label for="fname">First name:</label
<input type="text" name="fname" id="

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

ure

ขอ้ มูลที่จะรบั เข้ามาจากเคร่ืองมือ (Short Hint)

l>
"fname" placeholder="First name...">

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

jQuery Mobile : Form Structu

2. คาสั่งท่ใี ชส้ าหรับซอ่ นเครอื่ งมือ ปา้ ย หร

<label for="fname" class="ui-hidden-a
<input type="text" name="fname" id="

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

ure

รอื Lable ท่ถี กู ซอ่ น เพราะคาสง่ั ui-hidden-accessible

accessible">Firstname</label>
"fname" placeholder="First name...">

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

jQuery Mobile : Form Structu

3. คาส่งั ทใ่ี ชส้ าหรบั สร้างปุม่ ล้างขอ้ มลู (Clear Butt

<form method="post" action="demoform.asp">
<p>Type something in the input field and a
<label for="fname">First name</label>
<input type="text" name="fname" id="fnam
</form>