jQuery 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);
// เป็นต้น
