อธิบายคร่าวๆนะ ง่ายมั่กๆ
viewsource ดูเอาแล้วกันสำหรับรายละเอียด
chatbox ใช้ของ shoutmix ฟรี ไม่เสียตังส์ ไปสมัครเอา
กล่องที่ show/hide มี code แค่นี้
จากไฟล์นี้นะ ลองศึกษาเอา
http://exteenplus.googlecode.com/files/chatbox1-7-3.js $(document).ready(function(){
var option = { path:'/', expires:100 };
var isOpen;
var chatAnimate = false;
if($.cookie('chatState') == 'close'){
$('.chatbox').hide();
$('.chat').css('height', '40px');
isOpen = false;
}else{
$('.chatbox').show();
$('.chat').css('height', '340px');
isOpen = true;
};
//end if
$('a.chatTab').click(function(){
if(isOpen == true){
chatAnimate = true;
$('.chatbox').fadeOut();
$('.chat').animate({
height: '40px'}, 500,
function(){
chatAnimate = false;
}
);
$.cookie('chatState', 'close', option);
isOpen = false;
return false;
}else{
chatAnimate = true;
$('.chatbox').fadeIn();
$.cookie('chatState', 'open', option);
$('.chat').animate({
height: '340px'}, 500,
function(){
chatAnimate = false;
}
);
isOpen = true;
return false;
};
});
$('.chat').detach().appendTo('#content');
$('#sidebar2').hover(function(){
if(chatAnimate == false){
$('.chat').stop().animate({opacity: 0.25}, 500);
}
},
function(){
if(chatAnimate == false){
$('.chat').stop().animate({opacity: 1}, 500);
}
});
});
ตรงนี้เป็น ChatTab
<div class="chat">
<h2><a href="#" class="chatTab">Chat box <span class="chattoggle">(click to show/hide)</span></a></h2>
<iframe title="warrantica" src="http://www5.shoutmix.com/?warrantica" width="280" height="300" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?warrantica">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
</div>
เวลาจะใช้งานในหน้าเว็บจริงๆ ใช้แบบนี้
<head>
<script type="text/javascript" src="http://exteenplus.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://exteenplus.googlecode.com/files/chatbox1-7-3.js"></script>
</head>
<body> ....เนื้อหา...
และตามด้วย ChatTab
</body>
สงสัยตรงไหนระบุถามมาเป็นจุดๆเด้อ ขี้เกียจอธิบายหมด
ให้อีกหน่อยแล้วกันjavascript ที่เขาใช้เป็น jQuery มันเป็น javascript framework ก็หมายถึง code สำเร็จรูป เพียงแต่เรามาเขียน function ให้มันทำงาน อย่างไร? เท่านั้นเอง
อย่างที่เขาเขียนมานะ ก็ค่อยข้างรัดกุมพอสมควร ใช้แบบ ไอ้ลิ้งย้อ ขยายหน้าต่างแบบใน dekitclub นี่แหละ ที่บันทึกค่า cookie ไว้ด้วย ว่าเขาย่อ หรือขยายหน้าต่าง เวลาเปิดเข้ามาอีกครั้ง จะได้ปรับขนาดหน้าต่างให้เหมาะกับที่ผู้ใช้ต้องการ เช่นเดียวกัน เขาก็บันทึกไว้ว่า show หรือ hide
และการซ่อนก็ตั้งดัก event onClick ไว้ ถ้ามีการคลิก มันก็จะทำตามคำสั่งต่อไป บลาๆๆๆ
ศึกษาเรื่อง attribute ของ jQuery ได้จ่าก
www.jquery.com เด้อ ว่าคำสั่ง, ฟังชั่น มันทำงานอะไร ยังไง
ไม่ยากๆ อ่านซักวันให้เข้าใจก่อน จะบอกต่อ เคปะ