经常在微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',{
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 */
4 dojo.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)[0];
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});