"More"-painiketta tyyliin Twitter
Sivu 1 2
Tässä artikkelissa kerrotaan, kuinka luoda vaikutukset "More"-painiketta Twitterin avulla jQuery kirjastoa.
Painike, jonka haluamme luoda uudelleen, sillä maallikot, voit laajentaa luetteloa viestit näy oletusarvoisesti ilman tarvetta päivittää sivua (mikä on mahdollista ansiosta Ajax teknologiaa käytetään yhä enemmän ympäristöissä Web 2.0).
Aloitamme luomalla testi tietokanta sisältää yhden pöydän:
CREATE TABLE viestiä ( msg_id INT perusavain AUTO_INCREMENT, Message Text );Kuten huomaatte taulukossa juuri rakennettu koostuu vain kaksi kenttää:
- msg_id joka tunnistaa viestin;
- ja viesti, joka sisältää tekstin;
Omasta mukavuutta olen luonut PHP-tiedoston (jonka aion käyttää osallisuus), jossa teen vain yhteyden tietokantaan ja kutsuin sitä "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "käyttäjänimi" "salasana") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Kuten tiedosto "dbconfig.php" sisällytetään tiedostojen luomme, jottei kirjoittaa samaa koodia useita kertoja.
Voit tehdä vaikutuksen sinun täytyy luoda kaksi tiedostoa:
- ensimmäinen käytetty näyttö ensimmäisen "n" viestejä;
- ja toinen, että tehdään Ajax pyyntöjä (toteutettu jQuery) näyttöön "seuraava viesti".
<html>
<head>
Lisää <title> Button Twitter tyyli </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. More "). Click (function () {
var elementti = $ (this);
var msg = element.attr (id);
$ ('# Morebutton "). Html (" <img src="loading.gif" /> ");
$. Ajax ({
tyyppi: "post",
url: "more_ajax.php",
päivämäärä: 'lastmsg =' + msg,
välimuisti: false,
menestys: toiminto (html) {
$ ('# Morebutton "). Poista ();
$ ('# 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 Järjestä enemmän msg_id laskevasti Limit 2");
while ($ rivi = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ rivi ['msg_id'];
$ Msg = $ rivi ['viesti'];
?>
<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"> <id = "<? php echo $ msg_id;?>" class = "Lisää" href = "#"> Lisää </ a> </ div>
</ Div>
</ Body>
</ HTML>
Kuten näette nähtyään ensimmäiset 2 viestiä (lajiteltu "msg_id" alenevassa järjestyksessä), on tyhjä div kanssa id "more_update" (siellä on "pakattu" seuraava viesti) ja div, joka edustaa seuraavaa linkki "Lisää", johon liitämme - tapa käyttää jQuery - toiminta-viestit.
Header (<head> ...</ head>) asiakirjan, kun soitat jQuery kirjastoa, kuvailimme JavaScript-toiminto liittyy linkki "More" (tämä toiminto on nimeltään kanssa " napsautuksen ).
Tämän toiminnon otettu "id" on linkki tunniste ("msg_id") näyttää viimeisen viestin, tämä tunnus lähetetään toinen php-tiedosto parametri jälkeen Ajax pyynnöstä puolestaan korvaa sisällön div kontti linkki "Lisää", jossa on kaunis animoituja gif päivästä "loading" , vain tappaa aikaa.
Jos ajax Pyyntö onnistui (onnistumisen omaisuus) poistaa kaikki div "morebutton" ja aseta HTML vastaus (sisältää muita viestejä) säiliöön div "more_update" käyttäen append .
 |
ASP Zero (Ebook)
Learning Microsoft ASP-ja VBScript tyhjästä. Vain 29 €. |
 |
Javascript (kurssi)
Täydellinen opas client-side scripting. Alkaen 39 €. |
 |
PHP (kurssi)
Täysi tietenkin luoda dynaamisia Web-sivustoja. Alkaen 49 €. |