jquery.qtip插件简单入门实例

发布时间:2020-06-03编辑:脚本学堂
本文介绍了jquery中qtip插件的用法示例,学习下jquery.qtip插件的使用方法,有需要的朋友参考下。

例子,jquery.qtip插件用法。
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>  
<script type="text/javascript"> 
$(document).ready( 
    function(){ 
        //使用插件默认的样式显示,content是指要显示的内容(包括文字和图片) 
        $("#huangbiao").qtip({ 
            content: 'Stems are great for indicating the context of the tooltip.', 
            style: {  
                tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners 
            } 
        }); 
         
        //style json是对提示样式的设置即外面的div样式设置,但是没有设置具体的位置 
        $("#huangbiao1").qtip({ 
            content: '设置显示文字样式', 
            style: {  
                width: 200, 
                padding: 5, 
                background: '#A2D959', 
                color: 'black', 
                textAlign: 'center', 
                border: { 
                    width: 7, 
                    radius: 5, 
                    color: '#A2D959' 
                }, 
                tip: 'bottomLeft', 
                name: 'dark' // Inherit the rest of the attributes from the preset dark style 
            } 
        }); 
         
        //name:'green' 是继承了默认的提示样式,还有其他的name可以参考帮助文档 
        $("#huangbiao2").qtip({ 
            content: '使用插件自定义的样式', 
            style: {  
                name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners 
            } 
        }); 
         
        //target:表示提示信息显示在控件的什么位置 
        //tooltip: 
        $("#huangbiao3").qtip({ 
            content: 'Stems are great for indicating the context of the tooltip.', 
            position: { 
                corner: { 
                    target: 'topLeft', 
                    tooltip: 'bottomLeft' 
                } 
            } 
        }); 
         
        $("#huangbiao4").qtip({ 
            content: '<img src="img/2.jpg">', 
        }); 
         
        //show 是指显示的情况,when是指什么事件触发让它显示出来,hide与show对应 
        //solo: 
        $("#huangbiao5").qtip({ 
            content: '<img src="img/2.jpg">', 
            show:{ 
                when:'click', 
                solo:false 
            }, 
            hide:{ 
                when:'click', 
                solo:false 
            } 
        }); 
         
        //显示类似于“窗口”模式的样式,含有title和内容的提示信息 
        $("#huangbiao6").qtip({ 
            content: {   
                title: {   
                    text: 'content-title-text',   
                    button: 'button'   
                },   
                text: 'content-text'   
            }, 
            fixed:true 
        }); 
         
        //api:是回调函数,beforeShow是在显示提示之前的提示信息,beforeHide则恰好相反;onRender是指内容呈现后调用 
        $("#huangbiao7").qtip({ 
            content: 'use callback function', 
            api:{ 
                beforeShow:function(){ 
                    alert("beforeShow api function"); 
                },   
                beforeHide:function(){ 
                    alert("beforeHide api function"); 
                } 
            } 
        }); 
         
        $("#huangbiao9").qtip({ 
            content: '', 
            style:{ 
                width:"1024px", 
                height:"1024px", 
                background:"black" 
            } 
        }); 
    }    
); 
</script> 
<title>无标题文档</title> 
</head> 
    <div  style="text-align:center;"><span id="huangbiao">显示普通文字</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao1">设置显示文字样式</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao2">使用插件自定义的样式</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao3">设置提示的显示位置</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao4">显示图片</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao5">点击事件显示以及隐藏提示</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao6">含有标题的提示信息</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao7">使用回调函数</span></div> 
    <p> 
    <div  style="text-align:center;"><span id="huangbiao9">遮盖全屏</span></div> 
<body> 
</body> 
</html>