นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสนุ ันทา 225
$("img").height(200);
});
$("img").on("click",function(){
$("img").height(500);
});
});
</script>
</head>
<body>
<p>Click for Resize</p>
<img src="star.png"/>
</body>
</html>
อาจารยณ์ ฐั ภัทร แกว้ รตั น
ตัวอยา่ ง การแกไ้ ข Attribute ใน
<script>
$(document).ready(function(){
$("p").on("click",function(){
$("img").attr("src","star.png");
});
$("img").on("click",function(){
$("img").attr("src","star2.png");
});
});
</script>
นภัทร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลัยราชภัฏสวนสุนนั ทา 226
Tag
ตัวอยา่ ง การแกไ้ ข Attribute ชือ่ src ใน Tag <img>
อาจารย์ณัฐภัทร แก้วรตั น
<!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.m
obile-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.mo
bile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$("img").attr("src","star.png");
นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสนุ ันทา 227
});
$("img").on("click",function(){
$("img").attr("src","star2.png");
});
});
</script>
</head>
<body>
<p>Click for Revert</p>
<img src="star.png"/>
</body>
</html>
อาจารยณ์ ัฐภทั ร แก้วรตั น
สว่ นท่ี 7
• JQUERY MOBILE SCROLL
• JQUERY MOBILE ORIENTATION
• JQUERY MOBILE PAGE EVENTS
นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนนั ทา 228
อาจารย์ณัฐภทั ร แก้วรตั น
jQuery Mobile Events
• Events = All the different visitor's actions
• เหตุการณ์ คือ สง่ิ ทีผ่ ใู้ ชเ้ ว็บกระทากบั หนา้ เว็บเพจ
ของผ้ใู ช้ได้
นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสุนันทา 229
that a web page can respond to.
จและเว็บเพจสามารถรบั รู้หรือตอบสนองการทางาน
อาจารยณ์ ฐั ภทั ร แกว้ รัตน
jQuery Mobile: Scroll Events
• Scroll Events คอื การที่หน้าเว็บเพจสามารถดักเ
ลงบนหนา้ เวบ็ เพจ การเลอ่ื นขึน้ หรอื ลงนน้ั เรียกวา่
• jQuery Mobile Scrollstart คอื การดกั เหตุการณ
โครงสรา้ งการเขยี นโปรแกรมดักเหตกุ ารณ์ คอื
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
Scrolls
นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลัยราชภัฏสวนสนุ นั ทา 230
เหตุการณ์ (Event Triggered) ท่ีผใู้ ช้เลอื่ นข้ึนหรือ
า Scroll (สกอล)์
ณท์ ี่ผ้ใู ชเ้ ริม่ เล่อื นขน้ึ หรือลง บนหนา้ จอเวบ็ เพจ โดย
Scrollstart
start
อาจารย์ณัฐภทั ร แก้วรตั น
jQuery Mobile: Scroll Events
<!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(){
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The scrollstart Event</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>Tip:</b> Try to to resize the window if the scrollbar is not available.</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสนุ ันทา 231
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารยณ์ ัฐภทั ร แกว้ รตั น
jQuery Mobile Scrollstop
• jQuery Mobile Scrollstop คือ ตวั ดกั เหตกุ ารณ
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});
นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสุนนั ทา 232
ณเ์ ม่อื ผใู้ ช้หยุดเลอ่ื น (Scroll Stop)
Scrollstop
Scrollstop
อาจารย์ณัฐภัทร แกว้ รตั น
jQuery Mobile Scrollstop
<!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(){
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The scrollstop Event</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>Tip:</b> Try to resize the window if the scrollbar is not available.</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
นภัทร์ สาขาวิชาการจัดการสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสนุ ันทา 233
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารยณ์ ฐั ภัทร แก้วรัตน
jQuery Mobile: Orientation Ev
• Orientation Event คือ ตัวดกั เหตุการณเ์ ม่ือผู้ใชท้
แกน คือ แกนแนวต้งั (Vertical) และ แกนแนวนอ
$(window).on("orientationchange
alert("The orientation has chang
});
Orientation Even
แกนแนวตั้ง (Vertical)
นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนันทา 234
vent
ทาการหมุนอปุ กรณ์ (Rotate) โดยแกนจะมสี อง
อน (Horizontal)
e",function(){
ged!");
nt
แกนแนวนอน (Horizontal)
อาจารยณ์ ฐั ภัทร แก้วรตั น
jQuery Mobile: Orientation Ev
• เราสามารถรับข้อมลู เหตุการณ์ท่ดี ักได้ โดย ใช้ ev
$(window).on("orientationchan
alert("Orientation is: " + event.
});
• โดย event คือ คา่ Argument ท่ตี ้องการดักค่าออ
• Event.orientation คือ การแสดงข้อมูลออกมา โ
• หากพลกิ เปน็ แกนแนวตัง้ (Vertical) จะไดข้ อ้ มลู สง่ กลบั
• หากพลกิ เป็นแกนแนวนอน (Horizontal) จะได้ข้อมลู ส
นภทั ร์ สาขาวชิ าการจัดการสารสนเทศ มหาวิทยาลยั ราชภัฏสวนสนุ นั ทา 235
vent
vent object
nge",function(event){
.orientation);
อกมา
โดยมี 2 สถานะ คือ
บ คือ Portrait
ส่งกลบั คือ Landscape
อาจารยณ์ ฐั ภทั ร แก้วรัตน
jQuery Mobile: Orientation Ev
<!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",function(event){
$(window).on("orientationchange",function(event){
alert("Orientation changed to: " + event.orientation);
});
});
</script>
</head>
<body>
นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลัยราชภฏั สวนสุนนั ทา 236
vent
<div data-role="page">
<div data-role="header">
<h1>The orientationchange Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Try to rotate your device!</p>
<p><b>Note:</b> You must use a mobile device, or a mobile
emulator to see the effect of this event.</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารยณ์ ฐั ภทั ร แกว้ รตั น
ตัวอยา่ ง การประยกุ ต์ใชใ้ นการแสดงผ
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"}
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
นภทั ร์ สาขาวชิ าการจดั การสารสนเทศ มหาวิทยาลัยราชภัฏสวนสุนันทา 237
ผลหนา้ จอในแตล่ ะแกนต่างกัน
});
อาจารย์ณฐั ภทั ร แกว้ รตั น
ตัวอย่าง การประยุกต์ใช้ในการแสดงผ
<!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",function(event){
$(window).on("orientationchange",function(){
if(window.orientation == 0)
{
$("p").text("The orientation has changed to
portrait!").css({"background-color":"yellow","font-size":"300%"});
}
else
{
$("p").text("The orientation has changed to
landscape!").css({"background-color":"pink","font-size":"200%"});
}
});
});
</script>
นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนนั ทา 238
ผลหนา้ จอในแตล่ ะแกนตา่ งกัน (ตอ่ )
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>The orientationchange Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Try to rotate your device!</p>
<p><b>Note:</b> You must use a mobile device, or a mobile emulator to
see the effect of this event.</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารยณ์ ฐั ภทั ร แก้วรัตน
jQuery Mobile: Page Events
• jQuery Mobile Page Events คอื เหตกุ ารณ์ทเี่ ก
1. Page Initialization - Before page creation
เหตุการณท์ ก่ี าลังสรา้ ง Page และเมื่อ Page ถ
2. Page Load/Unload - When an external
failure คือ เหตกุ ารณ์เมอื่ Page กาหลงั ถกู โห
สามารถโหลดให้แสดงบนเบราเซอรไ์ ด้
3. Page Transition - Before and after page
เปล่ยี นผา่ นเพจ
4. Page Change - When pages are changed
เหตุการณท์ ี่เปลย่ี นเพจไป
นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภฏั สวนสุนนั ทา 239
กิดบนหน้าเว็บเพจ โดยแบ่งได้ท้งั หมด 4 กลมุ่ คือ
n, and when the page has been created คอื
ถูกสร้างข้นึ
page is loading, unloading or encounters a
หลดใหป้ รากฎบนเบราเซอร์ และเหตุการณ์ทเี่ พจไม่
e transitions คือ เหตุการณก์ ่อนและหลังการ
d to or from, or encounters a failure คอื
อาจารยณ์ ฐั ภทั ร แก้วรัตน
jQuery Mobile: Initialization E
• โดยท่วั ไป เพจทีส่ รา้ งด้วย JQUERY MOBILE เมอ่ื
1. Before Page Creation และ Even
2. Page Creation pagebeforec
pagecreate
$(document).on("pagebeforecreate
alert("pagebeforecreate event fired
});
$(document).on("pagecreate",functi
alert("pagecreate event fired!");
});
นภัทร์ สาขาวชิ าการจัดการสารสนเทศ มหาวิทยาลัยราชภัฏสวนสุนันทา 240
Events
อถูกเรยี กใช้งานจะประกอบไปดว้ ย 2 สถานะ ดงั น้ี
nt Description
create คือ ตวั ดกั เหตุการณ์เม่ือ เพจ เรมิ่ ถกู เรียกใชจ้ ากเบราเซอร์/
สรา้ งข้นึ
คอื ตัวดกั เหตุการณเ์ ม่อื เพจ ถกู สร้างข้นึ แต่ยงั ไมเ่ สร็จ
สมบูรณ์
e",function(event){
d!");
ion(event){
อาจารย์ณัฐภทั ร แกว้ รัตน
jQuery Mobile: Load Events
• คอื ตัวดักเหตกุ ารณท์ ม่ี ีการโหลดเวบ็ เพจอ่ืน (Exte
Event คอื การดกั เหตุการณข์ ้ันตน้
pagecontainerbeforeload คือ การดกั เหตกุ ารณ์ขนั้ ต่อ
pagecontainerload คือ การดักเหตุการณ์ขนั้ ต่อ
pagecontainerloadfailed
$(document).on("pagecontainerload",funct
alert("pageload event fired!\nURL: " + data
});
$(document).on("pagecontainerloadfailed"
alert("Sorry, requested page does not exist
});
นภัทร์ สาขาวชิ าการจัดการสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสนุ ันทา 241
ernal Pages) โดยมี 3 ลกั ษณะ คือ
Description
น ตั้งแตเ่ กดิ เหตุการณเ์ รยี กเวบ็ เพจอนื่
อมา เป็นการดกั เหตุการณ์เม่ือหน้าเว็บถูกโหลดอย่างสมบูรณ์แลว้
อมา เป็นการดักเหตุการณ์เมอื่ หน้าเวบ็ ถูกโหลดอย่างไม่สมบรู ณ์
tion(event,data){
a.url);
",function(event,data){
t.");
อาจารยณ์ ฐั ภัทร แกว้ รตั น
jQuery Mobile: Load Events
<!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("pagecontainerload",function(event,data){
alert("pagecontainerload event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
});
</script>
</head>
<body>
นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสนุ นั ทา 242
<div data-role="page">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<a href="externalpage.html">External page</a>
<br><br>
<a href="externalnotexist.html">External page that does not
exist</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารยณ์ ัฐภัทร แก้วรตั น
jQuery Mobile: Transition Eve
• Transition Events คอื การดักเหตุการณเ์ มือ่ มีกา
from one page to the next)
Event
pagebeforeshow คือ ตัวดกั เหตกุ ารณ์เมอ่ื เก
pageshow แสดง Transition Anima
pagebeforehide transition animation st
pagehide
คือ ตวั ดักเหตุการณ์เมื่อเพ
เรียบรอ้ ยไปแลว้ (Triggere
completes)
คือ ตวั ดกั เหตกุ ารณ์เมื่อเพ
before the transition a
คอื ตวั ดกั เหตุการณ์เมือ่ เพ
after the transition an
นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสุนนั ทา 243
ents
ารเปลย่ี นผ่านไปยงั อีกเพจ (when we transition
Description
กิดการเปลย่ี นไปยงั เพจใหม่และเปน็ ตวั ดกั เหตกุ ารณ์กอ่ นท่ีจะมกี าร
ation ดว้ ย (Triggered on the "to" page, before the
tarts)
พจใหมเ่ สรจ็ สมบรู ณ์ โดยแสดง Transition Animation เสรจ็
ed on the "to" page, after the transition animation
พจแรกกาลังเรยี กเพจที่สอง (Triggered on the "from" page,
animation starts)
พจแรกหายไปอย่างสมบรู ณ์ (Triggered on the "from" page,
nimation completes)
อาจารย์ณัฐภทั ร แก้วรตั น
jQuery Mobile: Transition Eve
$(document).on("pagebeforeshow","#pagetw
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",func
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",funct
alert("pagetwo is now hidden");
});
นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวิทยาลัยราชภฏั สวนสนุ นั ทา 244
ents
wo",function(){ // When entering pagetwo
ction(){ // When entering pagetwo
o",function(){ // When leaving pagetwo
tion(){ // When leaving pagetwo
อาจารยณ์ ฐั ภทั ร แก้วรตั น
jQuery Mobile: Transition Eve
<!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("pagebeforeshow","#pagetwo",function(){
alert("pagebeforeshow event fired - pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
alert("pageshow event fired - pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
alert("pagebeforehide event fired - pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
alert("pagehide event fired - pagetwo is now hidden");
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
นภัทร์ สาขาวชิ าการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสนุ นั ทา 245
ents
<p>Page One</p>
<a href="#pagetwo">Go to Page Two</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Header Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>Page Two</p>
<a href="#pageone">Go Back to Page One</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
อาจารย์ณัฐภทั ร แกว้ รตั น
jQuery Mobile Events Referen
Event Enables bookmarkable #hash history
hashchange A wrapper event for both hashchang
navigate Triggered when the user rotates the
orientationchange
Triggered twice during the page chan
pagebeforechange loading completes successfully, but
pagebeforecreate Triggered when the page is about to
pagebeforehide Triggered on the "from" page, before
pagebeforeload Deprecated in version 1.4.0. Use pag
pagebeforeshow Triggered on the "to" page, before tr
pagechange
Triggered after the changePage() req
pagechangefailed animations have completed
Triggered when the changePage() req
passed a data object as the 2nd arg
นภทั ร์ สาขาวิชาการจดั การสารสนเทศ มหาวทิ ยาลยั ราชภัฏสวนสนุ ันทา 246
nce
Description
y
ge and popstate
mobile device vertically or horizontally
nge cycle: First prior to any page loading or transition and next after page
t before the browser history has been modified by the navigation process.
o be initialized, but before enhancement has begun
e transition animation starts
gecontainerbeforeload instead.Triggered before any load request is made
ransition animation starts
quest has finished loading the page into the DOM and all page transition
quest fails to load the page. Callbacks for this particular event will be
g
อาจารยณ์ ัฐภัทร แก้วรตั น
jQuery Mobile Events Referen
pagecontainerbeforeload
pagecontainerload
pagecontainerloadfailed
pagecreate
pagehide
pageinit
pageload
pageloadfailed
pageremove
pageshow
นภัทร์ สาขาวิชาการจดั การสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสนุ ันทา 247
nce
Triggered before any load request is made
Triggered after the page is successfully loaded and inserted into the DOM
Triggered if the page load request fails
Triggered when the page has been created, but before enhancement is
complete
Triggered on the "from" page, after transition animation completes
Deprecated in version 1.4.0. Use pagecreate instead. Triggered when the
page has been initialized and enhancement is complete
Deprecated in version 1.4.0. Use pagecontainerload instead.Triggered after
the page is successfully loaded and inserted into the DOM
Deprecated in version 1.4.0. Use pagecontainerloadfailed instead.Triggered
if the page load request fails
Triggered just before the framework attempts to remove an external page
from the DOM
Triggered on the "to" page, after transition animation completes
อาจารยณ์ ัฐภัทร แก้วรตั น
jQuery Mobile Events Referen
pagecontainerbeforeload
pagecontainerload
pagecontainerloadfailed
pagecreate
pagehide
pageinit
pageload
pageloadfailed
pageremove
pageshow
นภัทร์ สาขาวิชาการจดั การสารสนเทศ มหาวิทยาลยั ราชภฏั สวนสนุ ันทา 248
nce
Triggered before any load request is made
Triggered after the page is successfully loaded and inserted into the DOM
Triggered if the page load request fails
Triggered when the page has been created, but before enhancement is
complete
Triggered on the "from" page, after transition animation completes
Deprecated in version 1.4.0. Use pagecreate instead. Triggered when the
page has been initialized and enhancement is complete
Deprecated in version 1.4.0. Use pagecontainerload instead.Triggered after
the page is successfully loaded and inserted into the DOM
Deprecated in version 1.4.0. Use pagecontainerloadfailed instead.Triggered
if the page load request fails
Triggered just before the framework attempts to remove an external page
from the DOM
Triggered on the "to" page, after transition animation completes
อาจารยณ์ ัฐภทั ร แก้วรตั น
jQuery Mobile Events Referen
scrollstart
scrollstop
swipe
swipeleft
swiperight
tap
taphold
throttledresize
updatelayout
นภทั ร์ สาขาวิชาการจัดการสารสนเทศ มหาวทิ ยาลัยราชภฏั สวนสุนนั ทา 249
nce
Triggered when the user starts to scroll the page
Triggered when the user stops to scroll the page
Triggered when the user swipes over an element
horizontally
Triggered when the user swipes over an element in the left
direction by more than 30px
Triggered when the user swipes over an element in the right
direction by more than 30px
Triggered when the user taps on an element
Triggerd when the user taps on an element and hold for
one second
Enables bookmarkable #hash history
Triggered by jQuery Mobile components that dynamically
show/hide content
อาจารย์ณัฐภทั ร แกว้ รัตน
jQuery Mobile Events Referen
vclick V
vmousecancel V
vmousedown V
vmousemove V
vmouseout V
vmouseover V
vmouseup V
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
เอกสารประกอบการเรียนรายวิชาชาววังสวนสุนันทา
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
เอกสารประกอบการเรียนรายวิชาชาววังสวนสุนันทา
- 1 - 50
- 51 - 100
- 101 - 150
- 151 - 200
- 201 - 250
- 251 - 300
- 301 - 350
- 351 - 400
- 401 - 450
- 451 - 500
- 501 - 503
Pages: