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