JQuery實(shí)現(xià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)用代碼：
復(fù)制代碼 代碼如下:
<input name="ipt" id="ipt" value=""/>
<script language="javascript">
Tooltip.show('輸入值為空！','ipt');
</script>
其實(shí)現(xiàn)過程如下：
1、首先我們在Photoshop中設(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();
});
}
您可能感興趣的文章:
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 基于jquery的氣泡提示效果
- jquery.cvtooltip.js 基于jquery的氣泡提示插件
- Jquery插件分享之氣泡形提示控件grumble.js
- jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
- jQuery bt氣泡實(shí)現(xiàn)懸停顯示及移開隱藏功能的方法
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示提示框的方法
- 基于JQuery 的消息提示框效果代碼
- Jquery實(shí)現(xiàn)鼠標(biāo)移上彈出提示框、移出消失思路及代碼
- jquery懸浮提示框完整實(shí)例
- jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法分析
相關(guān)文章
天使用jQuery獲取樣式中的background-color的值時(shí)發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示#ffff00，而Chrome、Firefox中則是以GRB格式顯示rgb(255,0,0)，由于需要將顏色值存儲到數(shù)據(jù)庫中，所以想讓顏色值的格式統(tǒng)一下（其實(shí)不統(tǒng)一也是可以存的）。搜索了一下，從國外的一個(gè)網(wǎng)站上得到一段代碼2012-12-12
EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例
本篇文章主要介紹了EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了jquery實(shí)現(xiàn)聚光燈效果的方法,可實(shí)現(xiàn)鼠標(biāo)滑過圖片時(shí)顯示當(dāng)前圖片高亮,其他圖片變暗的聚光燈效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
自動設(shè)置iframe的寬度在應(yīng)用中還是比較廣泛的，本文使用jquery實(shí)現(xiàn)一下，感興趣的朋友可以參考下2013-09-09
本文給大家介紹jquery選擇器的相關(guān)知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
用jquey bind 點(diǎn)擊事件時(shí)，傳參不注意可能會導(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自動換行
本文主要對jquery如何實(shí)現(xiàn)（textarea） placeholder自動換行的方法、思路進(jìn)行介紹，下面就跟小編一起來看下吧2016-12-12
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗的解決方法分享。2011-06-06
JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
jq寫了點(diǎn)擊事件，是通過獲取元素的類名被點(diǎn)擊后執(zhí)行對應(yīng)方法，但是研發(fā)套完模板，他會把所有的結(jié)構(gòu)先清空，導(dǎo)致jq根本找不到那個(gè)元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下2020-02-02