Coda Bubble Plugin
这个jQuery插件可以用于制作漂亮的汽泡弹出窗。可以指定汽泡与触发元素之前的距离、汽泡自动消失时间，汽泡窗宽度。
1. Download the zip file, unzip it and upload the coda_bubble folder to your server
2. Within the head section of a HTML document include the jQuery library, bubble.css and jquery.codabubble.js
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
3. On DOM ready set up configuration options for each bubble. The code below sets up the scenario for two bubbles
<script type="text/javascript">
$(function(){
opts = {
distances : [40,40],
leftShifts : [-30,-30],
bubbleTimes : [400,400],
hideDelays : [0,0],
bubbleWidths : [200,200],
bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
msieFix : true
};
$('.coda_bubble').codaBubble(opts);
});
</script>
4. In the body section use the following code for each bubble.
Note: css class .trigger has not been defined in bubble.css.
<div class="coda_bubble">
<div>
<p class="trigger">Trigger Bubble</p>
</div>
<div class="bubble_html">
[BUBBLE CONTENT]
</div>
</div>
That's it! Enjoy.
