qTip2-气泡提示插件

最新推荐文章于 2024-04-09 09:34:58 发布

Jcinta_912

最新推荐文章于 2024-04-09 09:34:58 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： javascript 插件

本文链接：https://blog.csdn.net/jcinta_912/article/details/18958991

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML：

<body> 
              <div style="width:200px;height:200px;border:solid 1px red;position:relative;left:400px;" id="tip" >
                  <a href="http://www.baidu.com" id="test01" target="_blank">test</a>
              </div>
              <br>
             <div class="fc-event-inner">
                <input type="text" id="name" class="clickable"><br>
               <div id="divname"></div>
               <input type="button" id="checkname" value="checkname" οnclick="docheck();" class="clickable"><br>
             </div>
 </body>

JavaScript：

               $("#test01").qtip({
                 content:{
                   text: "lalallalla",  
                   title: {   
                    text: false 
               }
             },
            style: { 
                  classes: 'qtip-red qtip-shadow qtip-rounded',
                  width:'80px',
                  height:'100px'
             } 
         });
      window.docheck=function(persistent){
        var tooltip=$("#divname").qtip({
          content: {
            text: '',
            title: {
                text: 'warning',
                button: false
            }
        },
        position: {
            target: $("#name")
        },
        show: {
            event: false,
            ready: true,
            effect: //false
            function() {
                $(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
                $(this).slideDown(800);
                $(this).fadeOut(1500);
                $(this).hide(3000);
            },
            delay: 0,
            persistent: persistent
        },
        hide: {
            event: false,
            effect: function(api) {
                $(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
            }
        },
        style: {
            classes: 'qtip-orange qtip-shadow qtip-rounded',
            width:'120px',
            height:'80px',
            tip:false
            /*{
              corner: true,  
              mimic: false,  
              width: 8,  
              height: 8,  
              border: true,  
              offset: 0
            }*/
        }
        });
        var api=tooltip.qtip('api');
        if($("#name").val()==""){
          api.set('content.text', 'not null!');
        }else if($("#name").val()=="aa"){
          api.disable(true);
          //$("#divname").qtip('disable');
        }else{
          api.set({
            'style.height':'10px',
            'content.text': 'else!',
            'show.effect': 'false',      
            'content.title.button':"x",
            'hide.effect':function(api) {
                 $(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
                 alert("close!");
              }
          });
        }
      }

效果如图所示。当鼠标放置在test链接上时会出现提示。点击checkname按钮时，当文本框中没有输入任何内容时会弹出警告提示：“not null！”，当文本框中输入“aa”时会弹出空内容的提示，当输入其他值时弹出“else！”提示。