"Mer"-knappen stil Twitter
Side 1 av 2
I denne artikkelen vil jeg forklare hvordan å gjenskape effekten av "More"-knappen for å Twitter hjelp av jQuery biblioteket.
Knappen som vi ønsker å gjenskape, for de uinnvidde, kan du utvide listen over meldinger vises som standard, uten noe behov for å oppdatere siden (som er mulig takket være Ajax-teknologi i økende grad brukes i miljøer med Web 2.0).
Vi starter med å lage en test database består av en enkelt tabell:
CREATE TABLE innlegg ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Message Text );Som du kan se tabellen du nettopp bygget består av bare to felt:
- msg_id som vil identifisere meldingen;
- og melding som inneholder teksten;
For enkelhets min lagde jeg en php-fil (som jeg vil bruke i inkludering) der jeg gjør bare tilkoblingen til databasen, og jeg kalte det "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "brukernavn" "passord") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Som nevnt filen "dbconfig.php" vil bli inkludert i filene vi lager, for ikke å skrive den samme koden flere ganger.
Til å utføre den effekten du trenger for å lage to filer:
- den første brukes til visning av den første "n" meldinger;
- og en annen som vil bli gjort ajax forespørsler (gjennomføres med jQuery) for å vise "neste-melding".
<html>
<head>
Mer <title> Button 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 () {
$ ('. More "). Klikk (funksjon () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton') Html ('<img src="loading.gif" />').;
$. Ajax ({
type: "POST ',
url: 'more_ajax.php',
dato: 'lastmsg =' + msg,
cache: falsk,
suksess: funksjon (html) {
$ ('# Morebutton') Fjern ().;
$ ('# 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 rekkefølge etter mer msg_id DESC LIMIT 2");
while ($ rad = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['melding'];
?>
<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 = "mer" href = "#"> More </ a> </ div>
</ Div>
</ BODY>
</ HTML>
Som du kan se etter å ha sett de første 2 innlegg (sortert etter "msg_id" i synkende rekkefølge) er det en tom div med id "more_update" (det vil være "pakket" den neste meldingen) og en div som representerer den neste linken "More" som vi forbinder - en metode for å bruke jQuery - handlingen forespørsel meldinger.
Header (<head> ...</ head>) av dokumentet, etter å kalle den jQuery biblioteket, beskrev vi javascript funksjon knyttet til lenken "More" (denne funksjonen kalles med " klikk arrangementet ).
Med denne funksjonen er tatt fra "id" av koblingen identifikator («msg_id") viser den siste meldingen, er dette identifikator sendt til andre php filen som en parameter etter Ajax forespørselen , i mellomtiden, erstatte innholdet i div container link "More" med en vakker animert gif med virkning "loading" , bare for å drepe tid.
Hvis ajax forespørselen var vellykket (suksess søknaden eiendom) vi fjerne alle div "morebutton" og sett inn HTML respons (som inneholder andre meldinger) i beholderen div "more_update" ved hjelp av append .
 |
ASP Zero (Ebook)
Læring Microsoft ASP og VBScript fra bunnen av. At kun 29 €. |
 |
Javascript (Course)
Komplett guide til klient-side scripting. Fra € 39. |
 |
PHP (Course)
Full kurs for å lage dynamiske nettsider. Fra 49 €. |