"Mere" knappen stil Twitter
Side 1 af 2
I denne artikel vil jeg forklare hvordan man kan genskabe effekten af "More"-knappen for at Twitter bruge jQuery biblioteket.
Den knap, som vi ønsker at genskabe, for de uindviede, giver dig mulighed for at udvide listen over beskeder vises som standard uden noget behov for at opdatere siden (hvilket er muligt takket være Ajax-teknologien i stigende grad bruges i miljøer af Web 2.0).
Vi starter med at oprette en test database består af en enkelt tabel:
CREATE TABLE indlæg ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Besked tekst );Som du kan se tabellen du netop har opbygget, er sammensat af kun to felter:
- msg_id der vil identificere den besked;
- og budskab, der indeholder teksten;
For min bekvemmelighed Jeg har oprettet en php-fil (som jeg vil bruge i optagelsen), hvor jeg laver kun forbindelsen til databasen, og jeg kaldte det "dbconfig.php"
<? Php
$ Conn = mysql_connect ("HOST", "BRUGERNAVN", "PASSWORD") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Som nævnt filen "dbconfig.php" vil indgå i de filer, vi skaber, for ikke at omskrive den samme kode flere gange.
For at udføre den effekt, du har brug for at oprette to filer:
- den første gang brugt til visning af de første "n" budskaber;
- og en anden, der vil blive gjort Ajax anmodninger (gennemført med jQuery) for at vise "den næste besked".
<html>
<head>
Flere <title> Button Twitter-stil </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Mere'). Klik på (funktion () {
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: falske,
succes: funktion (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 orden med mere msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['besked'];
?>
<Div id = "<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 = "mere" href = "#"> Mere </ a> </ div>
</ Div>
</ Body>
</ HTML>
Som du kan se efter at have set de første 2 indlæg (sorteret efter "msg_id" i faldende orden), er der en tom div med id "more_update" (der vil være "pakket" den næste meddelelse), og en div, der repræsenterer den næste linket "More", som vi forbinder - en metode til at bruge jQuery - handlingen anmodningen beskeder.
Header (<hoved> ...</ head>) af dokumentet, efter at have kaldt den jQuery biblioteket, beskrev vi den JavaScript-funktion i forbindelse med linket "More" (denne funktion kaldes med ' klik begivenheden ).
Med denne funktion taget fra "id" i linket identifikator ("msg_id") viser den sidste besked, er dette id sendes til den anden php fil som en parameter efter ajax anmodning , i mellemtiden, erstatte indholdet af div container linket "More" med et smukt animeret GIF med virkning "loading" , bare for at slå tiden ihjel.
Hvis ajax anmodningen lykkedes (succes af ansøgningen ejendom) fjerner vi alle div "morebutton" og indsæt HTML-respons (indeholdende andre beskeder) i beholderen div "more_update" ved hjælp af append .
 |
ASP Zero (Ebook)
Læring Microsoft ASP og VBScript fra bunden. På kun 29 €. |
 |
Javascript (Kursus)
Komplet guide til klient-side scripting. Fra 39 €. |
 |
PHP (Kursus)
Fuld kursus for at skabe dynamiske web-sites. Fra 49 €. |