如何制作"jQuery UI选项卡"闪烁/闪烁 [英] How to make "jQuery UI tab" blink/ flash
问题描述
我想使"jQuery UI TAB"闪烁(如通知). 我有不同的标签(收件箱|已发送|重要).我的计时器功能检查收件箱中是否有新消息，如果有，我希望收件箱选项卡开始闪烁/闪烁，除非单击打开.
I want to make "jQuery UI TAB" blink (like notification). I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open.
尝试过.effect(..)、. tabs(fx:{..})等不同选项，但似乎没有任何效果:(
Have tried diffrent options like .effect(..), .tabs(fx: {..}) but nothing seems to work :(
有没有可能?
推荐答案
是的，肯定有可能.
为了给我一些练习，我为您编写了一个jQuery blinker插件:
To give me some practice, I've written a jQuery blinker plugin for you:
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进行寻址，那么它应该不会太困难.
The plugin and the fiddle are pretty raw in that I haven't tried to integrate with jQuery-ui-tabs. This may be easy or hard, I don't know, but providing each tab is addressable by class or id then it shouldn't be too difficult.
您可能需要考虑的一点是，单击它时停止一个闪烁的选项卡.为此，您可能希望直接(使用.on('click')处理程序)或从适当的jQuery-ui-tabs回调中调用.blinker('stop')方法.
Something you may need to consider is stopping a blinking tab when it is clicked. For this you may wish to call the .blinker('stop') method directly (with a .on('click') handler) or from an appropriate jQuery-ui-tabs callback.
API
该插件已正确编写为 jQuery的首选模式.它仅将一个成员放入jQuery.fn命名空间，并且.blinker(...)将像标准jQuery方法一样进行链接.
The plugin is properly written in jQuery's preferred pattern. It puts just one member in the jQuery.fn namespace and .blinker(...) will chain like standard jQuery methods.
方法:
- .blinker('init'[，options]):初始化具有眨眼行为的选定元素.使用
.blinker(options)自动调用，或者以最简单的形式自动调用.blinker(). - .blinker('start'):导致所选元素开始在两种样式之间闪烁，这取决于插件的默认值和/或选项. >
- .blinker('stop'):使选定的元素停止闪烁并返回其自然的CSS样式.
- .blinker('init' [,options]) : Initialises selected element(s) with blinker behaviour. Called automatically with
.blinker(options), or just.blinker()in its simplest form. - .blinker('start') : causes selected element(s) to start blinking between two styles as determined by plugin defaults and/or options.
- .blinker('stop') : causes selected element(s) to stop blinking and return to their natural CSS style(s).
选项:属性图，确定信号灯样式和时间:
Options : a map of properties, which determine blinker styles and timing:
- css_0 :(可选)代表闪烁OFF状态的CSS属性的映射.
- css_1 :CSS属性映射，表示闪烁的ON状态.
- 周期:闪烁周期时间(以毫秒为单位)(默认为2000).
- 比率:开启时间占循环时间的比例(默认为0.5).
- css_0 : (optional) a map of css properties representing the blink OFF-state.
- css_1 : a map of CSS properties representing the blink ON-state.
- cycle : the blink cycle time in milliseconds (default 2000).
- ratio : ON time as a proportion of cycle time (default 0.5).
通过从选项图中省略css_0，OFF状态由元素在其他地方(通常在样式表中)定义的自然CSS样式确定.
By omitting css_0 from the options map, the OFF state is determined by the element(s)' natural CSS styling defined elsewhere (typically in a stylesheet).
默认值是css_1.color，css_1.backgroundColor，cycle时间和ratio的硬编码.无法通过编程方式更改默认设置，因此对于不同的默认样式，将需要编辑插件.
Default values are hard-coded for css_1.color, css_1.backgroundColor, cycle time and ratio. Changing the default settings programmatically is not handled, so for different default styling the plugin will need to be edited.
这篇关于如何制作"jQuery UI选项卡"闪烁/闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
