jQuery实现的简单提示信息插件


Posted in Javascript onDecember 08, 2015

本文实例讲述了jQuery实现的简单提示信息插件。分享给大家供大家参考,具体如下:

jQuery代码如下:

(function ($) {
  $.fn.Tips = function (options) {
    var defaults = {
      html: "",
      times: 3000
    }
    _this_ = $("#tips");
    _this_.html(options.html);
    _this_.show();
    setTimeout(function () { _this_.hide() }, options.times);
  };
})(jQuery);

css样式如下:

.tips
{
  height: 20px;
  background-color: Green;
  padding: 5px 20px;
  color: White;
  display: none;
  margin-left: 50px;
}

使用方法:

<span class="tips" style="display:none" id="tips"><span>
<script>
$("#aa").Tips({html:"提示信息的内容",times:4000})
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 #Javascript
AngularJS实现全选反选功能
Dec 08 #Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 #Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 #Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
AngularJS Module方法详解
Dec 08 #Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php如何连接sql server
2015/10/16 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python实现合并两个排序的链表
2019/03/03 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python日志模块logbook使用方法
2019/09/19 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
C语言编程练习
2012/04/02 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript