"Meer" knop stijl Twitter
Pagina 1 van 2
In dit artikel zal ik uitleggen hoe je het effect van "More" knop opnieuw om Twitter met behulp van de jQuery bibliotheek.
De knop die we willen, opnieuw voor de niet-ingewijden, kunt u uitbreiding van de lijst met berichten standaard weergegeven zonder enige noodzaak om de pagina te vernieuwen (wat is mogelijk dankzij de Ajax-technologie steeds meer gebruikt in omgevingen van Web 2.0).
We beginnen door het creëren van een test-database bestaat uit een enkele tabel:
CREATE TABLE berichten ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Tekst bericht );Zoals je kunt zien van de tabel die u net gebouwd is samengesteld uit slechts twee velden:
- msg_id die het bericht te identificeren;
- en het bericht dat de tekst bevat;
Voor mijn gemak heb ik een php-bestand (die ik zal gebruiken in de opname), waarin ik alleen de verbinding te maken met de database en ik noemde het "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "USERNAME", "wachtwoord") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Zoals vermeld het bestand "dbconfig.php" zullen worden opgenomen in de bestanden die we maken, dus niet te dezelfde code meerdere keren herschrijven.
Voor het uitvoeren van het effect dat u nodig hebt om twee bestanden te maken:
- het eerst gebruikt voor de weergave van de eerste "n" berichten;
- en een tweede die zullen worden aangebracht Ajax aanvragen (uitgevoerd met jQuery) om de "volgende bericht" display.
<html>
<head>
Meer <title> Button Twitter stijl </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ (". Meer '). Click (function () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton ") Html (' <img src="loading.gif" /> ').;
$. Ajax ({
type: 'POST',
url: "more_ajax.php ',
datum: 'lastmsg =' + msg,
cache: vals,
succes: de functie (html) {
$ ('# Morebutton ") Verwijder ().;
$ ('# 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 bestelling door meer msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['bericht'];
?>
<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 = "meer" href = "#"> Meer </ a> </ div>
</ DIV>
</ Body>
</ Html>
Zoals je kunt zien na het zien van de eerste twee berichten (gesorteerd op "msg_id" in aflopende volgorde), is er een lege div met id "more_update" (er wordt "ingepakt" het volgende bericht) en een div dat de volgende vertegenwoordigt link "More" waar we associëren - een methode om met behulp van jQuery - de actie verzoek berichten.
Header (<head> ...</ head>) van het document, na het aanroepen van de jQuery bibliotheek, beschrijven we de JavaScript-functie in verband met de link "Meer" (deze functie wordt aangeroepen met de ' gebeurtenis click ).
Met deze functie overgenomen uit de "id" van de link identifier ("msg_id") geeft de laatste boodschap, deze 'identifier' wordt naar de tweede php bestand als een parameter na de Ajax-verzoek , ondertussen, vervangt u de inhoud van de div container link "More" met een prachtige animated gif met ingang "loading" , alleen maar om de tijd te doden.
Als de Ajax-verzoek succesvol was (succes van de toepassing onroerend goed) verwijderen we alle div "morebutton" en plaats de HTML-respons (met andere berichten) in de container div "more_update" met behulp van de append .
 |
ASP Zero (Ebook)
Leren Microsoft ASP en VBScript vanaf nul. Op slechts 29 €. |
 |
Javascript (Cursus)
Complete gids voor client-side scripting. Van 39 €. |
 |
PHP (Cursus)
Volledige cursus voor het maken van dynamische websites. Van 49 €. |