"Plus" Twitter style de bouton
Page 1 sur 2
Dans cet article je vais vous expliquer comment recréer l'effet de la "Plus" pour Twitter en utilisant la bibliothèque jQuery.
Le bouton que nous voulons recréer, pour les non initiés, vous permet d'étendre la liste des messages affichés par défaut sans avoir besoin de rafraîchir la page (ce qui est possible grâce à la technologie Ajax en plus utilisé dans les environnements du Web 2.0).
Nous commençons par créer une base de données de test se compose d'un seul tableau:
CREATE TABLE messages ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Texte du message );Comme vous pouvez voir le tableau que vous venez de construire est composé de seulement deux champs:
- msg_id qui permettra d'identifier le message;
- et le message qui contient le texte;
Pour ma convenance, j'ai créé un fichier php (que je vais utiliser dans la prise en compte) dans lequel je fais seulement la connexion à la base et je l'ai appelé "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "username" "password") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Comme il est mentionné le fichier "dbconfig.php" sera inclus dans les fichiers que nous créons, pour ne pas réécrire le même code plusieurs fois.
Pour effectuer l'effet que vous devez créer deux fichiers:
- le premier utilisé pour l'affichage de la première "n" des messages;
- et un second qui sera faite des requêtes AJAX (mis en œuvre avec jQuery) pour afficher le "message suivant".
<html>
<head>
Plus <title> Bouton Twitter style </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Plus »). Cliquez sur (function () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton') HTML ("<img src="loading.gif" />. ');
$. Ajax ({
Type: 'POST',
url: «more_ajax.php»,
Date: 'dernierMsg =' + msg,
cache: false,
succès: la fonction (html) {
$ ('# Morebutton') Remove ().;
$ ('# More_updates') Append (html).;
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
include ('dbconfig.php');
$ Sql_check = mysql_query ("SELECT * FROM commande par plusieurs DESC LIMIT msg_id 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
Msg_id = $ row ['msg_id'];
$ Msg = $ row ['message'];
?>
<Div id = "<php echo $ msg_id;?>" Class = "boxMsg">
<span style="padding:5px;"> <php echo $ msg;?> </ span>
</ Div>
<? Php
}
?>
<div id="more_updates"> </ div>
<div id="morebutton"> <a id = "<php echo $ msg_id;?>" class = "plus" href = "#"> Plus </ a> </ div>
</ Div>
</ Body>
</ Html>
Comme vous pouvez le voir après avoir visionné les deux premiers postes (triés par "msg_id" dans l'ordre décroissant), il ya une div vide avec id "more_update" (il y aura «emballé» le message suivant) et un div qui représente la prochaine lien "Plus" à laquelle nous associons - une méthode d'utilisation de jQuery - les messages de demande d'action.
Header (<head> ...</ head>) du document, après l'appel à la bibliothèque jQuery, nous avons décrit la fonction javascript associé avec le lien "Plus" (cette fonction est appelée avec le ' événement click ).
Avec cette fonction prise de la "id" de l'identifiant de connexion ("msg_id") affiche le message précédent, cet identifiant est envoyé au second fichier php comme un paramètre après la requête Ajax , en attendant, de remplacer le contenu du conteneur div lien "Plus" avec une belle gif animé avec effet «chargement» , juste pour tuer le temps.
Si la requête Ajax a été un succès (succès de la propriété d'application), nous enlever tous les div "morebutton» et insérer la réponse HTML (contenant des messages d'autres) dans le div conteneur "more_update" en utilisant les annexer .
 |
ASP Zéro (ebook)
Apprendre Microsoft ASP et VBScript à partir de zéro. À seulement 29 €. |
 |
Javascript (Cours)
Guide complet pour les scripts côté client. A partir de 39 €. |
 |
PHP (cours)
Cours complet pour la création de sites Web dynamiques. A partir de 49 €. |