dojo,jquery,mootools三种框架实现的ajax效果
经常在微BLOG上,或者象tudou,ku6等视频网站上，看到"查看评论"的按钮,点后就显示列表，是AJAX效果的,找到老外的一篇文,讲这个实现:
http://davidwalsh.name/twitter-button
摘录如下:
先做好按钮
<FORM class=follow-form action=twitter-follow.php method=post>
<INPUT type=hidden value=123456 name=followID>
<BUTTON class="btn follow" title=123456 type=submit value="Actions">
<I></I><SPAN>follow</SPAN>
</BUTTON>
</FORM>
之后是样式
/* twitter button and its children */
2button.btn {
3-moz-border-radius:4px;
4-webkit-border-radius:4px;
5background-attachment:scroll;
6background-color:#ddd;
7background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
8background-position:0 0;
9background-repeat:repeat-x;
10border:1px solid #ddd;
11border-bottom:1px solid #ccc;
12color:#333;
13cursor:pointer;
14font-family:"Lucida Grande",sans-serif;
15font-size:11px;
16line-height:14px;
17padding:4px 8px 5px 8px;
18text-shadow:1px 1px 0 #fff;
19vertical-align:top;
20}
21button.btn:hover {
22border:1px solid #999;
23border-bottom-color:#888;
24color:#000;
25background-color:#d5d5d5;
26background-position:0 -6px;
27}
28button.btn:active {
29background-image:none !important;
30text-shadow:none !important;
31}
32
33button.btn i {
34background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
35background-position:-176px -32px;
36background-repeat:no-repeat;
37display:inline-block;
38height:13px;
39margin-right:5px;
40width:15px;
41}
42button.btn i.active{ background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
43
44/* properties for the element that is generated *after* following */
45span.following{background:#ffd; padding:5px 10px; }
46span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }
首先是mootools:
* with mootools */
2window.addEvent('domready',function() {
3/* fetch elements */
4$$('form.follow-form').each(function(form) {
5 /* stop form event */
6 form.addEvent('submit',function(e) {
7 /* stop event */
8 if(e) e.stop();
9 /* send ajax request */
10 var i = form.getElement('i');
11 new Request({
12 url: 'twitter-follow.php',
13 method: 'post',
14 data: {
15 followID: form.getElement('input').value
16 },
17 onRequest: function() {
18 i.addClass('active');
19 },
20 onSuccess: function() {
21 var button = form.getElement('button');
22 button.setStyle('display','none');
23 new Element('span',{
24 html: '<SPAN></SPAN>Following!',
25 'class': 'following'
26 }).inject(button,'after');
27 },
28 onComplete: function() {
29 i.removeClass('active');
30 }
31 }).send();
32 });
33});
34});
jquery的:
// Idiomatic jQuery by Doug Neiner
2jQuery(function ($) {
3/* fetch elements and stop form event */
4$("form.follow-form").submit(function (e) {
5 /* stop event */
6 e.preventDefault();
7 /* "on request" */
8 $(this).find('i').addClass('active');
9 /* send ajax request */
10 $.post('twitter-follow.php', {
11 followID: $(this).find('input').val()
12 }, function () {
13 /* find and hide button, create element */
14 $(e.currentTarget)
15 .find('button').hide()
16 .after('<span class="following"><span></span>Following!</span>');
17 });
18});
19});
dojo:
/* when the DOM is ready */
2dojo.ready(function() {
3/* fetch elements */
4dojo.query('form.follow-form').forEach(function(form) {
5 /* stop form event */
6 dojo.connect(form,'onsubmit',function(e) {
7 /* stop event */
8 dojo.stopEvent(e);
9 /* active class */
10 dojo.query('i',form).addClass('active');
11 /* get button */
12 var button = dojo.query('button',form);
13 /* ajax request */
14 dojo.xhrPost({
15 form: form,
16 load: function() {
17 dojo.style(button,'display','none');
18 dojo.create('span',{
19 innerHTML: '<SPAN></SPAN>Following',
20 className: 'following'
21 },button,'after');
22 }
23 });
24 });
25});
26});
页:
[1]