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

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

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

User avatar
jataz2
PHP Super Member
PHP Super Member
Posts: 233
Joined: 22/02/2011 11:48 am

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

Postby jataz2 » 22/02/2011 12:06 pm

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>
Attachments
example.jpg
example.jpg (43.82 KiB) Viewed 3084 times

Return to “AJAX Javascript Library - jQuery”

Who is online

Users browsing this forum: No registered users and 5 guests