本文實例講述了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>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
