精华内容
下载资源
问答
  • tooltip提示控件

    2019-10-01 16:33:24
    这些天忙于公司项目的改版就很少来这里发表文章了,今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。 先上张预览图: 提示条样式可以自己定义,支持关闭回调和锁屏,...

    这些天忙于公司项目的改版就很少来这里发表文章了,今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。

    先上张预览图:

    提示条样式可以自己定义,支持关闭回调和锁屏,自适应居中,采用fixed定位(暂未考虑兼容IE6)。

     

    下面是源码:(注:引入该JS时放在body内,不然没效果,原因不明。)

    /**
     * tooltip提示
     * @author Newton---承諾ン祗愛
     * @date 2012年04月19日晚
     * @update 2012年04月23日重构,保证一个实例的关闭函数只能触发自身的关闭事件,加入动画缓动支持。
     * @param object{}
     * @type string tip: '', 提示内容,支持传入html。
     * @type number time: 3, 自动关闭时间,以秒计时。
     * @type boolean lock: false, 锁屏。
     * @type string easing: 'linear' 动画缓动效果,需要缓动插件支持。
     * @type string maskColor: '#000', 锁屏颜色。
     * @type number maskOpacity: .3, 锁屏透明度。
     * @type number fxSpeed: 300, 动画速度,不建议设置过大,以毫秒计时。
     * @type number index: 999999,  z-index值。
     * @type function afterClose: $.noop 关闭后回调。
     */
    (function ($){
        //首次初始化
        var fistInit = true;
    
        //提示条外层包裹
        var tooltipWrap = $([
            '<div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0; pointer-events: none; background: transparent;">',
            '   <div style="position: relative; top:0; right: 50%; margin: 0; padding: 0; pointer-events: visiblePainted;"></div>',
            '</div>'
        ].join('')).appendTo(document.body);
    
        //锁屏
        var lockMask = $('<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;"></div>').appendTo(document.body);
    
        //内容包裹
        var tootipInner = tooltipWrap.children();
    
        //计时器id
        var timer = null;
    
        //实例堆栈
        var instanceStack = null;
    
        //默认参数
        var defaults = {
            tip: '',
            time: 3,
            fxSpeed: 300,
            index: 999999,
            lock: false,
            easing: 'linear',
            maskOpacity: .2,
            maskBackground: '#000',
            afterClose: $.noop
        };
    
        //接口
        var tooltip = function (config){
            //模仿静态方法,不需要用new初始化
            if (!(this instanceof tooltip)) {
                return new tooltip(config);
            }
            this.config = $.extend({}, defaults, config);
            this.config.time = this.config.time * 1000;
            this._initialize();
            return this;
        };
    
        //原型方法
        tooltip.prototype = {
            //初始化函数
            _initialize: function (){
                clearTimeout(timer);
                if (instanceStack !== null && instanceStack !== this) instanceStack.config.afterClose();
                instanceStack = this;
                tooltipWrap.css('z-index', this.config.index);
                lockMask.css({
                    zIndex: this.config.index - 1,
                    opacity: this.config.maskOpacity,
                    background: this.config.maskBackground
                });
                this._toggleMask();
                tootipInner.html(this.config.tip);
                //平滑首次动画效果
                if (fistInit) {
                    tooltipWrap.css('top', -tooltipWrap.height());
                    fistInit = false;
                }
                this._slideDown();
            },
            //锁屏
            _locked: function (){
                lockMask.fadeIn(this.config.fxSpeed);
            },
            //关闭锁屏
            _unlocked: function (){
                lockMask.fadeOut(this.config.fxSpeed);
            },
            //显示隐藏锁屏
            _toggleMask: function (){
                if (this.config.lock) {
                    this._locked();
                } else {
                    this._unlocked();
                }
            },
            //提示条滑下
            _slideDown: function (){
                var t = this;
                tooltipWrap.stop(true, false).animate({
                    top: 0
                }, this.config.fxSpeed, this.config.easing, function (){
                    t._autoClose();
                });
            },
            //提示条收起
            _slideUp: function (){
                //保证只有当前实例才能执行关闭操作
                if (instanceStack !== this) return;
                var t = this;
                this._unlocked();
                tooltipWrap.animate({
                    top: -tooltipWrap.height()
                }, this.config.fxSpeed, this.config.easing, function (){
                    instanceStack = null;
                    t.config.afterClose();
                });
            },
            //自动关闭
            _autoClose: function (){
                var t = this;
                timer = setTimeout(function (){
                    t._slideUp();
                }, this.config.time);
            },
            //关闭接口
            close: function (){
                this._slideUp();
            }
        };
    
        //公开接口
        window.tooltip = tooltip;
    })(jQuery);

    调用方法(依赖jQuery,每个参数的意义注释里都有,不多解释了):

    tooltip({
        tip: '消息',
        lock: true,
        time: 6,
        afterClose: function(){
            alert('我关闭了!');
        }
    });

    转载于:https://www.cnblogs.com/piuba/archive/2012/09/13/2683525.html

    展开全文
  • Grumble.js气泡形状的提示(Tooltip)控件

    千次阅读 2015-03-21 21:59:14
    Grumble.js是一个jQuery插件可用于创建球形汽泡Tooltips。Grumble.js采用淡入/淡出的效果展示,可以设置成自动消失或一直显示直到被关闭为止。Tooltips显示的位置可灵活自动变幻,360度全方位无死角,无残留。还能...
    Grumble.js是一个jQuery插件可用于创建球形汽泡Tooltips。

    Grumble.js采用淡入/淡出的效果展示,可以设置成自动消失或一直显示直到被关闭为止。

    Tooltips显示的位置可灵活自动变幻,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。

    这个插件还提供一些回调方法如:onShow、onBeginHide和onHide等。


    使用方法:

    一、引入必需文件

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Bubble.js"></script>
    <script type="text/javascript" src="js/jquery.grumble.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/grumble.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    目录结构如下:

    css
       -|bootstrap.css
       -|grumble.css
    images
       -|bubble-sprite.png
    js
       -|Bubble.js
       -|jquery.grumble.js
       -|jquery.min.js
    index.html


    二、页面代码

    <button type="button" id="grumble1" class="btn btn-primary">无文本</button>
    <button type="button" id="grumble2" class="btn btn-success">可选样式</button>
    <button type="button" id="grumble3" class="btn btn-info">带有关闭按钮</button>
    <button type="button" id="grumble4" class="btn btn-warning">超大文本区</button>
    <button type="button" id="myElement" class="btn btn-default">show、hide方法</button>
    <button class="btn btn-default" type="submit" id="darkside">动画实现</button>


    三、使用grumble

    <script type="text/javascript">
    	$(function() {
    		$("#grumble1").click(function(){
    			$('#grumble1').grumble( {
    				text : '',
    				angle : 200,
    				distance : 3,
    				showAfter : 100,
    				hideAfter : 1000
    			});
    		})
    		$("#grumble2").click(function(){
    			$('#grumble2').grumble( {
    				text : 'Ohh, blue...',
    				angle : 180,
    				distance : 0,
    				showAfter : 100,
    				type : 'alt-',
    				hideAfter : 1000
    			});
    		})
    		$("#grumble3").click(function(){
    			$('#grumble3').grumble( {
    				text : 'Click me!',
    				angle : 150,
    				distance : 3,
    				showAfter : 100,
    				hideAfter : false,
    				hasHideButton : true, // just shows the button
    				buttonHideText : 'Pop!'
    			});
    		})
    		$("#grumble4").click(function(){
    			$('#grumble4').grumble( {
    				text : 'Whoaaa, this is a lot of text that i couldn\'t predict',
    				angle : 85,
    				distance : 50,
    				showAfter : 100,
    				hideAfter : 1000,
    				onHide : function() {
    					isSequenceComplete = true;
    				}
    			});
    		})
    
    		$('#myElement').click(function(){
    			$('#myElement').grumble({
    				showAfter: 100,
    				hideAfter: 2000,
    				angle : 150,
    				distance : 12,
    				onShow: function(){
    					console.info('当显示动画完成触发');
    				},
    				onBeginHide: function(){
    					console.info('隐藏动画开始时触发');
    				},
    				onHide: function () { 
    					console.info('当隐藏动画完成后触发');
    				}
    			});
    		})
    
    		$('#darkside').click(function(e){
    			var $me = $(this), interval;
    			e.preventDefault();
    			$me.grumble(
    				{
    					angle: 130,
    					text: 'Look at me!',
    					type: 'alt-', 
    					distance: 13,
    					hideOnClick: true,
    					onShow: function(){
    						var angle = 130, dir = 1;
    						interval = setInterval(function(){
    							(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
    							$me.grumble('adjust',{angle: angle});
    						},25);
    					},
    					onHide: function(){
    						clearInterval(interval);
    					}
    				}
    			);
    		});
    
    	})
    </script>
    主要参数含义

    angle: 旋转度数顺时针方向

    distance:距离

    showAfter:指定毫秒数后显示动画

    hideAfter:指定毫秒数后隐藏动画


    演示地址



    展开全文
  • 最开始是为 Huddle.com 网站开发的, grumble.js 是一个很特别的提示控件,它没有通常的north/east/south/west的定位限制。 任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无...

    最开始是为 Huddle.com 网站开发的, grumble.js 是一个很特别的提示控件,它没有通常的north/east/south/west的定位限制。

    任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后,它能在IE6+这些古董浏览器上工作,更不用FF、Chrome这些现代的浏览器了!

    grumble.js 其实是一个jQuery插件,可以在 Github找到源码

    在线demo演示

    展开全文
  • function makeSelfTooltip(_options){ _options = $.extend(_options, { 'tooltip': { trigger: 'axis', axisPointer: { type: 'shadow' }, ...
    function makeSelfTooltip(_options){
        _options = $.extend(_options, {
            'tooltip': {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var res='<div><p>'+params[0].name+'</p></div>'
                    for(var i=0;i<params.length;i++){
                        res+='<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+'"></span>'+params[i].seriesName+':'+params[i].data['value']+'%</p>';
                    }
                    return res;
                },
                textStyle: {
                    fontSize: 12,
                    fontFamily: '宋体'
                }
            }
        }, true);
        return _options;
    }
    展开全文
  • 这是asp.net 2.0控件,内嵌jsToolTip 控件FloatPanel控件,支持单页面多实例。 这两款控件使用方法和Panel极其类似,只是增加了一些额外的功能。 (内含dll和web源码)
  • 各种风格的网页链接ToolTip显示控件,提供了基于ASP.NET+C#实现的服务器端动态ToolTip显示控件,也提供了纯js脚本的客户端ToolTip显示控件,该控件可以与不同的用户控件帮定。
  • grumble.js 其实是一个jQuery插件 准备 : 4个文件,其中grumble.min.css 和 bubble-sprite.png 的相对位置固定,bubble-sprite.png不用引入html,其它需要。资源:。。。 demo : <button>...
  • 第一种: 效果: ... ...不需要js代码,显示的是title中的内容。...a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me 01</a> </div> 第二...
  • 一个基于js+AJAX实现的ToolTip AJAX Client Control客户端控件源码。
  •  方案一:大家都共用一个span来显示提示内容。  type="text/javascript">  /**  * 获取鼠标在页面上的位置  * @param ev 触发的事件  * @return x:鼠标在页面上的横向位置, y:鼠标在页面上...
  • 强大的JS Tooltip工具

    2012-09-13 13:41:51
    最近开发需要用ToolTip暂时一个稍微复杂的内容(内部含有文字,图片,图片可以点击跳转页面) 在网上找了好多基于 jQuery 的Tooltip库,但没有符合我使用要求的。...控件的关键配置都在 ws_tooltip.js 文件中...
  • 直接上代码 var o = { "tooltip": { trigger: 'item', "formatter": function (params) { var obj = JS...
  • 界面中的各个控件有时候会需要ToolTip的功能,其实实现ToolTip功能十分简单,代码如下所示: function GetValueForToolTip(obj) { var tValue = obj.innerText; obj.setAttribute("title", tValue);} 参数obj...
  • 今天有位博友问有没有JQuery实现表单验证的好的控件,正好最近有收集一个不错的控件:jQuery Inline Form Validation Engine,这是一个采用Tooltip效果显示校验提示信息的表单校验jQuery插件。 用到的JS文件有...
  • CheckBoxList 控件ListItem项本身自带的没有ToolTip属性,但在开发中,时常会要用到此效果,故通过JS来实现 CS类: chk.Items.Add(new ListItem("项目前期", "505004"));  chk.Items.Add(new ListItem("项目...
  • GUI.tooltip

    2015-10-23 21:03:13
    GUI.tooltip 控制鼠标当前通过对象的提示信息,或具有键盘焦点。当你创建GUI控件的时候,你可以传递一...Unity 3D里的JS脚本里,通过GUI.tooltip 来获取提示信息,例如要绘制一个按钮,并且对该按钮赋予提示信息,将提
  • 什么是FusionCharts的工具提示 当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示。提示的信息可以是以下...用户可以通过设置showToolTip='0'选择禁用图表上的工具提示。 示例:...
  • 支持IE、Fixfox、Safari、Opera内核的浏览器的js脚本日历控件 使用说明: &lt;asp:TextBox ID="txtDate" runat="server" ToolTip="请输入工时对应的工作日期,格式:2008-08-08"...
  • 下载ToolTip.rar文件(http://download.csdn.net/source/1729047)打开vs2005 新建一个项目新建一个连接数据库的类(这里不在多讲)打开Default.aspx文件引用ToolTip.js文件(从ToolTip中解压出来,复制到项目中),放在之间...
  • 在绑定DropDownList控件时,可能出现绑定显示的文本过长以至于超过控件长度的内容看不到,这时候就需要使用ToolTip完成其功能,即鼠标放到相应选项后就可显示其完成内容。 首先,在页面引入jQuery,我用的是jquery-...
  • 现象是在表单中如果显示两列控件,右边的控件是combo,combobox 等右边有按钮的,宽度为100%时,验证不通过的tooltip 显示位置不准确如下图所示 打开 jquery.easyui-1.4.1.min.js 大概在 2575行 改为 var t=$...
  • 一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:[html]接着在js中添加如下代码:[Js]OK...
  • 一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:[html]普通提示接着在js中添加如下代码...

空空如也

空空如也

1 2 3 4
收藏数 63
精华内容 25
关键字:

tooltip控件js