jquery tooltip
jQuery tooltip
2023-09-14 08:57:46 时间
这是个加了点淡入淡出效果的顶部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 ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- checkbox选中和不选中 jqu_jquery checkbox 选中不选中
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jquery预加载图片详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery实现动态搜索显示功能详解编程语言
- jQuery技巧大放送学习jquery的朋友可以看下
- jquery下为Eventhandler传递动态参数的代码
- jqPlot基于jquery的画图插件
- jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- jQuery随机切换图片的小例子
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jQuery解决下拉框select设宽度时IE6/7/8下option超出显示不全
- jQuery实现可拖动的浮动层完整代码
- jquery对dom的操作常用方法整理
- jquery固定底网站底部菜单效果
- Jquery的hide及toggle方法让超链接慢慢消失
- jQuery拖拽div实现思路
- jquery制作居中遮罩层效果分享
- jQuery实现拖动调整表格单元格大小的代码实例