jquery-tips懸浮提示插件分享
更新時間:2015年07月31日 14:41:54 投稿:hebedich
Tooltip(提示框)是一種常見的效果,它通常用在需要進一步解釋、說明或提示的某個詞上。這種小效果實現(xiàn)起來雖然不難,但如果你想不勞而獲,可以試試 Tips。
由于是在mac下寫的,沒什么低版本瀏覽器測試工具沒做具體的兼容測試,而且我也不是前端還請多多包涵,js庫用的jquery1.11.1,低版本應(yīng)該也是可以的,需要自己去下jquery,只是寫的好玩,分享一下,希望大家能一起改進
/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({ //selector 為jquery選擇器
* msg:'your messages!', //你的提示消息 必填
* side:1, //提示窗顯示位置 1,2,3,4 分別代表 上右下左 默認為1(上) 可選
* color:'#FFF', //提示文字色 默認為白色 可選
* bg:'#F00',//提示窗背景色 默認為紅色 可選
* time:2,//自動關(guān)閉時間 默認2秒 設(shè)置0則不自動關(guān)閉 可選
* x:0,//橫向偏移 正數(shù)向右偏移 負數(shù)向左偏移 默認為0 可選
* y:0,//縱向偏移 正數(shù)向下偏移 負數(shù)向上偏移 默認為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)容了,希望大家能夠喜歡。
您可能感興趣的文章:
相關(guān)文章
jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法,本文涉及到param參數(shù)的屬性知識點,本文通過實例給大家介紹的非常詳細,具有參考借鑒價值,感興趣的朋友一起看看吧2016-09-09
jquery 查找select ,并觸發(fā)事件的實現(xiàn)代碼
項目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼,需要的朋友可以參考下。2011-03-03
用jquery中插件dialog實現(xiàn)彈框效果實例代碼
這篇文章介紹了jquery中插件dialog實現(xiàn)彈框效果實例代碼,有需要的朋友可以參考一下2013-11-11
jquery插件canvaspercent.js實現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細介紹了jquery插件canvaspercent.js實現(xiàn)百分比圓餅效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
jquery tree 可編輯節(jié)點實現(xiàn)代碼(jquery一句話節(jié)點菜單)
jquery tree 可編輯節(jié)點,實現(xiàn)的三級菜單實現(xiàn)代碼,這里我們將為大家準備了兩個。一個是鋒利的jquery中的一句話導(dǎo)航菜單實現(xiàn)代碼。非常不錯。2009-11-11

