使用Dotter提交表单-CSDN博客

One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following code changes a submit button's text to "Submitting..." (and animated dot patterns) during the submission process, resetting the button text when the AJAX request is complete.

我最引以为豪的插件之一是Dotter。 Dotter允许您创建典型的“正在加载...”文本，而无需使用动画图像。我经常被问到Dotter的示例用法是什么？表格提交创造了完美的情况。以下代码在提交过程中将提交按钮的文本更改为“ Submitting ...”(以及动画的点阵图案)，并在AJAX请求完成后重置按钮文本。

View Demo 查看演示 Get Dotter Get Dotter

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready',function() {
	/* get elements */
	var submit = document.id('submit'), form = document.id('share-comment');
	/* create Dotter instance */
	var dotter = new Dotter(submit,{
		delay: 200, //character delay
		message: 'Submitting',
		property: 'value'
	});
	/* when the form is submitted */
	form.addEvent('submit',function(e) {
		//stop the event
		e.stop();
		//assuming it's a valid post...
		if(validatePost()) {
			//stop / failure action
			var action = function() {
				dotter.stop();
				submit.set('value','Submit');
			};
			//create an AJAX request
			var request = new Request({
				url: form.get('action'),
				method: form.get('method'),
				link: 'ignore',
				//start the Dotter when the request is sent
				onRequest: function() {
					dotter.start();
				},
				//stop it when the AJAX request is successful
				onSuccess: action,
				//stop it when the AJAX request is failure
				onSuccess: action
			}).send(document.id('share-comment').toQueryString());
			//put the form back!
		}
	});
});

When the form is submitted the Dotter instance begins its animation. Once the AJAX request is complete (regardless of success or failure), the Dotter is stopped, changing the button text to its original text.

提交表单后，Dotter实例开始其动画。一旦AJAX请求完成(无论成功或失败)，Dotter都会停止，将按钮文本更改为其原始文本。

View Demo 查看演示 Get Dotter Get Dotter

There you have it: a practical, straight-forward usage of MooTools Dotter. Feel free to download Dotter from the Forge and let me know if you have questions or suggestions!

在那里，您可以轻松，直接地使用MooTools Dotter。随时从Forge下载Dotter，如果您有任何疑问或建议，请告诉我！