"Ďalšie" tlačidlo v štýle Twitter
Strana 1 z 2
V tomto článku som sa vysvetliť, ako vytvoriť efekt "Viac" pre Twitter pomocou jQuery knižnice.
Tlačidlá, ktoré chceme znovu, pre nezasvätených, umožňuje rozšíriť zoznam správ, zobrazí v predvolenom nastavení bez nutnosti obnoviť stránku (čo je možné vďaka technológii Ajax stále používa v prostredí Web 2.0).
Začneme tým, že vytvorí testovacej databázy sa skladá z jednej tabuľky:
CREATE TABLE príspevkov ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Text správy );Ako môžete vidieť v tabuľke práve postavil sa skladá len z dvoch oblastí:
- msg_id, ktorý bude identifikovať správy;
- a správu, ktorá obsahuje text;
Pre moje pohodlie som vytvoril súbor PHP (ktoré budem používať v začleňovania), v ktorom robím iba pripojenie k databáze a ja som to nazval "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "meno" "heslo") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ Conn) or die (mysql_error ());
>
Ako už bolo uvedené súbor "dbconfig.php" budú zahrnuté v súboroch tvoríme, aby nedošlo k prepísaniu rovnaký kód viackrát.
Ak chcete vykonať to, čo potrebujete vytvoriť dva súbory:
- Prvá použité pre zobrazenie prvý "N" správach,
- a druhý, ktorý bude k žiadosti Ajax (realizovaný s jQuery) sa zobrazí "Ďalšie správy".
<html>
<head>
Viac <title> tlačidlo 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 () {
$ ('. Viac "). Click (function () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton) HTML ("<img src="loading.gif" />").
$. Ajax ({
Typ: 'POST',
url: "more_ajax.php"
Dátum: 'lastmsg =' + MSG
cache: falošné,
Úspech: function (HTML) {
$ ('# Morebutton) remove ().
$ ('# More_updates "), Doplnené (html).
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
patrí ("dbconfig.php ');
$ Sql_check = mysql_query ("SELECT * FROM, aby viac msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
Msg_id $ = $ row ['msg_id'];
$ Msg = $ row ['odkaz'];
>
<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 = "viac" href = "#"> Viac </ a> </ div>
</ Div>
</ Body>
</ Html>
Ako môžete vidieť po zhliadnutí prvých 2 príspevkov (zoradené podľa "msg_id" v zostupnom poradí), je prázdny div s id "more_update" (bude "zabalená" ďalšie správy) a div, ktorá predstavuje ďalší odkaz "ďalšie", ku ktorému sme sa spájať - a spôsob použitia jQuery - správy akcie požiadavke.
Hlavička (<head> ...</ head>) dokumentu, po volaní jQuery knižnice, sme popísali funkciu javascript spojené s odkaz "viac" (táto funkcia je volaná s " udalosti Click ).
S touto funkciou prevzaté z "ID" identifikátor spojenia ("msg_id"), zobrazí posledná správa, je tento identifikátor odoslaný druhý súbor php ako parameter po žiadosti Ajax sa zatiaľ nahradiť obsah div kontajnera odkaz "ďalšie", s krásnym animovaný GIF s účinnosťou "Loading" , len zabiť čas.
Ak je žiadosť Ajax bol úspešný (úspech žiadosti majetku), odstránime všetky div "morebutton" a vložte HTML odpoveď (obsahujúce iné správy) v kontajneri div "more_update" pomocou pripojiť .
 |
ASP Zero (ebook)
Učenie Microsoft ASP a VBScript od nuly. V pouhých 29 €. |
 |
JavaScript (kurz)
Kompletný sprievodca pre skriptovanie na strane klienta. Od 39 €. |
 |
PHP (kurz)
Celý kurz pre vytváranie dynamických webov. Od 49 €. |