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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
[JS]点出统计器
2020/10/11 Javascript
js Date概念详细介绍
2013/11/22 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python pandas常用函数详解
2018/02/07 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
小学生勤俭节约倡议书
2015/04/29 职场文书
小学六年级毕业感言
2015/07/30 职场文书
2016新年问候语大全
2015/11/11 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL