JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件

更新時(shí)間：2012年12月20日 16:27:48 作者：

在程序提交后，為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置，利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示，需要的朋友可以了解下

在程序提交后，我們需要驗(yàn)證并提示出錯(cuò)的位置，利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示，先看效果圖：

具體調(diào)用代碼：

<input name="ipt" id="ipt" value=""/> 
<script language="javascript"> 
Tooltip.show('輸入值為空！','ipt'); 
</script> 

其實(shí)現(xiàn)過(guò)程如下：

1、首先我們?cè)赑hotoshop中設(shè)計(jì)出提示框的形狀及背景。

2、我們將背景切成三個(gè)部分，top、main、bottom

top：

main：

bottom：

3、定義提示框的CSS文件

復(fù)制代碼代碼如下:

.tooltip{ 
position:absolute; height:200px; 
width:300px; 
padding:10px; 
} 
.tooltip_main{ 
background-image:url(images/tooltip_main.png); 
background-position:center; 
background-repeat:repeat-y; 
padding-left:30px; 
padding-right:30px; 
color:#C00; 
font-weight:bold; 
} 

.tooltip_top{ 
width:300px; 
height:40px; 
background-image:url(images/tooltip_top.png); 
background-repeat:no-repeat; 
background-position:bottom; 
} 

.tooltip_bottom{ 
width:300px; 
height:20px; 
background-image:url(images/tooltip_bottom.png); 
background-repeat:no-repeat; 
background-position:top; 
}

4、創(chuàng)建Tooltip類，其實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

var Tooltip = {}; 

Tooltip.show = function(msg,obj){ 
$('#'+obj).after('<div class="tooltip" id="tooltip_'+obj+'">' 
+'<div class="tooltip_top"></div>' 
+'<div class="tooltip_main">'+msg+'</div>' 
+'<div class="tooltip_bottom"></div>' 
+'</div>'); 
//調(diào)整位置 
var objOffset = $('#'+obj).offset(); 
objOffset.left-=25; 
objOffset.top-=10; 
$('#tooltip_'+obj).offset(objOffset); 
//點(diǎn)擊消失 
$('#tooltip_'+obj).click(function(){ 
$(this).hide(); 
$('#'+obj).focus(); 
}); 
}

您可能感興趣的文章:

相關(guān)文章

jQuery獲取樣式中的背景顏色屬性值/顏色值
天使用jQuery獲取樣式中的background-color的值時(shí)發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示#ffff00，而Chrome、Firefox中則是以GRB格式顯示rgb(255,0,0)，由于需要將顏色值存儲(chǔ)到數(shù)據(jù)庫(kù)中，所以想讓顏色值的格式統(tǒng)一下（其實(shí)不統(tǒng)一也是可以存的）。搜索了一下，從國(guó)外的一個(gè)網(wǎng)站上得到一段代碼
2012-12-12
EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例
本篇文章主要介紹了EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01
jquery實(shí)現(xiàn)聚光燈效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)聚光燈效果的方法,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片時(shí)顯示當(dāng)前圖片高亮,其他圖片變暗的聚光燈效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
自動(dòng)設(shè)置iframe大小的jQuery代碼
自動(dòng)設(shè)置iframe的寬度在應(yīng)用中還是比較廣泛的，本文使用jquery實(shí)現(xiàn)一下，感興趣的朋友可以參考下
2013-09-09
jQuery選擇器及jquery案例詳解(必看)
本文給大家介紹jquery選擇器的相關(guān)知識(shí)，并通過(guò)案例給大家介紹jquery知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
用jquey bind 點(diǎn)擊事件時(shí)，傳參不注意可能會(huì)導(dǎo)致點(diǎn)擊每一行都是顯示相同內(nèi)容的情況,下面有個(gè)示例，感興趣的朋友可以參考下
2014-08-08
jquery輪播的實(shí)現(xiàn)方式附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式，文中分享了jQuery輪播完整實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
jquery實(shí)現(xiàn)（textarea）placeholder自動(dòng)換行
本文主要對(duì)jquery如何實(shí)現(xiàn)（textarea） placeholder自動(dòng)換行的方法、思路進(jìn)行介紹，下面就跟小編一起來(lái)看下吧
2016-12-12
在IE 瀏覽器中使用 jquery的fadeIn() 效果英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果英文字符字體加粗的解決方法分享。
2011-06-06
JQuery事件委托(適用于給動(dòng)態(tài)生成的腳本元素添加事件)
jq寫了點(diǎn)擊事件，是通過(guò)獲取元素的類名被點(diǎn)擊后執(zhí)行對(duì)應(yīng)方法，但是研發(fā)套完模板，他會(huì)把所有的結(jié)構(gòu)先清空，導(dǎo)致jq根本找不到那個(gè)元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下
2020-02-02