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)閉時(shí)間 默認(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 easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法,本文涉及到param參數(shù)的屬性知識點(diǎn),本文通過實(shí)例給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09
jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
項(xiàng)目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼,需要的朋友可以參考下。2011-03-03
基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01
用Jquery.load載入頁面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁面,以實(shí)現(xiàn)局部刷新,可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣,樣式?jīng)]了,關(guān)于這個問題,下面有個不錯的解決方法2014-01-01
用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
jquery tree 可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)
jquery tree 可編輯節(jié)點(diǎn),實(shí)現(xiàn)的三級菜單實(shí)現(xiàn)代碼,這里我們將為大家準(zhǔn)備了兩個。一個是鋒利的jquery中的一句話導(dǎo)航菜單實(shí)現(xiàn)代碼。非常不錯。2009-11-11

