快捷導(dǎo)航

Tips 帶三角可關(guān)閉的文字提示

更新時間：2010年10月06日 23:53:32 作者：

多功能Tips，帶小三角的文字提示，可關(guān)閉，有兩套顏色方案可選擇，可按你的要求將顯示框定義顯示在四個方向，放大或縮小瀏覽器窗口，不會有絲毫偏差。

<!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=utf-8" /> <title>Tips，帶三角可關(guān)閉的文字提示</title> </head> <body> <style type="text/css"> body{ font-size:12px;} .lj-tipsWrap,.lj-in,.lj-close{display:inline-block;} .lj-tipsWrap{background:#F4FBFF;line-height:1.5em;padding:5px 15px;border:1px solid #2192D3;position:absolute;text-align:left;} .lj-in{position:absolute;zoom:1;border:10px dashed transparent;width:0px;height:0px;} .lj-in span{zoom:1;width:0px;height:0px;overflow:hidden;} .lj-close{position:absolute; text-decoration:none;color:#000;font-size:14px; height:9px; width:9px; overflow:hidden;line-height:0.5em; right:0; top:0;} .lj-close:hover{color:#39F;} .lj-top{border-top:10px solid #2192D3;bottom:-20px; left:3px;} .lj-top span{border-top:10px solid #F4FBFF;margin:-11px 0 0 -10px;} .lj-right{border-right:10px solid #2192D3;left:-20px; top:3px;} .lj-right span{border-right:10px solid #F4FBFF;margin:-10px 0 0 -9px;} .lj-bottom{border-bottom:10px solid #2192D3;top:-20px; left:3px;} .lj-bottom span{border-bottom:10px solid #F4FBFF;margin:-9px 0 0 -10px;} .lj-left{border-left:10px solid #2192D3;right:-20px; top:3px; } .lj-left span{border-left:10px solid #F4FBFF;margin:-10px 0 0 -11px;} .lj-left ~ .lj-close{left:0;} /*css 3 漸進(jìn)增強(qiáng)*/ .lj-tipsWrap{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:2px 2px 3px #eee;-moz-box-shadow:2px 2px 3px #eee;} </style>   <h2>請劃過或點(diǎn)擊下面帶框的文本</h2> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test1">看我這里一個DIV</span><br> <input style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" value="點(diǎn)擊我" id="test2"><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test3">提示在我的下面出現(xiàn)</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test4">提示在左邊出現(xiàn)</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC;margin:30px 30px 30px 100px;" id="test5">提示出現(xiàn)2秒后會自動消失</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test6">提示可以有關(guān)閉按鈕</span><br> <div style="text-align:center;"> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test7">不同擔(dān)心頁面放大縮小會位置會偏移哦</span><br> </div> <h2>優(yōu)點(diǎn)</h2> <ul> <li>1：兼容 各種瀏覽器</li> <li>2：自己定義TIPS樣式(顏色),CSS3漸進(jìn)增強(qiáng)</li> <li>3：多方向彈出提示</li> <li>4：純CSS+javascript(不包含任何圖片)</li> <li>5：體積超級小 CSS+js = 3k</li> </ul> <h2>參數(shù)配置</h2> <ul> <li>ljtips(object).show(JSON)</li> <li>object: DOM對象ID(test1), DOM對象</li> <li><pre> json:{ content:提示的消息內(nèi)容(必須), p:提示框位置(可選值top left bottom right),默認(rèn)為right(可選), closeBtn:是否有關(guān)閉按鈕(true false) 默認(rèn)值(false)(可選), time:多少毫秒提示框消失(可選) } </pre></li> </ul> <h3>使用說明</h3> <ul> <li>主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;</li> <li>使用1</li> <li>首先實(shí)例化一個ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)</li> <li>使用2</li> <li>在行內(nèi)調(diào)用提示框"&lt;div onclick=&quot; ljtips(this).show(JSON); &quot;&gt;&lt;/div&gt;"</li> <li>使用3</li> <li>在JS里調(diào)用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"這個框你關(guān)不掉了吧！沒有關(guān)閉按鈕！",p:'right'})};</li> </ul>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]