如何使"jQuery UI选项卡"闪烁/闪烁

Question

我想让"jQuery UI TAB"闪烁(就像通知一样).我有不同的标签(收件箱|已发送|重要).我的计时器功能检查收件箱中是否有新消息,如果有,我希望收件箱选项卡开始闪烁/闪烁,除非它被点击打开.

尝试了不同的选项,如.effect(..),.tarbs(fx:{..}),但似乎没有任何工作:(

任何想法是否可能？

Answer 1

是的,这绝对是可能的.

为了给我一些练习,我blinker为你编写了一个jQuery 插件:

jQuery的:

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'blinker';
    var blinkMain = function(data){
        var that = this;
        this.css(data.settings.css_1);
        clearTimeout(data.timeout);
        data.timeout = setTimeout(function(){
            that.css(data.settings.css_0);
        }, data.settings.cycle * data.settings.ratio);
    };
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                        css_0: {
                            color: $this.css('color'),
                            backgroundColor: $this.css('backgroundColor')
                        },
                        css_1: {
                            color: '#000',
                            backgroundColor: '#F90'
                        },
                        cycle: 2000,
                        ratio: 0.5
                    };
                    if(options) { $.extend(true, settings, options); }

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings,
                        interval: null,
                        timeout: null,
                        blinking: false
                    });
                }
            });
        },
        start: function(){
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                if(!data.blinking){
                    blinkMain.call($this, data);
                    data.interval = setInterval(function(){
                        blinkMain.call($this, data);
                    }, data.settings.cycle);
                    data.blinking = true;
                }
            });
        },
        stop: function(){
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                clearInterval(data.interval);
                clearTimeout(data.timeout);
                data.blinking = false;
                this.style = '';
            });
        }
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = function( method ) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );

在这里看到它

插件和小提琴非常原始,因为我没有尝试与jQuery-ui-tabs集成.这可能很容易或很难,我不知道,但是提供每个标签可以通过类或id进行寻址,那么它应该不会太难.

您可能需要考虑的是在单击时停止闪烁选项卡.为此,您可能希望.blinker('stop')直接(使用.on('click')处理程序)或从适当的jQuery-ui-tabs回调调用该方法.

API

插件是用jQuery的首选模式编写的.它只在jQuery.fn命名空间中放入一个成员,.blinker(...)并将像标准的jQuery方法一样链接.

方法:

• .blinker('init'[,options]):用闪烁行为初始化选定的元素.自动调用.blinker(options),或者.blinker()以最简单的形式调用.
• .blinker('start'):导致所选元素开始在插件默认值和/或选项确定的两种样式之间闪烁.
• .blinker('stop'):导致所选元素停止闪烁并返回其自然的CSS样式.

选项:属性图,用于确定闪光灯样式和时间:

• css_0 :(可选)表示闪烁OFF状态的css属性的映射.
• css_1:表示闪烁ON状态的CSS属性的映射.
• cycle:闪烁周期时间,以毫秒为单位(默认为2000).
• ratio:ON时间占循环时间的比例(默认为0.5).

通过省略css_0选项图,OFF状态由元素(在其他地方定义的自然CSS样式(通常在样式表中))确定.

默认值是硬编码为css_1.color,css_1.backgroundColor,cycle时间和ratio.不会以编程方式更改默认设置,因此对于不同的默认样式,需要编辑插件.