In - Hộp thoại thông báo bằng AJAX với MooTools - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Framework » MooTools » Hộp thoại thông báo bằng AJAX với MooTools
URL: https://www.javascriptbank.com/nice-ajax-messages-box-using-mootools.html

Một đoạn mã JavaScript rất đơn giản nhưng lại tao được một hiệu ứng hộp thoại thông báo bằng AJAX khá tuyệt bởi sự hỗ trợ cực kì mạnh mẽ của thư viện MooTools. Trong ví dụ mẫu JavaScript này, mỗi khi người dùng nhấn nút "Save", hiệu ứng sẽ hiển thị một khung hộp thoại thông báo thao tác thực hiện.Mã nguồn JavaScript cũng như tài liệu hướng dẫn kĩ thuật được đính kèm đầy đủ bên trong, bạn vui lòng vào trang chi tiết để xem thêm, hoặc dùng thử các hiệu ứng JavaScript với MooTools bên dưới: - Vài website siêu tuyệt đẹp dùng MooTools - Trình đơn định hướng kiểu Carousel dùng Mootools

CSS

<style type="text/css">body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}#box {margin-bottom:10px;width: auto;padding:4px;border:solid 1px #DEDEDE;background: #FFFFCC;display:none;}</style>

JavaScript

<script type="text/javascript" src="mootools.js"></script><script type="text/javascript">// Created by Antonio Lupetti | http://woork.blogspot.com// This script downloaded from www.JavaScriptBank.comwindow.addEvent('domready', function(){var box = $('box');var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});$('save_button').addEvent('click', function() {box.style.display="block";box.setHTML('Save in progress...');/* AJAX Request here... */fx.start({}).chain(function() {box.setHTML('Saved!');this.start.delay(1000, this, {'opacity': 0});}).chain(function() {box.style.display="none";this.start.delay(0001, this, {'opacity': 1});});});}); </script>

HTML

Press &quot;Save&quot;</p><div id="box"></div><input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>

Files

/javascript/mootools.js