"More" gumb stil Twitter
Stranica 1 od 2
U ovom članku ću objasniti kako stvoriti učinak "više" gumb na Twitter koristeći jQuery knjižnice.
Gumb koji želimo stvoriti, za nepoduzetan, omogućuje da proširi popis poruka prikazan po defaultu, bez ikakve potrebe za osvježavanje stranice (što je moguće zahvaljujući tehnologiji Ajax sve više koristi u prostorima s Web 2.0).
Mi smo započeli stvaranjem test baza podataka se sastoji od jedne tablice:
CREATE TABLE postova ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Tekst poruke );Kao što možete vidjeti tablicu koji ste upravo izgrađen sastoji se od samo dva područja:
- msg_id koji će identificirati poruku;
- i poruku koja sadrži tekst;
Za moj praktičnost sam stvorio php datoteku (koje ću koristiti pri uključivanju) u kojem sam napraviti samo povezivanje na bazu podataka, a ja ga pod nazivom "dbconfig.php"
<? PHP
$ Conn = mysql_connect ("host", "korisničko ime" "password") ili umrijeti (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) ili umrijeti (mysql_error ());
?>
Kao što je spomenuto datoteku "dbconfig.php" će biti uključene u datoteke koje stvaramo, kako ne bi prepisati isti broj više puta.
Za obavljanje efekt morate stvoriti dvije datoteke:
- prvi se koristi za prikaz prve "n" porukama;
- i drugi koji će se Ajax zahtjeva (koji se provodio s jQuery) za prikaz "sljedeću poruku".
<html>
<head>
Više <title> gumb Twitter stil </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Funkcija () {
$ ('. Više "). Kliku (funkcija () {
var elementa = $ (to);
var poruka = element.attr ('id');
$ ('# Morebutton') HTML ('<img src="loading.gif" />').;
$. Ajax ({
Vrsta: 'Post',
url: 'more_ajax.php',
datum: 'lastmsg =' + poruka,
cache: lažni,
uspjeh: funkcija (html) {
$ ('# Morebutton') Uklonite ().;
$ ('# More_updates') Dodavanje (HTML).;
}
});
povratak false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? PHP
uključuju ('dbconfig.php');
$ Sql_check = mysql_query ("SELECT * FROM uredi prema više msg_id DESC LIMIT 2");
dok ($ red = mysql_fetch_array ($ sql_check)) {
$ = $ Red Msg_id ['msg_id'];
$ Por = $ red ['poruka'];
?>
<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 = "više" href = "#"> Više </ a> </ div>
</ Div>
</ Body>
</ HTML>
Kao što možete vidjeti, nakon gledanja prva 2 mjesta (sortirani prema "msg_id" silaznim redoslijedom), ne postoji prazan div s id "more_update" (bit će "upakiran" sljedeću poruku) i div koji predstavlja sljedeću vode "More" na kojoj suradnik - način korištenja jQuery - akcija zahtjeva poruke.
Zaglavlje (<head> ...</ head>) dokumenta, nakon poziva jQuery biblioteku, opisali smo JavaScript funkcije povezane s na link "Više" (ova funkcija se zove sa " klikom događaj ).
Uz ovu funkciju preuzet iz "id" od veze identifikator ("msg_id") prikazuje zadnju poruku, ovaj identifikator se šalje drugi php datoteku kao parametar nakon Ajax zahtjeva , u međuvremenu, zamijenite sadržaj div spremnika vode "More" s prekrasnim animirani GIF s učinkom "loading" , samo da ubije vrijeme.
Ako Ajax Zahtjev je bio uspješan (uspjeh primjene imovine) smo ukloniti sve div "morebutton" i umetnuti HTML odgovor (s druge poruke) u kontejner div "more_update" pomoću dodavanje .
 |
ASP Zero (Ebook)
Učenje Microsoft ASP i VBScript od nule. Na samo 29 €. |
 |
Javascript (tečaj)
Kompletan vodič za client-side skriptiranje. Od 39 €. |
 |
PHP (tečaj)
Cijeli tečaj za izradu dinamičkih Web stranica. Od 49 €. |