mootools 元素追加_使用MooTools的表单元素AJAX微调器附件

mootools 元素追加

Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We're going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.

很多时候，您会看到表单根据表单字段的值动态更改可用值。 例如，“州”字段将根据用户选择的国家/地区而变化。 这些表格让我很烦恼的是，它们经常会发出AJAX请求以获取状态，但不会向用户显示任何指示，说明正在发生某种情况。 我们将使用MooTools在执行此类AJAX请求的表单字段旁边添加AJAX微调器图像。

View Demo 观看演示

XHTML (The XHTML)

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Add the "ajax" class (or any class for that matter) to the elements you'd like the spinner to display by.

将“ ajax”类(或与此相关的任何类)添加到您希望微调器显示的元素。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {
	//inject image
	var spinner = new Element('img',{
		src: 'move-spinner.gif',
		styles: {
			position:'absolute'
		},
		opacity: 0
	}).inject(document.body);
	//form element events
	$$('.ajax').each(function(el) {
		//get coordinates
		var coords = el.getCoordinates(document.body);
		//ajax request object
		var request = new Request({
			url: '
   
   ',
			method: 'post',
			onRequest: function() {
				spinner.setStyles({
					left: coords.right + 10,
					top: coords.top + 5
				}).fade('in');
			},
			onComplete: function() {
				spinner.fade('out');
			}
		});
		//change event
		el.addEvent('change',function() {
			//ajax request
			request.send({
				data: {
					ajax: 1,
					value: el.get('value')
				}
			});
		});
	});
});

We first add the spinner image to the document but hide it right away. When any of the form elements with the "ajax" class changes value, we move the spinner image to the right of the element. Then we use Reqeust's onRequest and onComplete methods to show and hide the spinner. Simple!

我们首先将微调器图像添加到文档中，但立即将其隐藏。 当带有“ ajax”类的任何表单元素的值更改时，我们会将微调器图像移到该元素的右侧。 然后，我们使用Reqeust的onRequest和onComplete方法显示和隐藏微调器。 简单！

View Demo 观看演示

Look forward to a jQuery version tomorrow.

期待明天的jQuery版本。

翻译自: https://davidwalsh.name/ajax-spinner

mootools 元素追加