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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javascript截取字符串小结
Apr 28 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
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中include()与require()的区别说明
2010/03/10 PHP
php银联网页支付实现方法
2015/03/04 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
vue实现循环切换动画
2018/10/17 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
使用p5.js临摹动态图形
2019/10/23 Javascript
python发送伪造的arp请求
2014/01/09 Python
Django中使用locals()函数的技巧
2015/07/16 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python3 下载网络图片代码实例
2019/08/27 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
基于python实现把图片转换成素描
2019/11/13 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
安全生产实施方案
2014/02/23 职场文书
新法人代表任命书
2014/06/06 职场文书
甘南现象心得体会
2014/09/11 职场文书
首次购房证明
2015/06/19 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
k-means & DBSCAN 总结
2021/04/27 Python