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

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

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

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

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

โพสต์โดย 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>
แนบไฟล์
example.jpg
example.jpg (43.82 KiB) เปิดดู 1957 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน