jquery.qtip提示信息插件用法簡單實例

更新時間：2016年06月17日 11:45:22 作者：hbiao68

這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡單實例形式分析了該插件用于顯示提示信息的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery.qtip提示信息插件用法。分享給大家供大家參考，具體如下：

公司要求寫一個關于提示信息的效果，在網(wǎng)上查詢到了這個插件，感覺很不錯，下面是自己學習的內(nèi)容

<!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是指要顯示的內(nèi)容（包括文字和圖片）
    $("#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是指什么事件觸發(fā)讓它顯示出來，hide與show對應
    //solo:
    $("#huangbiao5").qtip({
      content: '<img src="img/2.jpg">',
      show:{
        when:'click',
        solo:false
      },
      hide:{
        when:'click',
        solo:false
      }
    });
    //顯示類似于“窗口”模式的樣式，含有title和內(nèi)容的提示信息
    $("#huangbiao6").qtip({
      content: {
        title: {
          text: 'content-title-text',
          button: 'button'
        },
        text: 'content-text'
      },
      fixed:true
    });
    //api:是回調(diào)函數(shù)，beforeShow是在顯示提示之前的提示信息，beforeHide則恰好相反；onRender是指內(nèi)容呈現(xiàn)后調(diào)用
    $("#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">使用回調(diào)函數(shù)</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao9">遮蓋全屏</span></div>
<body>
</body>
</html>

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: