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',{