แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle
06 November 2010 By Ninenik Narkdeejquery jquery ui
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery jquery ui
ไปที่
Copy
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);
// เป็นต้น
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy