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

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

ls

ue">

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

jQuery Mobile: Slider Control

<input type="range" data-popup-enabled

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

ls

d="true">

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

jQuery Mobile: Slider Control

<input type="range" data-hightlight="true

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

ls

e">

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

jQuery Mobile: Flip Toggle Sw

• Flip Toggle Switch คอื ปมุ่ สาหรับสลบั การเลือก
• Flip แปลวา่ พับไปอีกทาง
• Toggle แปลวา่ การสลบั สถานะ

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

witch

กข้อมูลได้

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

jQuery Mobile: Flip Toggle Sw

• ในการสรา้ ง Flip toggle switch จะใช้
1. Tag <input type="checkbox"> และ
2. ระบหุ นา้ ที่ data-role of "flipswitch"

<form method="post" action="demoform.a
<label for="switch">Flip toggle switch che
<input type="checkbox" data-role="f
</form>

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

witch

asp">
eckbox:</label>
flipswitch" name="switch" id="switch">

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

jQuery Mobile: Flip Toggle Sw

การระบุ ชือ่ ของสถานะในการ Toggle โดยกาหนด
• data-on-text=“ชอ่ื สถานะ" และ
• data-off-text=" ชอื่ สถานะตรงกนั ข้าม">

<input type="checkbox" data-role="flipswitch" name="switch

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

witch

h" id="switch" data-on-text="True" data-off-text="False">

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

jQuery Mobile: Flip Toggle Sw

การกาหนดให้เกิดการเลือกล่วงหน้า
<input type="checkbox" data-role="flipswitc

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

witch

ch" name="switch" id="switch" checked>

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

jQuery Mobile: Flip Toggle Sw

<form method="post" action="demoform.asp">
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min"

id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max"

id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true"

value="Submit">
</form>

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

witch

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

สว่ นที่ 6

• JQUERY MOBILE EVENTS
• JQUERY MOBILE TOUCH

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

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

jQuery Mobile Events

• Events = All the different visitor's actions
• เหตุการณ์ คือ สง่ิ ทีผ่ ใู้ ชเ้ ว็บกระทากบั หนา้ เว็บเพจ

ของผ้ใู ช้ได้

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

that a web page can respond to.
จและเว็บเพจสามารถรบั รู้หรือตอบสนองการทางาน

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

jQuery Mobile Events

• jQuery Mobile ได้เตรียมตัวดกั จับเหตุการณ์ท่ีผูใ้
 Touch events – ตวั ดักจับการแตะและการลา

screen (tap and swipe))
 Scroll events - ตวั ดกั จบั เหตุการณ์เม่ือผใู้ ช้เล่ือ

down)
 Orientation events - ตวั ดกั จับเหตกุ ารณ์พลิก

rotates vertically or horizontally)
 Page events – ตวั ดักจับเหตุการณ์ทเ่ี กิดข้นึ กบั

when a page is shown, hidden, created, lo

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

ใชก้ ระทากับหน้าเวบ็ เพจ ดงั นี้
ากนวิ้ (triggers when a user touches the
อนขอ้ มูล (triggers when a user scrolls up and
กแกนอุปกรณ์ (triggers when the device
บหนา้ เวบ็ เพจ เช่น ดักจบั การแสดงผล (triggers
oaded and/or unloaded)

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

Initializing jQuery Mobile Even

• Initializing jQuery Mobile Events คอื การโปร
โดยโคด๊ โปรแกรมในส่วนนีจ้ ะต้องอยภู่ ายใตแ้ ทก็ <

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

<script>
$(document).ready(function

// jQuery methods go here

});
</script>

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

ents

รแกรมเพือ่ ใชใ้ นการเริม่ ดกั จับเหตุการณ์จากผใู้ ช้
<SCRIPT> </SCRIPT>
รดกั จบั เหตกุ ารณ์จากผู้ใช้ แต่โครงสร้างนจ้ี ะชว่ ยให้
หลดหน้าเวบ็ เพจสมบรู ณ์แลว้ เทา่ น้นั เพราะการ
ทีย่ ังแสดงผลไม่เสร็จส้ิน

n(){

e...

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

Initializing jQuery Mobile Even

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/

</script>

<script> <bod
$(document).ready(function(){

$("p").on("click",function(){ <p>If
$(this).hide(); <p>C
}); <p>C
});

</script> </bod
</htm
</head>

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

ents

/jquery/1.10.2/jquery.min.js">

dy>
you click on me, I will disappear.</p>

Click me away!</p>
Click me too!</p>
dy>
ml>

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

Initializing jQuery Mobile Even

• นอกจากนเี้ รายังสามารถดกั จบั เหตุการณ์ของเพจย

<script>
$(document).on("pagecreate","#pa

// jQuery events go here...

});
</script>

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

ents

ยอ่ ยๆ ได้ดว้ ย โดยการใช้โครงสรา้ งน้ี

ageone",function(){

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

Initializing jQuery Mobile Even

<!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>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("click",function(){

$(this).hide();
});
});
</script>
</head>
<body>

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

ents

<div data-role="page" id="pageone">
<div data-role="header">
<h1>Header Text</h1>
</div>

<div data-role="main" class="ui-content">
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</div>

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

</body>
</html>

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

jQuery Mobile Tap

• jQuery Mobile Tap คอื การดักจับเหตุการณ์แต

<script>

$(document).on("pagecreate","#pageone"

$("p").on("tap",function(){

$(this).hide();

});

}); <div data-role="main"

</script> <p>If you tap me, I

<p>Tap me away!</

<p>Tap me too!</p

</div>

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

ตะ ของผู้ใช้

",function(){

" class="ui-content">
I will disappear.</p>
/p>
p>

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

<!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>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("tap",function(){

$(this).hide();
});
});
</script>
</head>

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

<body>

<div data-role="page" id="pageone">
<div data-role="header">
<h1>The tap Event</h1>
</div>

<div data-role="main" class="ui-content">
<p>If you tap me, I will disappear.</p>
<p>Tap me away!</p>
<p>Tap me too!</p>
</div>

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

</body>
</html>

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

jQuery Mobile Taphold

• jQuery Mobile Taphold คือ ตวั ดกั จบั เหตุการณ

<script>

$(document).on("pagecreate","#pageone"

$("p").on("taphold",function(){

$(this).hide();

}); <div data-role="ma
}); <p>If you tap an
</script>
disappear.</p>

<p>Tap and hol

<p>Tap and hol

</div>

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

ณท์ ผ่ี ใู้ ช้แตะคา้ ง ณ แท็กใดแท็กหน่ึง

",function(){

ain" class="ui-content">
nd hold me for one second, I will
ld me!</p>
ld me too!</p>

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

<!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>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("taphold",function(){

$(this).hide();
});
});
</script>
</head>

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

<body>

<div data-role="page" id="pageone">
<div data-role="header">
<h1>The taphold Event</h1>
</div>

<div data-role="main" class="ui-content">
<p>If you tap and hold me for one second, I will
disappear.</p>
<p>Tap and hold me!</p>
<p>Tap and hold me too!</p>
</div>

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

</body>
</html>

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

jQuery Mobile Swipe

• jQuery Mobile Swipe คอื ตัวตรวจจับเหตุการณ

<script>

$(document).on("pagecreate","#pageone",fu

$("p").on("swipe",function(){

$("span").text("Swipe detected!");

});

}); <div data-role="main" cl

</script> <p>Swipe this text or

<p style="border:1px s

<p><span style="colo

</div>

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

ณล์ ากนว้ิ ของผ้ใู ช้ (โดยไมร่ ะบุทิศทาง)

unction(){

lass="ui-content">
in the box below.</p>
solid black;height:200px;width:200px;"></p>
or:red"></span></p>

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

<!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>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipe",function(){

$("span").text("Swipe detected!");
});
});
</script>
</head>
<body>

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

<div data-role="page" id="pageone">
<div data-role="header">
<h1>The swipe Event</h1>
</div>

<div data-role="main" class="ui-content">
<p>Swipe this text or in the box below.</p>
<p style="border:1px solid
black;height:200px;width:200px;"></p>
<p><span style="color:red"></span></p>
</div>

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

</body>
</html>

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

jQuery Mobile Swipeleft

• jQuery Mobile Swipeleft คือ ตัวดักจบั เหตกุ าร

<script>
$(document).on("pagecreate","#pageone",fun
$("p").on("swipeleft",function(){

alert("You swiped left!");
});
});
</script>

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

รณล์ ากนวิ้ ไปทางซ้าย

Swipe Left !

nction(){

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

jQuery Mobile Swiperight

• jQuery Mobile Swipeleft คือ ตัวดกั จับเหตกุ าร

<script>
$(document).on("pagecreate","#pageone",fun
$("p").on("swiperight",function(){

alert("You swiped right!");
});
});
</script>

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

รณล์ ากนวิ้ ไปทางซ้าย

nction(){ Swipe Right !

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

การตรวจจับเหตกุ ารณก์ ับเฉพาะบ

<script>

$(document).on("pagecreate","#pageone",fun

$("#p2").on("swipe",function(){

$("span").text("Swipe detected!");

}); <div data-role="main" cl
}); <p id="p1">Swipe this
</script> <p id="p2" style="bord
<p><span style="colo
</div>

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

บาง Tag เทา่ นน้ั

nction(){

lass="ui-content">
s text or in the box below.</p>
der:1px solid black;height:200px;width:200px;"></p>
or:red"></span></p>

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

ตัวอยา่ ง การเพ่ิมขนาดของภาพ

<script>
$(document).ready(function(){
$("p").on("click",function(){

$("img").height(200);
});
$("img").on("click",function(){
$("img").height(500);
});
});
</script>

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

<p>Click for Resize</p>
<img src="star.png"/>

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

ตัวอย่าง การเพม่ิ ขนาดของภาพ

<!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>
<script>
$(document).ready(function(){
$("p").on("click",function(){