jquery tooltip
这是个加了点淡入淡出效果的顶部tooltip控件,会自动消失
用法:
<head>
<title></title>
<link href="base.css" rel="stylesheet" type="text/css" />
<link href="jquery.tooltip.less" rel="stylesheet/less" type="text/css"> <script src="less-1.4.2.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id="tooltipContainer" style="display:none;"></div>
<button onclick="javascript:tg1();">info</button>
<button onclick="javascript:tg2();">alert</button>
<button onclick="javascript:tg3();">hide</button>
<script language="javascript">
$("#tooltipContainer").tooltip(); //初始化
function tg1() {
$("#tooltipContainer").tooltip("info", "据你的使用和需求的不同...");
}
function tg2() {
$("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同...");
}
function tg3() {
$("#tooltipContainer").tooltip("hide");
}
</script>
</body>
css
.tooltip_info
{
background:green;
font-size:20px;
border-radius: 10px;
}
.tooltip_alert
{
background:yellow;
font-size:20px;
border-radius: 10px;
}
jquery.tooltip插件js代码
(function ($) {
var methods = {
init: function (options) {
return this.each(function () { var $this = $(this);
var settings = $this.data('tooltip');
if (typeof (settings) == 'undefined') {
var defaults = {
infoCss: 'tooltip_info',
alertCss: 'tooltip_alert',
disappearTime: 1000
}
settings = $.extend({}, defaults, options);
$this.data('tooltip', settings);
} else {
settings = $.extend({}, settings, options);
$this.data('tooltip', settings);
}
$tooltip = $("#tooltip");
$tooltip.hide();
if ($tooltip.length == 0) {
$tooltip = $("<div></div>");
$('body').prepend($tooltip);
$tooltip.hide();
}
})
},
info: function (options) {
return this.each(function () {
var $this = $(this);
var setting = $this.data('tooltip'); clearTimeout($this.data("autoDisappearHandle"));
$tooltip.html(options);
$tooltip.removeClass(setting.alertCss).addClass(setting.infoCss);
$tooltip.fadeIn();
var hideTooltip = function () {
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));
})
},
alert: function (options) {
return this.each(function () {
var $this = $(this);
var setting = $this.data('tooltip'); clearTimeout($this.data("autoDisappearHandle"));
$tooltip.html(options);
$tooltip.removeClass(setting.infoCss).addClass(setting.alertCss);
$tooltip.fadeIn();
var hideTooltip = function () {
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));
})
},
hide: function () {
return this.each(function () {
var $this = $(this);
clearTimeout($this.data("autoDisappearHandle"));
$tooltip.fadeOut();
})
}
}; $.fn.tooltip = function () {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof (method) == 'object' || !method) {
method = methods.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
return this;
} return method.apply(this, arguments); } })(jQuery);
不知猴年马月才能学成前端。
jquery tooltip的更多相关文章
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- jquery tooltip插件
qtip2:http://qtip2.com/ bower install qtip2 // lowercase! 引入一个css和插件即可. <script type="text/j ...
- jquery tooltip.js
1.引用关联的js脚本 <script type="text/javascript" src="script/jquery-1.3.2.min.js"&g ...
- jquery插件colortip(tooltip类型)
效果预览:http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html 源代码下载:http: ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- 240个jquery插件(转)
http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...
- jQuery插件开发--(转)
1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...
- jQuery插件开发详细教程
这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...
随机推荐
- View体系之属性动画
(内容省略了valueAnimator和PropertyValueHolder使用) 属性动画的使用的主要方式是AnimatorSet和ObjectAnimator配合使用.ObjectAnimato ...
- Android-垂直滑动的ViewPager
该ViewPager和正常的ViewPager的使用方式是一样的,只不过是垂直滑动的. 下面是这个ViewPager的代码 /** * 垂直滑动的ViewPager */ public class V ...
- Android自定义多宫格解锁控件
在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...
- (网页)input框怎么覆盖掉数字英文的
例子1: <input type="text" value="0" onkeyup="cleartwoNum(this)"> / ...
- Python 常用的正则表达式
校验数字的相关表达式: 功能 表达式 数字 ^[0-9]*$ n位的数字 ^\d{n}$ 至少n位的数字 ^\d{n,}$ m-n位的数字 ^\d{m,n}$ 零和非零开头的数字 ^(0|[1-9][ ...
- Python自定义异常及抛出异常
""" 自定义异常 """ class MyException(Exception): # 继承异常类 def __init__(self, ...
- ORACLE如何找到引起账号锁定的IP的一点思考与总结
在ORACLE数据库中,如果没有修改过FAILED_LOGIN_ATTEMPTS的话,默认10次尝试失败后就会锁住用户.此时再登录数据库,就会遇到ORA-28000: the account is l ...
- C#-非泛型集合的方法
非泛型集合的类和接口位于System.Collections命名空间 如:列表.队列.位数组.哈希表和字典的集合 ArrayList 动态数组 可被单独索引的对象的有序集合可以使用索引在指定的 ...
- maven与jdk版本对应关系
Maven发布历史 发布日期 版 必需的Java版本 链接 2018年6月21日 3.5.4 Java 7 宣布,发布说明,参考文档 2018年3月8日 3.5.3 宣布,发布说明,参考文档 2017 ...
- LeetCode算法题-Minimum Depth of Binary Tree(Java实现)
这是悦乐书的第168次更新,第170篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第27题(顺位题号是111).给定二叉树,找到它的最小深度.最小深度是沿从根节点到最近的 ...