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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
React forwardRef的使用方法及注意点
Jun 13 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
详解vue路由
2020/08/05 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
期末自我鉴定
2014/02/02 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
消防宣传语大全
2015/07/13 职场文书
股东出资协议书
2016/03/21 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python