104 lines
4.4 KiB
JavaScript
104 lines
4.4 KiB
JavaScript
|
/**
|
|||
|
|
* 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,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
|
|||
|
|
* x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选
|
|||
|
|
* y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为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);
|