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的ON()方法支持的所有事件罗列
Feb 28 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
js实现两点之间画线的方法
May 12 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 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以json或xml格式返回请求数据的方法
2018/05/31 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
XML文档面试题
2015/08/05 面试题
一名女生的自荐信
2013/12/08 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
学习型班组申报材料
2014/05/31 职场文书
高中运动会广播稿
2015/08/19 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android