Botó de "més" Twitter estil
Pàgina 1 de 2
En aquest article vaig a explicar com tornar a crear l'efecte de botó "Més" a Twitter usant la llibreria jQuery.
El botó que voleu tornar a crear, per als no iniciats, li permet ampliar la llista de missatges apareix per defecte sense necessitat d'actualitzar la pàgina (la qual cosa és possible gràcies a la tecnologia Ajax utilitzen cada vegada més en les àrees de la Web 2.0).
Comencem per crear una base de dades de prova consta d'una sola taula:
Creu missatges de TAULA ( msg_id INT AUTO_INCREMENT PRIMARY KEY, Missatge de text );Com es pot veure a la taula que acaba de construir es compon de només dos camps:
- msg_id a identificar-se amb el missatge;
- i el missatge que conté el text;
Per la meva comoditat he creat un arxiu PHP (que vaig a utilitzar en la inclusió) en què puc fer només la connexió a la base de dades i li vaig trucar "dbconfig.php"
<Php
$ Conn = mysql_connect ("host", "usuari", "contrasenya") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ connexió) or die (mysql_error ());
>
Com ja he dit en l'arxiu "dbconfig.php" s'inclouran en els arxius que creem, per no tornar a escriure el mateix codi diverses vegades.
Per dur a terme l'efecte és necessari crear dos arxius:
- els primers per a la presentació de la primera "n" missatges;
- i una segona que es posarà a peticions ajax (implementat amb jQuery) per mostrar el "pròxim missatge".
<html>
<head>
Botó de Twitter més <title> estil </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Més "). Feu clic a (function () {
var element = $ (this);
element.attr var msg = ('id');
$ ('# Morebutton) Html (' <img /> src = "loading.gif" ').;
$. Ajax ({
Tipus: 'POST',
url: 'more_ajax.php,
data: 'lastmsg =' + msg,
cache: false,
èxit: function (html) {
$ ('# Morebutton') Elimina ().;
$ ('# 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 comanda per més msg_id límit desc 2");
while ($ fila = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['missatge'];
>
<Div id = "<php echo $ msg_id;?>" Class = "boxMsg">
<span style="padding:5px;"> <php echo $ mensaje;?> </ span>
</ Div>
<Php
}
>
<div id="more_updates"> </ div>
<div id="morebutton"> <a id = "<php echo $ msg_id;?>" class = "more" href = "#"> Més informació </ a> </ div>
</ Div>
</ Body>
</ HTML>
Com es pot veure després de veure els 2 primers llocs (ordenats per "msg_id" en ordre descendent), hi ha un div buit amb id "more_update" (no es "emmagatzema" el següent missatge) i un div que representa la pròxima enllaç "Més" per als que ens associem - un mètode d'usar jQuery - els missatges de sol · licitud d'acció.
Capçalera (head ...</ head>) del document, després de referir-se a la llibreria jQuery, hem descrit la funció de JavaScript associat amb l'enllaç "Més" (aquesta funció es diu amb el " esdeveniment de clic ).
Amb aquesta funció, presos de la "id" de l'identificador d'enllaç ("msg_id") en l'últim missatge en pantalla, aquest identificador s'envia al segon arxiu php com un paràmetre després de la petició ajax , mentre que substituir el contingut del contenidor div enllaç "Més", amb un bell gif animat amb efecte de "càrrega" , per matar el temps.
Si la petició ajax va tenir èxit (l'èxit de les propietats de la sol · licitud) que retiri tots els div "morebutton" i inseriu la resposta HTML (que conté els missatges) en el div contenidor "more_update" utilitzant el mètode de afegir .
 |
ASP Zero (ebook)
Microsoft ASP i VBScript per aprendre des de zero. A només 29 €. |
 |
JavaScript (Curs)
Guia completa de seqüència del costat del client. A partir de 39 €. |
 |
PHP (Curs)
Cicle complet per a la creació de llocs web dinàmics. A partir de 49 €. |