45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jquery-tips悬浮提示插件的分享

jquery-tips悬浮提示插件的分享

2015-08-19 07:42:21 来源:www.45fan.com 【

jquery-tips悬浮提示插件的分享

由于是在mac下写的,没什么低版本浏览器测试工具没做具体的兼容测试,而且我也不是前端还请多多包涵,js库用的jquery1.11.1,低版本应该也是可以的,需要自己去下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,//自动关闭时间 默认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);

以上所述就是本文的全部内容了,希望大家能够喜欢。


本文地址:http://www.45fan.com/bcdm/18158.html
Tags: 提示 悬浮 jquery-tips
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部