mootools_MooTools Dotter简介

mootools

It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am a Web Developer and prefer JavaScript/text-based solutions. That's where my inspiration for MooTools Dotter came from.

最佳实践是在执行AJAX请求或在后台进行的处理时提供某种指示符。 自AJAX诞生以来，我们一直在使用色彩丰富的微调框和图像作为指标。 当我欣赏这些图像时，我是一名Web开发人员，并且更喜欢基于JavaScript /文本的解决方案。 那就是我对MooTools Dotter的灵感来源。

Dotter is a plugin that allows you to create XHTML-based periodical indicators quickly and easily.

Dotter是一个插件，可让您快速轻松地创建基于XHTML的定期指示器。

View Demo 查看演示 Download 下载

XHTML (The XHTML)

<div id="dot-me-1">(Dotter will be here)</div>

Simply create a containing XHTML element that the Dotter instance will live in.

只需创建一个包含Dotter实例将包含的XHTML元素。

CSS (The CSS)

You can style the contianer however you'd like. Dotter could care less about your styling...and that's a good thing.

您可以根据需要设置样式。 Dotter可能不太在乎您的样式……这是一件好事。

MooTools JavaScript (The MooTools JavaScript)

/* dotter */
var Dotter = new Class({
	
	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		delay: 1000,
		dot: '.',
		message: 'Loading',
		numDots: 3,
		property: 'text',
		reset: false/*,
		onDot,
		onStart,
		onStop
		*/
	},
	
	/* initialization */
	initialize: function(container,options) {
		/* set options */
		this.setOptions(options);
		this.container = document.id(container);
		this.dots = 0;
		this.running = false;
	},
	
	/* adds dot */
	dot: function() {
		if(this.running) {
			var text = this.container.get(this.options.property);
			this.dots++;
			this.container.set(this.options.property,(this.dots % this.options.numDots != 0 ? text : this.options.message) + '' + this.options.dot);
		}
		return this;
	},
	
	/* loads or resets the dotter */
	load: function() {
		this.loaded = true;
		this.dots = 0;
		this.dotter = function(){ this.dot(); this.fireEvent('dot'); }.bind(this);
		this.periodical = this.dotter.periodical(this.options.delay);
		this.container.set(this.options.property,this.options.message + '' + this.options.dot);
		return this;
	},
	
	/* start the dotter */
	start: function() {
		if(!this.loaded || this.options.reset) this.load();
		this.running = true;
		this.fireEvent('start');
		return this;
	},
	
	/* stop the dotter */
	stop: function() {
		this.running = this.loaded = false;
		$clear(this.periodical);
		this.fireEvent('stop');
		return this;
	}
});

Options for Dotter include:

Dotter的选项包括：

• delay: (defaults to '1000') The speed at which the dotter show add dots.

  延迟：( 默认为“ 1000”) ，the子显示加点的速度。

• dot: (defaults to '.') The character or string that you want to be the "dot."

  点：( 默认为“。”) 。要作为“点”的字符或字符串。

• message: (defaults to 'Loading') The string that preceeds the dots.

  消息：( 默认为“加载中”)在点之前的字符串。

• numDots: (defaults to 3) The number of dots to go to before clearing.

  numDots ：( 默认为3)清除前要转到的点数。

• property: (defaults to 'text') The container's attribute to set each time. The alternative would "HTML."

  property ：( 默认为'text')每次设置的容器属性。 替代将是“ HTML”。

• reset: (defaults to false) Defines whether to reset the dotter text on restart.

  reset ：( 默认为false)定义是否在重新启动时重设the杂文本。

Events for Dotter include:

Dotter活动包括：

• Dot: Fires on each dot placement.

  点：在每个点位置上触发。

• Start: Fires when the Dotter starts.

  开始： Dotter启动时触发。

• Stops: Fires when the Dotter stops.

  停止：当Dotter停止时触发。

用法 (The Usage)

/* simple instance */
var myDotter = new Dotter('dot-me-1');
document.id('start').addEvent('click',function() { myDotter.start() });
document.id('stop').addEvent('click',function() { myDotter.stop() });

/* advanced usage */
var myDotter3 = new Dotter('dot-me-3',{
	periodical: 500,
	dot: '.',
	numDots: 5,
	onDot:function() {
		this.container.setStyles({
			'border-color': '#ccc',
			'background-color': '#eee'
		});
		var effect = new Fx.Morph(this.container,{
			duration: 400
		});
		effect.start({
			'background-color': '#fffea1',
			'border-color': '#fc0'
		});
	},
	onStart: function() {
		this.container.setStyle('visibility','visible');
	},
	onStop: function() {
		this.container.setStyle('visibility','hidden');
	}
});
document.id('start3').addEvent('click',function() { myDotter3.start() });
document.id('stop3').addEvent('click',function() { myDotter3.stop() });

Per usual, simply set the options and events as you wish and move on with more difficult things! Waiting on an AJAX response (onRequest) is a prefect scenario to use Dotter.

通常，只需根据需要设置选项和事件，然后继续处理更困难的事情！ 等待AJAX​​响应(onRequest)是使用Dotter的完美方案。

View Demo 查看演示 Download 下载

Who needs imagery to build an indicator? Simply use Dotter! Any and all suggestions are welcome.

谁需要影像来建立指标？ 只需使用Dotter！ 任何和所有建议都欢迎。

翻译自: https://davidwalsh.name/mootools-dotter

mootools