mootools

参考文档链接

1. Native/Element.js#$
2. Effects/Fx-Style.js#Fx.Style
3. Effects/Fx-Style.js#Fx.Style.start
4. Element/Element-Event.js#Element.addEvent
5. Element/Element-Form.js#Element.getValue
6. Remote/Ajax.js#Element.send
7. Native/Element.js#Element.setProperty

var url = '/mootools_demo/Ajax.Advanced/ajax.php';
 
 
var fn = function() {
	var box = $(this.options.update).getParent();
	var fx = new Fx.Style(box, 'background-color', {
		duration: 800,
		transition: Fx.Transitions.Quad.easeOut
	}).start('#fb9393', '#f8f8f8');
}
 
 
$('Request').addEvent('click', function() {
	var options = {}
	$('myForm').getFormElements().each(function(el){
		var name = el.name;
		var value = el.getValue();
 
		if (name == 'onComplete') {
			if (value) options['onComplete'] = fn;
			return;
		}
		if (value === false || !name || el.disabled) options[value] = false;
		else if (name == 'update') options[name] = 'log_res_' + value;
		else options[value] = true;
	});
	$('myForm').send(options);
});
 
 
// Reset function for when refreshing the page
var resetBar = function() {
	$('update').options[0].selected = true;
	$$('input[type="checkbox"]').each(function(checkbox) {
		if (checkbox.id == 'data') checkbox.setProperty('checked', true);
		else checkbox.setProperty('checked', false);
	});
}
resetBar();

<div id="ajax_bar">
	<form id="myForm" action="Ajax.Advanced/ajax.php" method="post" name="myForm">
		<label>update
		<select id="update" name="update">
			<option value="first">first div</option>
			<option value="second">second div</option>
		</select></label>
 
		<span class="border">&nbsp;</span>
 
		<label>evalScripts <input type="checkbox" id="evalScripts" value="evalScripts" name="evalScripts" /></label>
 
		<span class="border">&nbsp;</span>
 
		<label>evalResponse <input type="checkbox" id="evalResponse" value="evalResponse" name="evalResponse" /></label>
 
		<span class="border">&nbsp;</span>
 
		<label>onComplete <input type="checkbox" id="onComplete" value="onComplete" name="onComplete" /></label>
 
		<span class="border">&nbsp;</span>
 
		<input id="Request" class="right" type="button" value="Request" name="Request"/>
		 <span class="right"> (<a href="demos/Ajax.Advanced/ajax.phps">See ajax.phps</a>)</span>
		<span id="clr"><!-- spacer --></span>
	</form>
</div>
 
<div id="update_first">
	<h3>First div Update</h3>
	<div id="log_res_first">  </div>
</div>
<div id="update_second">
	<h3>Second div Update</h3>
	<div id="log_res_second">  </div>
</div>

#ajax_bar {
	background-color: #e4ecf2;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	margin-top: 0pt auto;
	height: 20px;
	padding: 3px 5px;
	vertical-align: center;
}
 
.border {
	float: left;
	border-right: 2px solid #bbcfdd;
	width: 1px;
	margin: 0pt 6px;
	padding: 0pt 0pt 1px;
}
 
label, input, select {
	font-size: 85%;
	line-height: 1.25em;
	vertical-align: middle;
}
 
input, select { margin-left: 4px; }
label { float: left; }
 
.right  { float: right; font-size: 85%; }
 
#update_first, #update_second {
	float: left;
	width: 385px;
	height: 200px;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	padding: 0.3em;
	margin-top: 10px;
	margin-left: 10px;
}
 
#update_first { background: #f8f8f8; }
#update_second { background: #f4f4f4; }
 
.highlight {
	background-color: #E0ECEF;
}