Question

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

尝试了不同的选项，例如.effect（..），。tarbs（fx：{..}），但似乎没有任何效果：（

知道是否可能？

Answer 1

是的，这绝对是可能的。

为了给我一些练习，我为你写了一个jQuery blinker插件：

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 );

在行动here

中查看

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

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

<强> API

该插件已正确写入jQuery's preferred pattern。它只在jQuery.fn命名空间中放置一个成员，而.blinker(...)将像标准jQuery方法一样链接。

方法：

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

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

css_0 :(可选）表示闪烁关闭状态的css属性地图。
css_1 ：表示闪烁开启状态的CSS属性地图。
周期：闪烁周期时间（以毫秒为单位）（默认为2000）。
比率：开启时间占周期时间的比例（默认为0.5）。

通过从选项图中省略css_0，OFF状态由其他地方定义的元素（通常在样式表中）定义的自然CSS样式确定。

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

Answer 2

默认情况下，jQuery提供了大量的effects可供选择。您可以在任何需要的地方轻松使用它们，并且可以像这样使用它们：

$('#newmsg').effect("pulsate", {}, 1000);

Demo

Answer 3

是的......这就是你需要的...... !!!

这是javascript

if(newmessage==true){
   $('#chat-86de45de47-tab').effect("pulsate", {}, 1000);
}

我认为是

如何使“jQuery UI选项卡”闪烁/闪烁

3 个答案: