เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที

รวมโค้ด AJAX Javascript Library jQuery Framework ต่างๆ ที่ใช้ คู่กับ php Script Ajax โค้ด Ajax Prototype UI แนะนำได้ที่นี่

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 275
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที

โพสต์ที่ยังไม่ได้อ่าน โดย jataz2 »

java script ที่ไว้ทำ balloon tooltip เมื่อเอา mouse hover ลิงค์ต่างๆ นั้นมีตัวอย่างในเว็บให้ดูมากมายครับ มี java script หนึ่งที่ผมเเนะนำคือ mootools ครับ
เเต่หัวข้อนี้ ผมจะทำให้มี balloon เกิดขึ้นทันที เมื่อ pageload ประโยชน์คือเพิ่มช่องทาง alert ให้เห็นได้ชัดเจนขึ้น เเทนที่จะแสดง balloon เฉพาะเมื่อ mouserhover เท่านั้น

สิ่งที่ต้องใช้ 1. jquery-1.4.2.min.js หรือเวอร์ชันที่ใหม่กว่า ดาวน์โหลดได้ที่ http://docs.jquery.com/Downloading_jQuery
2. รูปที่ใช้เป็น popup ในที่นี้ชื่อ PopAlert.jpg ขนาด 299*145

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="file:///C:/Documents%20and%20Settings/kittiphongc/Desktop//jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a').click(function ()//เมื่อคลิกที่ balloon
{
jQuery('div.bubble-share').hide('slow'); //ซ่อนทุกๆ <div> ที่ใช้ class bubble-share จริงๆก็คือคลิก x เพื่อปิด ballon นั่นเอง
return true;
});
});
</script>
<style type="text/css">
/* page load เเล้วโชว์ ballon ทันที */
form, form * {
font-family:tahoma;
font-size:12px;
}
.bubble-share {
background:url("file:///C:/Documents%20and%20Settings/kittiphongc/Desktop//popalert.jpg") no-repeat 0 0 transparent;
bottom:60px;
color:#AB3000;
display:none;
height:125px;
position:absolute;
width:254px;
}
.bubble-share p {
font:14px/55px tahoma;
margin:0;
text-align:left;
}
/* end */
</style>
</head>
<body>
<form id="form1" runat="server">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="a" runat="server">
This area won't be hide when close ballon
</div>
<div id="divPool" style="padding-left:140px;" runat="server">
<a href="#">
<div id="div1" class="bubble-share" style="display: block;"></div>
</a>
</div>
<br/>
<br/>
<div id="b" runat="server">
This area won't be hide when close ballonon
</div>
</form>
</body>
</html>
แนบไฟล์
example.jpg
example.jpg (43.82 KiB) Viewed 5399 times

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 58