"Další" tlačítko ve stylu Twitter
Strana 1 z 2
V tomto článku jsem se vysvětlit, jak vytvořit efekt "Více" pro Twitter pomocí jQuery knihovny.
Tlačítka, které chceme znovu, pro nezasvěcené, umožňuje rozšířit seznam zpráv, zobrazí ve výchozím nastavení bez nutnosti obnovit stránku (což je možné díky technologii Ajax stále používá v prostředí Web 2.0).
Začneme tím, že vytvoří testovací databáze se skládá z jedné tabulky:
CREATE TABLE příspěvků ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Text zprávy );Jak můžete vidět v tabulce právě postavil se skládá pouze ze dvou oblastí:
- msg_id, který bude identifikovat zprávy;
- a zprávu, která obsahuje text;
Pro moje pohodlí jsem vytvořil soubor PHP (které budu používat v začleňování), ve kterém dělám pouze připojení k databázi a já jsem to nazval "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "jméno" "heslo") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
>
Jak již bylo uvedeno soubor "dbconfig.php" budou zahrnuty v souborech tvoříme, aby nedošlo k přepsání stejný kód vícekrát.
Chcete-li provést to, co potřebujete vytvořit dva soubory:
- První použité pro zobrazení první "N" zprávách,
- a druhý, který bude k žádosti Ajax (realizován s jQuery) se zobrazí "Další zprávy".
<html>
<head>
Více <title> tlačítko Twitter style </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Více "). Click (function () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton) HTML ("<img src="loading.gif" />").
$. Ajax ({
Typ: 'POST',
url: "more_ajax.php"
Datum: 'lastmsg =' + MSG
cache: falešné,
Úspěch: function (HTML) {
$ ('# Morebutton) remove ().
$ ('# More_updates "), Append (html).
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
patří ("dbconfig.php ');
$ Sql_check = mysql_query ("SELECT * FROM, aby více msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
Msg_id $ = $ row ['msg_id'];
$ Msg = $ row ['vzkaz'];
>
<Div id = "<$ 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 = "více" href = "#"> Více </ a> </ div>
</ Div>
</ Body>
</ Html>
Jak můžete vidět po shlédnutí prvních 2 příspěvků (seřazené podle "msg_id" v sestupném pořadí), je prázdný div s id "more_update" (bude "zabalena" další zprávy) a div, která představuje další odkaz "další", ke kterému jsme se spojovat - a způsob použití jQuery - zprávy akce požadavku.
Hlavička (<head> ...</ head>) dokumentu, po volání jQuery knihovny, jsme popsali funkci javascript spojené s odkaz "více" (tato funkce je volána s " události Click ).
S touto funkcí převzaty z "ID" identifikátor spojení ("msg_id"), zobrazí poslední zpráva, je tento identifikátor odeslán druhý soubor php jako parametr po žádosti Ajax se zatím nahradit obsah div kontejneru odkaz "další", s krásným animovaný GIF s účinností "Loading" , jen zabít čas.
Je-li žádost Ajax byl úspěšný (úspěch žádosti majetku), odstraníme všechny div "morebutton" a vložte HTML odpověď (obsahující jiné zprávy) v kontejneru div "more_update" pomocí připojit .
 |
ASP Zero (ebook)
Učení Microsoft ASP a VBScript od nuly. V pouhých 29 €. |
 |
JavaScript (kurz)
Kompletní průvodce pro skriptování na straně klienta. Od 39 €. |
 |
PHP (kurz)
Celý kurz pro vytváření dynamických webů. Od 49 €. |