Form Element AJAX Spinner Attachment Using jQuery

昨天,我向各位展示了如何使用我爱戴的MooTools,在形式要素旁边打AJAX的pin。 今天 我向大家展示了如何利用 j执行这一功能。

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" />

“轴心”班子将成为我们的目标。

The jQuery JavaScript

$(document).ready(function() {
	//create image
	$( <img src="move-spinner.gif" id="spinner" /> ).css( position , absolute ).hide().appendTo( body );
	//for every field change
	$( .ajax ).change(function() {
		//get element position
		var position = $(this).offset();
		//position image
		$( #spinner ).css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
		//ajax
		$.post( <?php echo $_SERVER[ REQUEST_URI ]; ?> ,{
			ajax:1,
			value: $(this).val()
		},function() {
			$( #spinner ).fadeOut();
		});
	});
});

我们向网页注入了微薄的形象,并根据哪个领域提出请求重新定位。 非常简单!

View Demo

Java是否Script? Oh 是的,也使用户的体验更加好。