Erstellen Sie ein Twitter-ähnliches Widget "Mehr laden"

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Sowohl Twitter als auch der Apple App Store verwenden eine brillante Technik zum Laden weiterer Informationen. Wenn Sie auf den Link klicken, erscheinen neue Elemente auf dem Bildschirm. In diesem Tutorial lernen Sie, wie Sie AJAX, CSS, Javascript, JSON, PHP und HTML verwenden, um diese Magie zu erzeugen. Dieses Tutorial enthält auch die jQuery- und MooTools-Versionen des Skripts.

Annahmen

Es gibt einige Annahmen und Anmerkungen, die wir in dieses System einführen:

Der Server muss PHP5 ausführen, damit wir die JSON-Funktionen von PHP5 verwenden können.
Wir werden Datenbankeinträge aus einer WordPress-MySQL-Tabelle "posten". Der Vorteil des bereitgestellten Codes besteht darin, dass Sie ihn mit jedem Datenbanksystem verwenden können. Sie müssen lediglich die MySQL-Abfrage und die von jQuery oder MooTools verwendeten JSON-Eigenschaften ändern.
Der Client muss Javascript unterstützen.
Wir verwenden Moo-Werkzeuge (MooTools) 1.2.3 Core and More 1.2.3.1. Wenn jQuery das bevorzugte Framework ist, jQuery 1.3.2 und das ScrollTo-Plugin von Ariel Flesler.

Dieses Tutorial enthält eine Erläuterung des MooTools-Javascript. Während jQuery
Die Syntax unterscheidet sich von Moo-Werkzeuge, die Schönheit moderner JavaScript-Frameworks ist das
Sie unterscheiden sich hauptsächlich in der Syntax, nicht in der Logik. Das jQuery-Javascript wird unten bereitgestellt.

Die Handlung

Hier ist die Reihenfolge der Ereignisse, die in unserem Slick-Widget stattfinden werden:

Die Seite wird normalerweise mit einer anfänglichen Anzahl an Beiträgen geladen
Der Benutzer klickt auf das Element "Mehr laden" am unteren Rand der Liste
Eine AJAX/JSON-Anfrage wird ausgelöst und eine bestimmte Anzahl neuer Posts abgerufen
Unser jQuery/MooTools-Javascript empfängt das Ergebnis und erstellt eine Reihe neuer HTML-Elemente, die die JSON-Informationen enthalten
Jedes Element wird in das Containerelement des Widgets verschoben
Nachdem alle Elemente in die Seite geladen wurden, blättert das Fenster zum ersten neuen Element
Spülen und wiederholen.

Erster Schritt: Das PHP/MySQL

Der erste Schritt besteht darin zu entscheiden, wie viele Posts während des ersten Seitenladens geladen werden müssen. Da unser Widget sich daran erinnert, wie viele Posts während des letzten Ladens geladen wurden (falls ein Benutzer eine andere Seite besucht und zurückkommt), müssen wir die Sitzung verwenden.

1	/* settings */
2	session_start();
3	$number_of_posts = 5; //5 posts will load at a time
4	$_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts; //where we should start

Das obige Code-Snippet enthält alle Inhalte, die wir benötigen. Als Nächstes müssen wir eine PHP-Funktion erstellen, die eine Verbindung zu unserer Datenbank herstellt, weitere Datensätze abruft und deren Inhalt im JSON-Format zurückgibt:

	/* grab stuff */
	function get_posts($start = 0, $number_of_posts = 5) {
		/* connect to and select the db */
		$connection = mysql_connect('localhost','username','password'); //hostname, username, password
		mysql_select_db('davidwalsh83_blog',$connection);
		/* create the posts array */
		$posts = array();
		/* get the posts */
		$query = "SELECT post_title, post_content, post_name, ID FROM wp_posts WHERE post_status = 'publish' ORDER BY post_date DESC LIMIT $start,$number_of_posts";
		$result = mysql_query($query);
		/* for every post... */
		while($row = mysql_fetch_assoc($result)) {
			/* set the post content equal to the first paragraph...a "preview" regular expression */
			preg_match("/<p>(.*)<\/p>/",$row['post_content'],$matches);
			$row['post_content'] = strip_tags($matches[1]);
			/* add this record to the posts array */
			$posts[] = $row;
		}
		/* return the posts in the JSON format */
		return json_encode($posts);
	}

Das obige PHP enthält einen sehr einfachen regulären Ausdruck, der den ersten Absatz des Inhalts meines Beitrags erfasst. Da der erste Absatz der meisten Blogbeiträge als Einführung in den Rest des Inhalts dient, können wir davon ausgehen, dass Absatz eine schöne Vorschau auf den Beitrag darstellt.

Sobald die obige Funktion fertig ist, müssen wir unseren AJAX-Anforderungslistener erstellen. Wir werden wissen, dass jemand eine AJAX-Anfrage gesendet hat, wenn die Variable $_GET['start'] in der Anfrage-URL festgelegt ist.
Wenn eine Anfrage erkannt wird, greifen wir über unsere get_posts()- Funktion weitere 5 Posts auf und geben deren JSON aus. Sobald wir die neuen Beiträge im JSON-Format ausgegeben haben, speichern wir die Anzahl der vom Benutzer angeforderten Elemente und beenden das Skript (sehen Sie unten).

/* loading of stuff */
if(isset($_GET['start'])) {
	/* spit out the posts within the desired range */
	echo get_posts($_GET['start'],$_GET['desiredPosts']);
	/* save the user's "spot", so to speak */
	$_SESSION['posts_start']+= $_GET['desiredPosts'];
	/* kill the page */
	die();
}

Damit ist der serverseitige Code für unser Widget abgeschlossen. Einfach, nein?

Schritt 2: Das HTML

Anfangs gibt es nicht viel HTML-Code für dieses Widget. Wir erstellen einen Haupt-Widget-Container. Im Widget-Container befindet sich ein Posts-Wrapper und unser Element "Mehr laden", das als virtueller Server dienen soll, um das Laden weiterer Inhalte auszulösen.

<!-- Widget HTML Starts Here -->
<div id="posts-container">
	<!-- Posts go inside this DIV -->
	<div id="posts"></div>
	<!-- Load More "Link" -->
	<div id="load-more">Load More</div>
</div>
<!-- Widget HTML Ends Here -->

Obwohl wir noch keine einzelnen Post-Elemente einfügen, ist es wichtig, die HTML-Struktur von Post-DIV-Elementen zu kennen, die in den Posts-Wrapper eingefügt werden:

<div class="post">
	<a href="{postURL}" class="post-title">{post_title}</a>
	<p class="post-content">
		{post_content}
		<br />
		<a href="{postURL}" class="post-more">Read more...</a>
	</p>
</div>

Schritt 3: Das CSS

Zeit, um unserem Widget Flare hinzuzufügen. Sie können die Elemente des Widgets beliebig formatieren. Ich habe mich dazu entschlossen, meine Karikatur auf der linken Seite und den Titel, den Inhalt und den Link auf der rechten Seite hinzuzufügen. Wir müssen CSS für die statischen HTML-Elemente und die von Javascript generierten Elemente hinzufügen (sehen Sie unten).

#posts-container			{ width:400px; border:1px solid #ccc; -webkit-border-radius:10px; -moz-border-radius:10px; }
.post						{ padding:5px 10px 5px 100px; min-height:65px; border-bottom:1px solid #ccc; background:url(dwloadmore.png) 5px 5px no-repeat; cursor:pointer;  }
.post:hover					{ background-color:lightblue; }
a.post-title 				{ font-weight:bold; font-size:12px; text-decoration:none; }
a.post-title:hover			{ text-decoration:underline; color:#900; }
a.post-more					{ color:#900; }
p.post-content				{ font-size:10px; line-height:17px; padding-bottom:0; }
#load-more					{ background-color:#eee; color:#999; font-weight:bold; text-align:center; padding:10px 0; cursor:pointer; }
#load-more:hover			{ color:#666; }

Eine zusätzliche CSS-Klasse, die wir erstellen, wird als "Aktivieren" bezeichnet. Diese wird bei jedem Start einer AJAX-Anfrage angezeigt und ausgeblendet, wenn die Anfrage abgeschlossen ist.

1	.activate { background:url(/dw-content/loadmorespinner.gif) 140px 9px no-repeat #eee; }

Schritt 4: Das MooTools-Javascript

Unser MooTools-Javascript macht die Magie möglich. Wir verwenden ein Schließmuster, um den MooTools-Code als bewährte Methode zu enthalten:

//safety closure
(function($) {
	//when the DOM is ready...
	window.addEvent('domready,function() {
		
		/* ALL JAVASCRIPT WILL BE IN HERE */
		
	});
})(document.id);

Sobald das DOM fertig ist, stellen wir die anfänglichen Javascript-Einstellungen bereit. Beachten Sie, dass eine dieser Einstellungen, initialPosts, die JSON für den ersten Stapel von Posts enthält, der beim Laden der Seite angezeigt werden soll. Wir definieren auch Variablen für die Anzahl der ursprünglich geladenen Beiträge und die Anzahl der Beiträge, die bei jeder AJAX-Anforderung abgerufen werden sollen.

//settings on top
var domain = 'http://davidwalsh.name/'; //your domain or directory path goes here
var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
var start = <php echo $_SESSION['posts_start']; ?>;
var desiredPosts = <?php echo $number_of_posts; ?>;

Sobald unsere Einstellungen festgelegt sind, definieren wir eine Funktion, um den JSON zu verarbeiten, den wir beim Laden der Seite erhalten, sowie über zukünftige AJAX-Anforderungen. Für jeden Beitrag in der JSON wir...

eine Post-URL-Variable erstellen, die wir später in der Schleife verwenden werden
ein DIV-Element "post" erstellen, das den Beitragstitel, den Inhalt und den Link (im oben gezeigten Format) enthält.
das neu erstellte "post" -Element in den Posts-Wrapper einfügen
ein Fx.Slide-Objekt für das neue "post" -Element erstellen, damit wir das Element sofort ausblenden können und es dann in die Ansicht schieben können
das Fenster nach unten zum ersten neu eingefügten Beitrag scrollen

Hier ist der MooTools-Javascript-Code, der es erledigt.

//function that creates the posts
var postHandler = function(postsJSON) {
	postsJSON.each(function(post,i) {
		//post url
		var postURL = '' + domain + post.post_name;
		//create the HTML "post" element
		var postDiv = new Element('div',{
			'class': 'post',
			events: {
				//click event that makes the entire DIV clickable
				click: function() {
					window.location = postURL;
				}
			},
			id: 'post-' + post.ID,
			html: '<a href="' + postURL + '" class="post-title">' + post.post_title + '</a><p class="post-content">' + post.post_content + '<br /><a href="' + postURL + '" class="post-more">Read more...</a></p>'
		});
		//inject into the container
		postDiv.inject($('posts'));
		//create the Fx Slider
		var fx = new Fx.Slide(postDiv).hide().slideIn();
		//scroll to first NEW item
		if(i == 0) {
			var scroll = function() {
				new Fx.Scroll(window).toElement($('post-' + post.ID));
			};
			scroll.delay(300); //give time so scrolling can happen
		}
	});
};

Jetzt, da unsere postHandler-Funktion definiert ist, ist es Zeit, die anfängliche JSON-Zeichenfolge der Elemente zu behandeln.

1	//place the initial posts in the page
2	postHandler(initialPosts);

Als Nächstes erstellen wir einige weitere Variablen, um den Wert unserer AJAX-Anfrage zu speichern und die Werte des Startwerts der PHP-Sitzung, die Anzahl der zu packenden Posts und das Element "Mehr laden" zu speichern.

1	var start = <?php echo $_SESSION['posts_start']; ?>;
2	var desiredPosts = <?php echo $number_of_posts; ?>;
3	var loadMore = $('load-more');

Um die Speichernutzung zu reduzieren, erstellen wir unser Request.JSON-Objekt außerhalb des Click-Ereignisses, das in Kürze hinzugefügt wird. Das Request.JSON-Objekt sieht zwar lang aus, ist aber sehr einfach. Brechen sie ab...

Das Anforderungsobjekt erstellen wir mit Grundeinstellungen ...

	var request = new Request.JSON({
		url: 'load-more.php', //ajax script -- same script
		method: 'get',
		link: 'cancel',
		noCache: true,
		//more settings coming...

Fügen Sie einen onRequest-Parameter hinzu, der unsere CSS-Klasse "aktivieren" zum anklickbaren Element "Mehr laden" hinzufügt, und ändern Sie den Text des Elements "Mehr laden" in "Laden..." ....

1	onRequest: function() {
2	//add the activate class and change the message
3	loadMore.addClass('activate').set('text','Loading...');
4	},

Fügen Sie einen onSuccess -Parameter hinzu, der den Elementtext "Mehr laden" zurücksetzt, den aktuellen Startpunkt zum Erfassen zukünftiger Elemente verfolgt und die JSON-Antwort genauso behandelt wie wir es mit den ersten Posts getan haben ...

onSuccess: function(responseJSON) {
	//reset the message
	loadMore.set('text','Load More');
	//increment the current status
	start += desiredPosts;
	//add in the new posts
	postHandler(responseJSON);
},

Fügen Sie eine onFailure-Funktion hinzu, um den Text "Mehr laden" bei einem Fehler zu aktualisieren ...

1	onFailure: function() {
2	//reset the message
3	loadMore.set('text','Oops! Try Again.');
4	},

Fügen Sie schließlich eine onComplete-Funktion hinzu, die den Spinner entfernt, sobald die Anforderung abgeschlossen ist, unabhängig von Erfolg oder Misserfolg.

1	onComplete: function() {
2	//remove the spinner
3	loadMore.removeClass('activate');
4	}

Der letzte Schritt ist das Hinzufügen des Klickereignisses zum Element "Mehr laden". Nach einem Klick stellen wir die AJAX-Anfrage und alle oben genannten Arbeiten werden ausgelöst. Erfolg!

//add the "Load More" click event
loadMore.addEvent('click',function(){
	//begin the ajax attempt
	request.send({
		data: {
			'start': start,
			'desiredPosts': desiredPosts
		},
	});
});

Moo-Werkzeuge Vollständiger Code (MooTools Complete Code)

	//safety closure
	(function($) {
		//domready event
		window.addEvent('domready',function() {
			//settings on top
			var domain = 'http://davidwalsh.name/';
			var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']);  ?>;

			//function that creates the posts
			var postHandler = function(postsJSON) {
				postsJSON.each(function(post,i) {
					//post url
					var postURL = '' + domain + post.post_name;
					//create the HTML
					var postDiv = new Element('div',{
						'class': 'post',
						events: {
							click: function() {
								window.location = postURL;
							}
						},
						id: 'post-' + post.ID,
						html: '<a href="' + postURL + '" class="post-title">' + post.post_title + '</a><p class="post-content">' + post.post_content + '<br /><a href="' + postURL + '" class="post-more">Read more...</a></p>'
					});
					//inject into the container
					postDiv.inject($('posts'));
					//create the Fx Slider
					var fx = new Fx.Slide(postDiv).hide().slideIn();
					//scroll to first NEW item
					if(i == 0) {
						var scroll = function() {
							new Fx.Scroll(window).toElement($('post-' + post.ID));
						};
						scroll.delay(300); //give time so scrolling can happen
					}
				});
			};

			//place the initial posts in the page
			postHandler(initialPosts);

			//a few more variables
			var start = <?php echo $_SESSION['posts_start']; ?>;
			var desiredPosts = <?php echo $number_of_posts; ?>;
			var loadMore = $('load-more');
			var request = new Request.JSON({
				url: 'load-more.php', //ajax script -- same page
				method: 'get',
				link: 'cancel',
				noCache: true,
				onRequest: function() {
					//add the activate class and change the message
					loadMore.addClass('activate').set('text','Loading...');
				},
				onSuccess: function(responseJSON) {
					//reset the message
					loadMore.set('text','Load More');
					//increment the current status
					start += desiredPosts;
					//add in the new posts
					postHandler(responseJSON);
				},
				onFailure: function() {
					//reset the message
					loadMore.set('text','Oops! Try Again.');
				},
				onComplete: function() {
					//remove the spinner
					loadMore.removeClass('activate');
				}
			});
			//add the "Load More" click event
			loadMore.addEvent('click',function(){
				//begin the ajax attempt
				request.send({
					data: {
						'start': start,
						'desiredPosts': desiredPosts
					},
				});
			});
		});
	})(document.id);

jQuery-Version

Wenn Sie das Javascript-Framework von jQuery bevorzugen, ist dies Ihr Glückstag. Hier ist die jQuery-Version:

	//when the DOM is ready
	$(document).ready(function(){
		//settings on top
		var domain = 'http://davidwalsh.name/';
		var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
		//function that creates posts
		var postHandler = function(postsJSON) {
			$.each(postsJSON,function(i,post) {
				//post url
				var postURL = '' + domain + post.post_name;
				var id = 'post-' + post.ID;
				//create the HTML
				$('<div></div>')
				.addClass('post')
				.attr('id',id)
				//generate the HTML
				.html('<a href="' + postURL + '" class="post-title">' + post.post_title + '</a><p class="post-content">' + post.post_content + '<br /><a href="' + postURL + '" class="post-more">Read more...</a></p>')
				.click(function() {
					window.location = postURL;
				})
				//inject into the container
				.appendTo($('#posts'))
				.hide()
				.slideDown(250,function() {
					if(i == 0) {
						$.scrollTo($('div#' + id));
					}
				});
			});	
		};
		//place the initial posts in the page
		postHandler(initialPosts);
		//first, take care of the "load more"
		//when someone clicks on the "load more" DIV
		var start = <?php echo $_SESSION['posts_start']; ?>;
		var desiredPosts = <?php echo $number_of_posts; ?>;
		var loadMore = $('#load-more');
		//load event / ajax
		loadMore.click(function(){
			//add the activate class and change the message
			loadMore.addClass('activate').text('Loading...');
			//begin the ajax attempt
			$.ajax({
				url: 'load-more.php',
				data: {
					'start': start,
					'desiredPosts': desiredPosts
				},
				type: 'get',
				dataType: 'json',
				cache: false,
				success: function(responseJSON) {
					//reset the message
					loadMore.text('Load More');
					//increment the current status
					start += desiredPosts;
					//add in the new posts
					postHandler(responseJSON);
				},
				//failure class
				error: function() {
					//reset the message
					loadMore.text('Oops! Try Again.');
				},
				//complete event
				complete: function() {
					//remove the spinner
					loadMore.removeClass('activate');
				}
			});
		});
	});

Die Moo-Werkzeuge- und jQuery-Versionen weisen dieselbe Logik mit unterschiedlicher Syntax auf!

Mission erfüllt!

Durch die Implementierung dieses Widgets auf Ihrer Website können Sie Ihrer Website mehr Dynamik und Kreativität verleihen. Ich freue mich auf dein Widget! Haben Sie Fragen zur Verbesserung? Posten Sie sie unten!

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.