jquery-tips悬浮提示插件分享


Posted in Javascript onJuly 31, 2015

由于是在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);

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

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
Vue实现多页签组件
Jan 14 Vue.js
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
javascript文本模板用法实例
Jul 31 #Javascript
Javascript实现网络监测的方法
Jul 31 #Javascript
jquery模拟alert的弹窗插件
Jul 31 #Javascript
You might like
php全局变量和类配合使用深刻理解
2013/06/05 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php验证码实现代码(3种)
2015/09/07 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
理解javascript对象继承
2016/04/17 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
献爱心大型公益活动策划方案
2014/09/15 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
小学生通知书评语
2014/12/31 职场文书
导游词之日本富士山
2020/01/06 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL