mootools_使用MooTools，jQuery或Dojo创建一个Twitter AJAX按钮

Bertha 。 2023-02-22 01:26 10阅读 0赞

mootools

![Twitter Button][]

There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and buzz.  One of the widgets I love is Twitter's "Follow" button.  Let me show you how you can implement this functionality with three popular JavaScript toolkits:  MooTools, jQuery, and Dojo.

没有什么比有效地使用CSS和JavaScript增强用户体验的微妙，光滑的网站窗口小部件更好的了。 当然，像这样的小部件需要花费数小时才能完成，但是很快就能获得高于平均水平的用户保留率和嗡嗡声。 我喜欢的小部件之一是Twitter的“关注”按钮。 让我向您展示如何使用三种流行JavaScript工具包来实现此功能：MooTools，jQuery和Dojo。

*Note:  This tutorial will only display the client side handling of the form submission -- NOT any PHP/MySQL/server-side handling of the request.*

*注意：本教程将仅显示表单提交的客户端处理，而不显示任何PHP / MySQL /服务器端的请求处理。*

[View MooTools Demo][] [查看MooTools演示][View MooTools Demo] [View Dojo Demo][] [查看Dojo演示][View Dojo Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

## HTML结构 **(**The HTML Structure**)** ##

<form class="follow-form" method="post" action="twitter-follow.php">
    	<input type="hidden" name="followID" value="123456" />
    	<button type="submit" value="Actions" class="btn follow" title="123456">
    		<i></i><span>follow</span>
    	</button>
    </form>

The HTML for the button is very simple.  The structure revolves around a BUTTON element which contains an I element and SPAN element.  You're probably thinking "An I element?  WTF."  I know I did.  The truth of the matter is that the I element is deprecated and, as far as I'm concerned, and be used for any purpose the developer would like.  I'm also sure that Twitter doesn't mind saving bytes here or there.

按钮HTML非常简单。 该结构围绕包含I元素和SPAN元素的BUTTON元素旋转。 您可能正在考虑“一个I元素？WTF”。 我知道我做到了 问题的真相是，就我而言，I元素已被弃用，并且可用于开发人员想要的任何目的。 我也确信Twitter不会在这里或那里保存字节。

## CSS样式 **(**The CSS Styles**)** ##

/* twitter button and its children */
    button.btn { 
    	-moz-border-radius:4px;
    	-webkit-border-radius:4px;
    	background-attachment:scroll;
    	background-color:#ddd;
    	background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
    	background-position:0 0;
    	background-repeat:repeat-x;
    	border:1px solid #ddd;
    	border-bottom:1px solid #ccc;
    	color:#333;
    	cursor:pointer;
    	font-family:"Lucida Grande",sans-serif;
    	font-size:11px;
    	line-height:14px;
    	padding:4px 8px 5px 8px;
    	text-shadow:1px 1px 0 #fff;
    	vertical-align:top;
    }
    button.btn:hover {
    	border:1px solid #999;
    	border-bottom-color:#888;
    	color:#000;
    	background-color:#d5d5d5;
    	background-position:0 -6px;
    }
    button.btn:active {
    	background-image:none !important;
    	text-shadow:none !important;
    }
    			
    button.btn i {
    	background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
    	background-position:-176px -32px;
    	background-repeat:no-repeat;
    	display:inline-block;
    	height:13px;
    	margin-right:5px;
    	width:15px;
    }
    button.btn i.active	{ background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
    
    /* properties for the element that is generated *after* following */
    span.following	{  background:#ffd; padding:5px 10px; }
    span.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; }

Most of the styling for this button goes onto the BUTTON element itself.  You'll notice directives to round the button;  leaving the button sharp also please the eye.  Through the regular, hover, and active button states, check out how Twitter users the background position and colors to nicely modify the button without the need for additional images.  You'll also notice Twitter uses sprites...as should you.

此按钮的大多数样式都放在BUTTON元素本身上。 您会注意到指令使按钮变圆； 保持按钮锋利也请注意。 通过常规，悬停和活动按钮状态，查看Twitter用户如何通过背景位置和颜色来很好地修改按钮，而无需其他图像。 您还会注意到Twitter使用了精灵……您也应该如此。

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

/* with mootools */
    window.addEvent('domready',function() {
    	/* fetch elements */
    	$$('form.follow-form').each(function(form) {
    		/* stop form event */
    		form.addEvent('submit',function(e) {
    			/* stop event */
    			if(e) e.stop();
    			/* send ajax request */
    			var i = form.getElement('i');
    			new Request({
    				url: 'twitter-follow.php',
    				method: 'post',
    				data: {
    					followID: form.getElement('input').value
    				},
    				onRequest: function() {
    					i.addClass('active');
    				},
    				onSuccess: function() {
    					var button = form.getElement('button');
    					button.setStyle('display','none');
    					new Element('span',{
    						html: '<span></span>Following!',
    						'class': 'following'
    					}).inject(button,'after');
    				},
    				onComplete: function() {
    					i.removeClass('active');
    				}
    			}).send();
    		});
    	});
    });

The first step is grabbing all of the FORM elements with the follow-form CSS class.  Upon form submission, the default submission action is stopped.  An AJAX request is fired, using the INPUT element's ID as the user to follow.  When the request is fired, the I element's background image is set to the spinner.  When the request is complete, the button is hidden and a new SPAN element is displayed informing the user that they are now following the given user!

第一步是使用follow-form CSS类来获取所有FORM元素。 表单提交后，默认的提交动作将停止。 使用INPUT元素的ID作为要遵循的用户来触发AJAX请求。 激发请求后，I元素的背景图像将设置为微调框。 请求完成后，该按钮将被隐藏，并显示一个新的SPAN元素，通知用户他们正在关注给定用户！

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

// Idiomatic jQuery by Doug Neiner
    jQuery(function ($) {
    	/* fetch elements and stop form event */
    	$("form.follow-form").submit(function (e) {
    		/* stop event */
    		e.preventDefault();
    		/* "on request" */
    		$(this).find('i').addClass('active');
    		/* send ajax request */
    		$.post('twitter-follow.php', {
    			followID: $(this).find('input').val()
    		}, function () {
    			/* find and hide button, create element */
    			$(e.currentTarget)
    			  .find('button').hide()
    			  .after('<span class="following"><span></span>Following!</span>');
    		});
    	});
    });

The code above is based off of the MooTools code.  The workflow is exactly the same.

上面的代码基于MooTools代码。 工作流程完全相同。

## Dojo JavaScript **(**The Dojo JavaScript**)** ##

/* when the DOM is ready */
    dojo.ready(function() {
    	/* fetch elements */
    	dojo.query('form.follow-form').forEach(function(form) {
    		/* stop form event */
    		dojo.connect(form,'onsubmit',function(e) {
    			/* stop event */
    			dojo.stopEvent(e);
    			/* active class */
    			dojo.query('i',form).addClass('active');
    			/* get button */
    			var button = dojo.query('button',form)[0];
    			/* ajax request */
    			dojo.xhrPost({
    				form: form,
    				load: function() {
    					dojo.style(button,'display','none');
    					dojo.create('span',{
    						innerHTML: '<span></span>Following',
    						className: 'following'
    					},button,'after');
    				}
    			});
    		});
    	});
    });

The code above is based off of the MooTools code.  The workflow is exactly the same.

上面的代码基于MooTools代码。 工作流程完全相同。

[View MooTools Demo][] [查看MooTools演示][View MooTools Demo] [View Dojo Demo][] [查看Dojo演示][View Dojo Demo] [View jQuery Demo][] [查看jQuery演示][View jQuery Demo]

This "Follow" button is only one of many details that Twitter has paid attention to, just to make the user experience on the site better.  Take note from the effort put forth by large websites -- adding these types of details to your smaller websites can make the user experience much better for YOUR users!

“关注”按钮只是Twitter所关注的许多细节之一，只是为了使用户在网站上的体验更好。 请注意大型网站所做的努力-将这些类型的详细信息添加到较小的网站可以为您的用户带来更好的用户体验！

> 翻译自: [https://davidwalsh.name/twitter-button][https_davidwalsh.name_twitter-button]

mootools

[Twitter Button]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby90d2l0dGVyLWJ1dHRvbi5qcGc?x-oss-process=image/format,png
[View MooTools Demo]: https://davidwalsh.name/demo/twitter-follow.php
[View Dojo Demo]: https://davidwalsh.name/demo/twitter-follow.php?lib=dojo
[View jQuery Demo]: https://davidwalsh.name/demo/twitter-follow.php?lib=jquery
[https_davidwalsh.name_twitter-button]: https://davidwalsh.name/twitter-button