日期:2014-05-16  浏览次数:20806 次

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;
5  background-attachment:scroll;
6  background-color:#ddd;
7  background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
8  background-position:0 0;
9  background-repeat:repeat-x;
10  border:1px solid #ddd;
11  border-bottom:1px solid #ccc;
12  color:#333;
13  cursor:pointer;
14  font-family:"Lucida Grande",sans-serif;
15  font-size:11px;
16  line-height:14px;
17  padding:4px 8px 5px 8px;
18  text-shadow:1px 1px 0 #fff;
19  vertical-align:top;
20}
21button.btn:hover {
22  border:1px solid #999;
23  border-bottom-color:#888;
24  color:#000;
25  background-color:#d5d5d5;
26  background-position:0 -6px;
27}
28button.btn:active {
29  background-image:none !important;
30  text-shadow:none !important;
31}
32     
33button.btn i {
34  background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
35  background-position:-176px -32px;
36  background-repeat:no-repeat;
37  display:inline-block;
38  height:13px;
39  margin-right:5px;
40  width: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',{