jquery-tips懸浮提示插件分享
由于是在mac下寫的,沒什么低版本瀏覽器測試工具沒做具體的兼容測試,而且我也不是前端還請多多包涵,js庫用的jquery1.11.1,低版本應(yīng)該也是可以的,需要自己去下jquery,只是寫的好玩,分享一下,希望大家能一起改進(jìn)
/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({ //selector 為jquery選擇器
* msg:'your messages!', //你的提示消息 必填
* side:1, //提示窗顯示位置 1,2,3,4 分別代表 上右下左 默認(rèn)為1(上) 可選
* color:'#FFF', //提示文字色 默認(rèn)為白色 可選
* bg:'#F00',//提示窗背景色 默認(rèn)為紅色 可選
* time:2,//自動關(guān)閉時間 默認(rèn)2秒 設(shè)置0則不自動關(guān)閉 可選
* x:0,//橫向偏移 正數(shù)向右偏移 負(fù)數(shù)向左偏移 默認(rèn)為0 可選
* y:0,//縱向偏移 正數(shù)向下偏移 負(fù)數(shù)向上偏移 默認(rèn)為0 可選
* })
*
*
*/
(function ($) {
$.fn.tips = function(options){
var defaults = {
side:1,
msg:'',
color:'#FFF',
bg:'#F00',
time:2,
x:0,
y:0
}
var options = $.extend(defaults, options);
if (!options.msg||isNaN(options.side)) {
throw new Error('params error');
}
if(!$('#jquery_tips_style').length){
var style='<style id="jquery_tips_style" type="text/css">';
style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
style+='</style>';
$(document.body).append(style);
}
this.each(function(){
var element=$(this);
var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
tips.find('.jq_tips_info').css({
color:options.color,
backgroundColor:options.bg
});
switch(options.side){
case 1:
tips.css({
top:element_top-tips.outerHeight()+options.x,
left:element_left-10+options.y
});
break;
case 2:
tips.css({
top:element_top-20+options.x,
left:element_left+element_width+options.y
});
break;
case 3:
tips.css({
top:element_top+element_height+options.x,
left:element_left-10+options.y
});
break;
case 4:
tips.css({
top:element_top-20+options.x,
left:element_left-tips.outerWidth()+options.y
});
break;
default:
}
var closeTime;
tips.fadeIn('fast').click(function(){
clearTimeout(closeTime);
tips.fadeOut('fast',function(){
tips.remove();
})
})
if(options.time){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
tips.hover(function(){
clearTimeout(closeTime);
},function(){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
})
}
});
return this;
};
})(jQuery);
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動效果
- jQuery實(shí)現(xiàn)百度登錄框的動態(tài)切換效果
- JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實(shí)例
- js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩
相關(guān)文章
Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼
Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-05-05
jquery獲取select,option所有的value和text的實(shí)例
下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
jQuery的load()方法及其回調(diào)函數(shù)用法實(shí)例
這篇文章主要介紹了jQuery的load()方法及其回調(diào)函數(shù)用法,實(shí)例分析了load方法的簡單使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證(檢測是否可用)
JQuery調(diào)webservice實(shí)現(xiàn)郵箱驗(yàn)證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入,感興趣的朋友可以參下哈,希望對你有所幫助2013-05-05
Jquery chosen動態(tài)設(shè)置值實(shí)例介紹
Jquery chosen一款選擇插件,支持檢索,多選,但不支持輸入效果,下面與大家分享下其使用示例,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08
基于Jquery+Ajax+Json的高效分頁實(shí)現(xiàn)代碼
分頁我相信大家存儲過程分頁已經(jīng)很熟悉了,ajax更是耳熟能詳了,更別說我們的json,等等2011-10-10
jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-08-08

