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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vuex的简单使用教程
Feb 02 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
原生js实现下拉框选择组件
Jan 20 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php实现可逆加密的方法
2015/08/11 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python实现点对点聊天程序
2018/07/28 Python
flask中过滤器的使用详解
2018/08/01 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python_mask_array的用法
2020/02/18 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
校园之星获奖感言
2014/01/29 职场文书
应用外语系自荐信
2014/06/26 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
捐助倡议书
2015/01/19 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript