"Mai mult" butonul stil Twitter
Pagina 1 din 2
În acest articol voi explica cum sa recreeze efectul de "Mai mult" pentru a Twitter, utilizând biblioteca jQuery.
Butonul pe care vrem sa recreeze, pentru neiniţiaţi, vă permite să extindă lista de mesaje afişate în mod implicit, fără a fi nevoie pentru a actualiza pagina (care este posibil datorita tehnologiei Ajax ce în ce mai utilizate în medii de Web 2.0).
Vom începe prin crearea unei baze de date de testare constă dintr-un singur tabel:
CREATE TABLE mesaje ( msg_id INT cheie primară AUTO_INCREMENT, Mesaj text );După cum puteţi vedea tabelul pe care tocmai aţi construit este compus din doar două domenii:
- msg_id care va identifica mesajul;
- şi mesajul care conţine textul;
Pentru confortul meu am creat un fisier php (pe care îl voi folosi în includerea), în care am face numai conexiunea la baza de date şi l-am numit "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "Nume de utilizator" "parola") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ con) or die (mysql_error ());
?>
După cum sa menţionat dosarul "dbconfig.php" vor fi incluse în fisierele pe care le crea, astfel încât să nu rescrie acelaşi cod de mai multe ori.
Pentru a efectua efectul de care aveţi nevoie pentru a crea două fişiere:
- folosite pentru prima dată pentru afişarea primului "n" mesaje;
- şi un al doilea, care vor fi făcute cereri de Ajax (puse în aplicare cu jQuery) pentru a afişa "mesajul următor".
<html>
<head>
Mai multe <title> buton stil Twitter </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ("Mai multe."). Faceţi clic pe (function () {
var element = $ (aceasta);
var msg = element.attr ('id');
$ ('# Morebutton "), HTML (" <img src="loading.gif" /> ").;
$. Ajax ({
Tipul: "POST",
url: "more_ajax.php",
Data: 'lastmsg =' + msg,
cache: fals,
succes: Funcţia (html) {
$ ('# Morebutton ") Remove ().;
$ ('# More_updates') Adăugaţi (html).;
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
include ("dbconfig.php ');
$ Sql_check = mysql_query ("SELECT * FROM comandă pe mai multe LIMITĂ msg_id DESC 2");
în timp ce ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['mesaj'];
?>
<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 = "mai mult" href = "#"> Mai multe </ a> </ div>
</ Div>
</ BODY>
</ HTML>
După cum puteţi vedea după care vizionează primele 2 posturi (sortate după "msg_id" în ordine descrescătoare), există un gol div cu id-ul "more_update" (nu va fi "ambalate" mesajul următor), precum şi un div care reprezintă următorul legătură într-"Mai mult" la care ne asociem - o metoda de a folosi jQuery - mesajele de acţiune cerere.
Antet (<head> ...</ head>) a documentului, după asteptare biblioteca jQuery, am descris functia javascript asociate cu link-ul "More" (această funcţie este apelat cu " evenimentul click ).
Cu aceasta functie luate de la "id" din identificatorul de link-ul ("msg_id"), afişează ultimul mesaj, acest identificator este trimis la al doilea fişier php ca parametru după cererea Ajax , între timp, a înlocui conţinutul containerului div link-ul "More" cu o frumoasa gif animat, cu efect de "încărcare" , doar pentru a omori timpul.
În cazul în care cererea Ajax a fost un succes (de succes a cererii de proprietate) vom elimina toate div "morebutton" şi introduceţi răspunsul HTML (care conţine alte mesaje), la div container "more_update" folosind adăugare .
 |
ASP Zero (Ebook)
Microsoft Learning ASP şi VBScript de la zero. La doar 29 €. |
 |
Javascript (Curs)
Ghid complet pentru client-side scripting. De la 39 €. |
 |
PHP (Curs)
Ciclu complet pentru crearea de site-uri Web dinamice. De la 49 €. |