แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle
06 November 2010jQuery UI มี effect ที่น่าสนใจ สามารถนำมาประยุกต์ใช้ได้อย่างหลากหลาย เช่น กับระบบการเรียนการสอน ใช้กับร้านค้า ตะกร้าสินค้า แบบ ajax หรืออื่นๆ
สำหรับส่วนที่จะแนะนำในครั้งนี้ จะเป็นเพียงส่วนหนึ่ง คือ แบบ ไม่ต้องใช้งานกับ event show hide และ toggle
สามารถเข้าไปศึกษาเพิ่มเติม ทั้งหมดได้ด้วยตัวเองที่
docs.jquery.com/UI/Effects
docs.jquery.com/UI/Effects
ตัวอย่าง
โค้ดตัวอย่าง ทั้งหมด และคำอธิบายโค้ด
shake
bounce
highlight
pulsate
size
transfer
โค้ดตัวอย่าง ทั้งหมด และคำอธิบายโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ui effect part 1</title>
<style type="text/css">
*{
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
div.i_pink {
font-weight:bold;
color:#000;
margin: 0px;
width: 100px;
height: 40px;
background: pink;
border: 1px solid black;
position: relative;
}
div.i_yellow {
font-weight:bold;
color:#000;
margin: 0px;
width: 100px;
height: 40px;
background: yellow;
border: 1px solid black;
position: relative;
}
div.i_violet {
font-weight:bold;
color:#FFF;
margin: 0px;
width: 100px;
height: 40px;
background: violet;
border: 1px solid black;
position: relative;
}
div.i_blue {
font-weight:bold;
color:#FFF;
margin: 0px;
width: 100px;
height: 40px;
background: blue;
border: 1px solid black;
position: relative;
}
div.i_black {
font-weight:bold;
color:#FFF;
margin: 0px;
width: 100px;
height: 40px;
background: black;
border: 1px solid black;
position: relative;
}
div.i_green {
font-weight:bold;
color:#FFF;
margin: 0px;
width: 100px;
height: 40px;
background: green;
border: 1px solid black;
position: relative;
}
div.i_red {
margin-top: 20px;
width: 50px;
height: 30px;
background: red;
border: 1px solid black;
position: relative;
visibility:hidden;
}
/* css สำหรับการใช้งาน effect transfer */
.ui-effects-transfer {
border: 2px dotted black;
/* background: green;*/
}
</style>
</head>
<body>
<div style="margin:auto;width:75%;text-align:center;">
<div class="i_violet">shake</div>
<br />
<div class="i_blue">bounce</div>
<br />
<div class="i_black">highlight</div>
<br />
<div class="i_yellow">pulsate</div>
<br />
<div class="i_pink">size</div>
<br />
<div class="i_green">transfer</div>
<div class="i_red"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.i_violet").click(function(){ // เมื่อคลิกที่ div class=i_violet
$(this).effect("shake", { // กำหนด effect ให้เป็น shake
direction:'right', // ทิศทาง up | down | left | right ถ้าไม่กำหนด จะเป็น left
distance:100, // ระยะห่าง หน่วยเป็น pixels ถ้าไม่กำหนด ค่าเริ่มต้นจะเป็น 20
times:3 // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 3 ครั้ง
}, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){ //
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
});
});
$("div.i_blue").click(function () { // เมื่อคลิกที่ div class=i_blue
$(this).effect("bounce",{ // กำหนด effect ให้เป็น bounce
direction:'up', // ทิศทาง up | down | left | right ถ้าไม่กำหนด จะเป็น up
distance:100, // ระยะห่าง หน่วยเป็น pixels ถ้าไม่กำหนด ค่าเริ่มต้นจะเป็น 20
mode:'show', // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น effect ที่ใช้งานอยู่
times:3 // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 5 ครั้ง
}, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){ //
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
});
});
$("div.i_black").mouseover(function () { // เมื่อเลื่อนเมาส์มาอยู่เหนือ div class=i_black
$(this).effect("highlight", { // กำหนด effect ให้เป็น highlight
color:'#00ff00', // กำหนดสีพื้นหลัง สำหรับ hilight
mode:'show' // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น show
}, 300, // ระยะเวลาที่แสดง effect 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){ //
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
});
});
$("div.i_yellow").click(function(){ // เมื่อคลิกที่ div class=i_yellow
$(this).effect("pulsate", { // กำหนด effect ให้เป็น pulsate
mode:'show', // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น show
times:3 // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 5 ครั้ง
}, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){ //
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
});
});
$("div.i_pink").click(function(){ // เมื่อคลิกที่ div class=i_pink
$(this).effect("size", { // กำหนด effect ให้เป็น size
origin:['bottom','right'], // ทิศทางการปรับขนาด [ top | middle | bottom , left | center | right ]
from:{ // กำหนดขนาดเริ่มต้น ปกติไม่ต้องกำหนด
width:10,
height:10
},
to:{ // กำหนดปรับขนาดเป็น
width:200,
height:60
},
scale:'both' // both | box | content
}, 1000, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){ //
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
});
});
// ส่วนสุดท้าย เป็นการใช้ effect transfer แปลงร่าง จะเพิ่มโค้ดประยุกต์เข้าไป ให้เป็นตัวอย่าง
$("div.i_green").click(function () { // เมื่อคลิกที่ div class=i_green
$(this).css("visibility","hidden"); // กำหนดให้ div นี้ให้มองไม่เห็น
$(this).effect("transfer", { // กำหนด effect ให้เป็น transfer
className:'i_green', // กำหนด class ของ effect ให้คล้ายกับ div class=i_green
to: $("div.i_red") // ให้เปลี่ยนไปเป็น div class=i_red ที่ทำให้มองไม่เห็นไว้ ด้วย css
}, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
function(){
// alert("finished"); // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
$("div.i_red").css("visibility","visible"); // แสดง div class=i_red
// ตั้งเวลาให้กลับไปเริ่มต้นใหม่ เพื่อแสดงอีกครั้ง
setTimeout(function(){
$("div.i_red").css("visibility","hidden");
$("div.i_green").css("visibility","visible");
},1000);
});
});
});
</script>
</body>
</html>
จากตัวอย่างการใช้งาน effect ใน jQuery UI ดังกล่าวข้างต้น เป็นการเขียนแบบ เต็มให้เห็นว่า มีอะไรบ้าง
ในแต่ละ effect การใช้งานจริง สามารถเขียนแบบย่อให้สั้นลงได้ ตามรูปแบบ ดังนี้
$(xxxx).effect("effect name",{option},time duration);
// เช่น
$("div.i_violet").effect("shake",{time:3},300);
// เป็นต้น
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 3045 25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2902 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 3479 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 12387 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 6909 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 5945 10 Nov 08 ฟังก์ชัน PHP ตัดข้อความยาวด้วย wordwrap อ่าน 4329 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 3023 21 Oct 08 php กับการแสดงวันที่เป็นภาษาไทย อ่าน 11586 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 4644 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 3816 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 9116 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 5293 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 4036 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3819 10 Oct 10 การใช้งาน stream.publish ของ facebook Old REST API ด้วย php sdk อ่าน 2951 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2838 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 2954 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 2503 25 Mar 09 ใช้งาน cookie ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน ด้วย javascript และ php อ่าน 3104