Vytvořte tlačítko Twitter AJAX pomocí MooTools, jQuery nebo Dojo

Neexistuje nic jako jemný, úhledný webový widget, který efektivně využívá CSS a JavaScript ke zlepšení uživatelského zážitku. Samozřejmě takové widgety potřebují k dokonalosti mnoho hodin, ale netrvá dlouho a toto úsilí bude odměněno nadprůměrným udržením uživatelů a buzz. Jedním z widgetů, které miluji, je tlačítko „Sledovat“ na Twitteru. Dovolte mi, abych vám ukázal, jak můžete tuto funkci implementovat pomocí tří oblíbených sad nástrojů JavaScript: MooTools, jQuery a Dojo.

Poznámka: Tento výukový program zobrazí pouze zpracování odeslání formuláře na straně klienta – NE žádné zpracování požadavku na straně PHP/MySQL/serveru.

Zobrazit MooTools DemoView Dojo DemoView jQuery Demo

Struktura HTML

<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>

HTML pro tlačítko je velmi jednoduché. Struktura se točí kolem prvku BUTTON, který obsahuje prvek I a prvek SPAN. Pravděpodobně si říkáte „Prvek I?  WTF.“ Vím, že ano. Pravdou je, že prvek I je zastaralý, a pokud jde o mě, může být použit pro jakýkoli účel, který by si vývojář přál. Jsem si také jistý, že Twitteru nevadí ušetřit bajty sem nebo tam.

Styly CSS

/* 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; }

Většina stylů tohoto tlačítka se týká samotného prvku BUTTON. Všimnete si příkazů pro zaokrouhlení tlačítka; ponechání tlačítka ostrého také potěší oko. Prostřednictvím běžných stavů, najetí myší a aktivních tlačítek se podívejte, jak uživatelé Twitteru upravují polohu a barvy pozadí, aniž by potřebovali další obrázky. Také si všimnete, že Twitter používá skřítky... jako byste měli.

JavaScript MooTools

/* 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();
		});
	});
});

Prvním krokem je zachycení všech prvků FORM pomocí třídy CSS pro následnou formu. Po odeslání formuláře se výchozí akce odesílání zastaví. Je spuštěn požadavek AJAX s použitím ID prvku INPUT jako uživatele, kterého má následovat. Když je požadavek spuštěn, obrázek pozadí prvku I se nastaví na číselník. Po dokončení požadavku se tlačítko skryje a zobrazí se nový prvek SPAN informující uživatele, že nyní daného uživatele sleduje!

JavaScript jQuery

// 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('&lt;span class="following"&gt;&lt;span&gt;&lt;/span&gt;Following!&lt;/span&gt;');
		});
	});
});

Výše uvedený kód je založen na kódu MooTools. Pracovní postup je úplně stejný.

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');
				}
			});
		});
	});
});

Výše uvedený kód je založen na kódu MooTools. Pracovní postup je úplně stejný.

Zobrazit MooTools DemoView Dojo DemoView jQuery Demo

Toto tlačítko „Sledovat“ je pouze jedním z mnoha detailů, kterým Twitter věnoval pozornost, a to jen proto, aby se uživatelská zkušenost na webu zlepšila. Vezměte na vědomí úsilí vynaložené velkými weby – přidáním těchto typů podrobností na vaše menší weby může být uživatelský dojem pro VAŠE uživatele mnohem lepší!