简单的JQUERRY TIP 插件 信息提示插件

因为公司需要，所以临时写了一下这个插件。

jquery 版本是:1.6

jquery代码：

(function($){
    $.fn.extend({
            light_tip:function(opt){
                    var option = {
                            tipOffset:{left:0,top:0},//位置的微调
       　　　　　　　　tipPosition:"top",//提示语出现的位置，有四个值：top,bottom,left,right
       　　　　　　tipTitle:"",//提示语内容，可以省略。省略时，则默认取：title里面的值
       　　　　　　tipMaxWidth:300,//提示语的宽度
       　　　　　　border:"1px solid #ddd",//提示语的边框
      　　　　　　 opacity:"0.8",//提示语的透明度
                            tipClass:"lightTip",//提示语上所有的类样式
       　　　　　　backgroundColor: "#eee",//提示语默认的背景色
                            tipInEvent:"mouseover",//弹出的提示语的事件，可以添加多个事件，比如：click mouseover
                            tipOutEvent:"mouseout"//隐藏提示语的事件
                    }
                    $.extend(option,opt);
                    var data_source = {a:"title",input:'alt',img:'alt'}
                    $(this) .bind(option.tipInEvent,function(e){
      //保存信息
      option.tipTitle==''?this.myTitle = this.title:this.myTitle = option.tipTitle;
      this.myTitle1 = this.title;
      this.title='';

      var this_position = $(this).offset();
      var this_width = $(this).width();
      var this_height = $(this).height();
      var tip = "<div id='lightTip'>"+this.myTitle+"</div>";
      $("body").append(tip);
      $("#lightTip").addClass(option.tipClass).css({
       "width":option.tipMaxWidth+"px",
       "border":option.border,
       "opacity":option.opacity,
       "backgroundColor":option.backgroundColor
               
      });
      var tip_height = $("#lightTip").height();
      var tip_width = $("#lightTip").width();
      var top,left;
      switch(option.tipPosition){
       case "top": top = this_position.top-tip_height+option.tipOffset.top+"px";left = this_position.left+option.tipOffset.left+"px"; break;
       case "bottom":  top = this_position.top+this_height+option.tipOffset.top+"px";left = this_position.left+option.tipOffset.left+"px";break;
       case "left": top = this_position.top+option.tipOffset.top+"px";left = this_position.left-tip_width+option.tipOffset.left+"px"; break;
       case "right":  top = this_position.top+option.tipOffset.top+"px";left = this_width+this_position.left+option.tipOffset.left+"px";break; 
      }
      $("#lightTip").css({"top":top,"left":left,"position":"absolute"}).show("fast"); 
      
     }).bind(option.tipOutEvent,function(e){
      option.tipTitle==''?this.title = this.myTitle:this.title = this.myTitle1;
      $("#lightTip").remove(); 
     });
            }
    });
})(jQuery);
　　

 

html代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 <script type='text/javascript' src="/js/jquery-1.6.1.min.js"></script>
 7 <script type='text/javascript' src='tip.js'></script>
 8 <script type="text/javascript">
 9     $(function(){
10         $("#test").light_tip({tipOffset:{left:0,top:0},tipPosition:"bottom",tipTitle:"翁艺财<br/>你好<br/><img src='http://portrait4.sinaimg.cn/1249374307/blog/180' />你好"});
11         $("#mimi").light_tip({tipInEvent:"focus",tipOutEvent:"blur",tipPosition:"bottom",tipOffset:{left:0,top:7},tipMaxWidth:150});
12         $("#img").light_tip({tipPosition:"bottom",tipOffset:{left:100,top:0},tipMaxWidth:150});
13     });
14 </script>
15 </head>
16 <body>
17     <div style=" text-align:center; width:800px; height:400px; margin:30px auto; border:1px solid #ddd;">
18     
19     <a href="hsdfasd" title="测试一下。" id="test">adfasd</a>fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd
20     
21     <input type="text" name="username" id="mimi" title="请输入"/>
22     <img src='http://portrait4.sinaimg.cn/1249374307/blog/180' id="img" title="这是一张图片" />
23     </div>
24 </body>
25 </html>

posted on 2011-09-20 11:22  budao  阅读(336)  评论(0)    收藏  举报

导航