• Coda Bubble Plugin


    这个jQuery插件可以用于制作漂亮的汽泡弹出窗。可以指定汽泡与触发元素之前的距离、汽泡自动消失时间,汽泡窗宽度。

    Coda Bubble Plugin

       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.

    点击次数   官方主页【官方主页】   下载地址【下载地址】

    网友留言/评论

    我要留言/评论

    相关开源项目

    Tooltip for forms:当Forms中的某项元素获得焦点时候,会出现一个消息提醒框(Tooltips)。

    BetterTip:一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。
    clueTip:clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。
    jquery-rollover-tooltip:利用jQuery实现当鼠标移过图标上方时会出现一个气泡(tooltip),气泡中的内容读取自html tags属性。
    BeautyTips:BeautyTips是一个jQuery Tooltip插件.
    Ajax Tooltip script:这个Tooltip根据页面标签title属性指定的链接地地通过Ajax获取气泡要显示的内容。
    MooTooltips:MooTooltips是一个采用MooTools开发的Tooltip控件。拥有漂亮的气泡外框,支持从Ajax,页面HTML获取需要显示的内容。
    Form Field hints:利用CSS与JavaScript实现表单字段输入提醒。
    Simpletip:Simpletip是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素(标签)之上。并定制展示方式与位置。tooltips可以是静态,动态或通过Ajax加载。
    MooTools Tooltip:利用Mootools开发的Tooltips控件。