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

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

ure

ton) เพ่มิ attribute คือ data-clear-btn="true"

>
a clear button will appear to the right:</p>
me" data-clear-btn="true">

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

jQuery Mobile : Form Button

• ปมุ่ หรือ Buttons เปน็ อปุ กรณท์ ่ีสาคญั ในการดาเ
ปุ่ม Reset เปน็ ต้น โดยปมุ่ ที่สาคญั มดี ังน้ี

1. ปมุ่ ทั่วไป <input type="button" value="B
2. ปมุ่ เริ่มใหม่ (Reset Button) คอื ปุม่ ที่ล้างขอ้ ม

ข้อมูลอย่ใู นสภาพพร้อมรบั ขอ้ มใู หม่อีกครงั้ <in
3. ปุ่มเร่ิมการทางาน (Submit Button) คือปุ่มท

โปรแกรมท่ีต้ังไว้ โดยปุม่ นีจ้ ะทางานรว่ มกบั At
ส่วนของ <form> น่นั เอง

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

ns

เนินงานบนหน้าเว็บเพจมาก เชน่ ปมุ่ Submit หรือ

Button">
มูลทีอ่ ยู่ในฟอรม์ น้นั ๆ ทัง้ หมด เพอ่ื ทาให้เครอ่ื งมอื รบั
nput type="reset" value="Reset Button">
ทชี่ ่วยในการส่งข้อมูลหรือทางานบางอย่างตาม
ttribute ที่ชื่อว่า Method และ Target ทีอ่ ยูใ่ น

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

jQuery Mobile : Form Button

• เราสามารถตกแต่งหรอื กาหนดรปู แบบการแสดงผ

Attribute คา่ ทสี่ ามารถกาหนดได้
data-corners
data-icon true | false การกาหน

data-iconpos http://www.w3schools การกาหน
.com/jquerymobile/jq
data-inline uerymobile_ref_icons.
data-mini asp
data-shadow
left | right | top | การกาหน
bottom | notext

true | false การกาหน

true | false การกาหน

true | false การกาหน

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

ns

ผลของปมุ่ ได้ โดยการปรับคา่ แตล่ ะ Attribute ดงั น้ี

คาอธบิ าย
นดขอบโค้งมนของปมุ่
นดรปู ไอคอนของปุ่ม

นดตาแหน่งของไอคอน

นด inline (การแสดงผลตามแกนของสมาร์ทโฟน)
นดขนาดของปมุ่
นดเงาให้ปมุ่

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

jQuery Mobile : Form Button

• ตัวอย่างของปมุ่

<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<input type="submit" value="Submit" data-icon="c

</form>

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

ns

check" data-iconpos="right" data-inline="true">

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

jQuery Mobile : Field Contain

• Field Containers คอื การปรับให้เครื่องมอื อย่ใู น

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

ners

นระนาบเดยี วกัน หากพนื้ ทเ่ี พยี งพอ ตัวอยา่ งเช่น

กรณีทไี่ มม่ กี ารทา Field Containers

กรณีทีม่ ีการทา Field Containers

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

jQuery Mobile : Field Contain

• การทา Field Container จะตอ้ งใช้ Tag <div> ด

<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fnam
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lnam
</div>
</form>

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

ners

ดงั ตวั อยา่ งต่อไปน้ี

>

me">
me">

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

jQuery Mobile : Form Input E

• Form Input Elements คอื เครือ่ งมอื ทใี่ ช้ในการ
เครอ่ื งมือรบั ข้อมลู อย่แู ลว้ แต่ Jquery Mobile ได
ย่งิ ขึน้

• Form Input Elements มีดังน้ี

• Text Inputs
• Text area
• Search Input
• Radio Buttons
• Checkboxes

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

Elements

รรบั ข้อมูลจากผใู้ ช้ โดยในภาษา HTML5 ปกติ ก็มี
ดท้ าการประยุกต์การทางานกับแกนสมารท์ โฟนไดด้ ี

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

jQuery Mobile : Text Inputs

• Text Inputs คือ การรบั ข้อมลู แบบตัวอักษร/ข้อค
โดยสามารถระบปุ ระเภทของข้อมลู ได้

<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname

<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">

<label for="email">E-mail:</label>
<input type="email" name="email" id="email" pla
</div>
</form>

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

ความ เพอ่ื ช่วยใหผ้ ้อู อกแบบเว็บไซตท์ างานได้งา่ ยขนึ้

e">
aceholder="Your email..">

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

jQuery Mobile : Text Inputs

• Text Inputs คือ การรบั ขอ้ มูลแบบตัวอกั ษร/ข้อค
โดยสามารถระบปุ ระเภทของข้อมูลได้

<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placehol
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>

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

ความ เพือ่ ช่วยให้ผอู้ อกแบบเวบ็ ไซตท์ างานได้งา่ ยขนึ้

lder="Your email..">
>

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

jQuery Mobile : Text area

• Text Area คอื การรับขอ้ มลู ทมี่ ีพน้ื ทีม่ ากกว่า 1

<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="Submit">

</form>

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

แถว ดังตัวอย่าง

ผใู้ ชย้ ืดขยายพนื้ ทีไ่ ด้

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

jQuery Mobile : Search Input

• Search Input คือ การรบั ขอ้ มลู คล้ายๆ กับ inpu
Input จะมกี ารนยิ ามบนเครือ่ งมอื ดงั ตวั อยา่ ง

<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="search">Search:</label>
<input type="search" name="search" id="search"
</div>
<input type="submit" data-inline="true" value="Submit

</form>

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

t

ut type=‘text’ ทัว่ ไป แตต่ า่ งกนั ตรงท่ี Search

" placeholder="Search for content...">
t">

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

jQuery Mobile : Radio Button

• Radio Buttons คอื กล่มุ ของตัวเลือก ทีเ่ ลอื กได้เพ
ตวั อยา่ ง

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" va
<label for="female">Female</label>
<input type="radio" name="gender" id="female"
</fieldset>
<input type="submit" data-inline="true" value="Subm

</form>

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

ns

พยี ง 1 ตัวเลือกภายในกลมุ่ ๆ หน่งึ เทา่ นั้น ดงั

alue="male">
value="female">
mit">

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

jQuery Mobile : Checkboxes

• Checkboxes คอื การรับขอ้ มูลแบบเลือกได้หลาย

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</le
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" valu
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" valu
</fieldset>
<input type="submit" data-inline="true" value="Submit">

</form>

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

ยตัวเลือก ดงั ตัวอย่าง

egend>
e="red">
ue="green">
ue="blue">

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

jQuery Mobile : More Examp

คาสง่ั คาอธิบาย

<fieldset data- การจดั เรียงเครือ่ งมือในแนวตา่ ง โดย
role="controlgroup" data- มี 2 แนว คอื
type="horizontal"> type="horizontal" และ
...เคร่อื งมือ... type="vertical"
</fieldset>

<div class="ui-field-contain"> การจัดเรยี งเคร่อื งมือและใช้ fieldset
<fieldset data- เพือ่ แสดง Label ในระนาบเดียวกบั
role="controlgroup"> เครื่องมอื
<legend>Choose your
gender:</legend> การส่งั ใหแ้ สดงการเลอื กลว่ งหนา้ กอ่ น
</fieldset> ผใู้ ช้เลอื ก
</div>

<input type="radio" checked>
<input type="checkbox"
checked>

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

ples

ภาพ

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

jQuery Mobile : More Examp

<div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corne

ui-icon-check ui-btn-icon-left">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content" style="min-
width:250px;">

<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd"
placeholder="Password">
<label for="log">Keep me logged in</label>
<input type="checkbox" name="login" id="log" value="1" data-mini="tr
<input type="submit" data-inline="true" value="Log in">
</div>
</form>
</div>
</div>

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

ples

er-all

>
rue">

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

สว่ นท่ี 5

• JQUERY MOBILE FORM : SELECTION FORM
• JQUERY MOBILE FORM : SLIDERS FORM

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

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

jQuery Mobile Form : Select

• Select Menu คอื เมนูสาหรับให้ผูใ้ ชเ้ ลอื กขอ้ มูลท
ให้ผใู้ ช้เกิดความสะดวกในการเลอื กขอ้ มลู นน่ั เอง

Iphone / iOS

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

Menus

ทต่ี อ้ งการ โดยนิยมใชก้ บั ข้อมูลทมี่ ีจานวนมากๆ ทา

Sumsung / Android

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

jQuery Mobile Form : Select

• Select Menu มีช่อื เรียกโดยท่วั ไปวา่ DropDown
ดงั นี้

• <select> คอื Tag สาหรบั การสร้าง DropDown
• <option> คอื Tag ภายใต้ <select> เพ่อื สรา้ งต

<form method="post" action="d
<fieldset class="ui-field-contain
<label for="day">Select Day<
<select name="day" id="da

<option value="mon">Mo
<option value="tue">Tues
<option value="wed">Wed
</select>
</fieldset>
</form>

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

Menus

n List (HTML) โดยจะมสี ว่ นประกอบของคาส่ัง

n List
ตวั เลือกแต่ละตัวใน DropDown List

demoform.asp">
n">
</label>
ay">
onday</option>
sday</option>
dnesday</option>

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

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,

initial-scale=1">

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.5/jquery.mobile

-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-

1.11.2.min.js"></script>

<script

src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-

1.4.5.min.js"></script>

</head>

<body>

v

<div data-role="page">

<div data-role="header">

<h1>Select Menus</h1> <

</div>

<

<

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

<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<fieldset class="ui-field-contain">

<label for="day">Select Day</label>
<select name="day" id="day">

<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</fieldset>
<input type="submit" data-inline="true"
value="Submit">
</form>
</div>
</div>

</body>
</html>

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

jQuery Mobile Form : Select

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

Menus

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

jQuery Mobile Form : Select

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

Menus

• การทา Option Group คอื การจัด
กลุม่ ของตวั เลือก ดงั ภาพ โดยจะใช้
Tag <optgroup label=‘group
name’> ในการสรา้ งชือ่ กลมุ่

<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option
value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>

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

jQuery Mobile Form : Select

<select name="day" id="day" data-native

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

Menus

e-menu="false">

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

jQuery Mobile Form : Select

<select name="day" id="day" multiple d

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

Menus

data-native-menu="false">

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

jQuery Mobile: Slider Control

• Slider Controls คอื เครื่องมอื ควบคมุ ทใี่ หผ้ ู้ใช้ส

<form method="post" action="demoform.asp
<label for="points">Points:</label>
<input type="range" name="points" id="
</form>

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

ls

สามารถเลือกปรบั ไดโ้ ดยการเลอื่ น (Slide) ดังภาพ

p">
"points" value="50" min="0" max="100">

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

jQuery Mobile: Slider Control

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mob
ile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-
1.11.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.5/jquery.mobil
e-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">

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

ls

<h1>Slider Control</h1>
</div>

<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="points">Points:</label>
<input type="range" name="points"
id="points" value="50" min="0" max="100">
<input type="submit" data-inline="true"
value="Submit">
</form>
</div>
</div>

</body>
</html>

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

jQuery Mobile: Slider Control

<input type="range" data-show-value="tru