Przycisk "więcej" Twitter-style
Strona 1 z 2
W tym artykule opiszę w jaki sposób odtworzyć efekt "Więcej", aby Twitter przy użyciu biblioteki jQuery.
Przycisk, który chcemy odtworzyć, dla niewtajemniczonych, umożliwia rozszerzenie listy wiadomości domyślnie wyświetlane bez konieczności odświeżania strony (co jest możliwe dzięki technologii Ajax coraz częściej wykorzystywane w dziedzinach Web 2.0).
Zaczniemy od utworzenia testowej bazy danych składa się z jednej tabeli:
Tworzenia wiadomości TABLE ( msg_id INT AUTO_INCREMENT PRIMARY KEY, SMS );Jak widać w tabeli, że po prostu wbudowany składa się z dwóch pól:
- msg_id do identyfikowania się z wiadomości;
- i wiadomość, która zawiera tekst;
Dla mojej wygody utworzonego pliku php (które używam w integracji), w którym robię tylko połączenie do bazy danych i nazwał go "dbconfig.php"
<Php
$ Conn = mysql_connect ("host", "username", "Hasło") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Jak powiedziałem plik "dbconfig.php" zostaną włączone w plikach tworzymy, tak aby nie przepisać tego samego kodu wielokrotnie.
Aby wykonać efekt należy utworzyć dwa pliki:
- po raz pierwszy użyty do wyświetlania pierwszego "n" wiadomości;
- i drugi, który będzie żądań AJAX (realizowane z jQuery), aby wyświetlić "następnej wiadomości".
<html>
<head>
Więcej Przycisk Twitter <title> stylu </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Więcej "). Click (function () {
var element = $ (this);
element.attr var msg = ("id");
$ ('# Morebutton ") html (' <img src="loading.gif" />. ');
$. Ajax ({
typu: "POST",
url: "more_ajax.php"
daty: "lastmsg = '+ msg,
cache: false,
sukces: function (html) {
$ ('# Morebutton ") Usuń ().;
$ ('# 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 celu przez msg_id DESC LIMIT więcej 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['message'];
?>
<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 = "więcej" href = "#"> Więcej </ a> </ div>
</ Div>
</ Body>
</ Html>
Jak widać po obejrzeniu pierwszych 2 postów (ułożone według "msg_id" w porządku malejącym), nie jest pustym div z id "more_update" (będzie "przechowywany" następnej wiadomości) i div, że to kolejny link "Więcej", do którego kojarzymy - metoda przy użyciu jQuery - komunikaty żądań działania.
Nagłówek (<head> ...</ head>) dokumentu, po odwołaniu się do biblioteki jQuery, opisaliśmy funkcji javascript związane z linku "Więcej" (ta funkcja jest wywoływana z " zdarzenie click ).
Funkcja ta pochodzi z "id" identyfikator połączenia ("msg_id") na ostatnim wyświetlony komunikat ten identyfikator jest wysyłany do drugiego pliku php jako parametr po żądania ajax , podczas gdy my zastąpić zawartość pojemnika div link "Więcej", z pięknym gif animowany z mocą "loading" , tak dla zabicia czasu.
Jeżeli wniosek ajax było skuteczne (sukces właściwości życzenie) usuniemy wszystkie div "morebutton" i założyć odpowiedź HTML (zawierający postów) w kontenerze div "more_update" za pomocą metody append .
 |
ASP Zero (Ebook)
Microsoft ASP i VBScript nauczyć się od podstaw. W zaledwie 29 €. |
 |
JavaScript (kurs)
Kompletny przewodnik po stronie klienta skryptów. Począwszy od 39 €. |
 |
PHP (Kurs)
Pełny kurs tworzenia dynamicznych stron internetowych. Począwszy od 49 €. |