"Daugiau" mygtuką stilius "Twitter"
Puslapis 1 iš 2
Šiame straipsnyje aš paaiškinti, kaip atkurti "daugiau" mygtuką poveikis Twitter naudojant JQuery biblioteka.
Mygtuką, kad mes norime atkurti, nes uninitiated, leidžia pratęsti pranešimų rodoma pagal numatytuosius nustatymus, kad nereikėtų atnaujinti puslapį (tai yra įmanoma dėka Ajax technologija vis dažniau naudojami aplinkoje Web 2.0), sąrašas.
Mes pradedame sukurdami bandymo duomenų bazę sudaro vieną lentelę:
CREATE TABLE pranešimų ( msg_id LC PRIMARY KEY AUTO_INCREMENT, Pranešimo tekstas );Kaip matote lentelėje, kurį ką tik pastatytas sudaro tik du laukus:
- msg_id kuriame bus apibrėžti žinutę;
- ir pranešimą, kuriame yra tekstas;
Nes mano patogumui aš sukūriau PHP failą (kurį aš naudoti įtraukimo), kuriame aš galiu tik prisijungti prie duomenų bazės ir aš jį pavadino "dbconfig.php"
<? PHP
$ Conn = mysql_connect ("host", "username" "password") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Kaip minėta byla "dbconfig.php" bus įtrauktas į bylos mes sukurti, kad nebūtų perrašyti tą patį kodą kelis kartus.
Norėdami atlikti poveikį jums reikia sukurti du failus:
- pirmasis naudojamas pirmosios "N" pranešimus ekranas;
- ir antra, kad bus Ajax prašymus (įgyvendintas su JQuery) rodyti "Next message".
<html>
<head>
Daugiau <title> mygtuką "Twitter" stiliaus </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ (". More"). Spustelėkite (function () {
var elementas = $ (this);
var msg = element.attr ('ID');
$ ('# Morebutton) HTML ("<img src="loading.gif" />).;
$. "Ajax" ({
tipo: "post",
url: "more_ajax.php"
data: "lastmsg = '+ msg,
cache: klaidingas,
sėkmės: function (html) {
$ ('# Morebutton) šalinti ().;
$ ('# More_updates) Pridėti (HTML).;
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? PHP
include ("dbconfig.php ');
$ Sql_check = mysql_query ("SELECT * FROM mokėti daugiau msg_id DESC LIMIT 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"> <id = "<php echo $ msg_id;?>" class = "daugiau" href = "#"> Daugiau </ a> </ div>
</ Div>
</ Body>
</ Html>
Kaip matote po peržiūros pirmuosius 2 pranešimų (surūšiuotas pagal "msg_id" mažėjančia tvarka), yra tuščias div su ID "more_update" (ten bus "supakuotas" į kitą pranešimą), o div, kad tai dar nuorodą "Daugiau", kuriai mes siejame - naudojant JQuery metodas - veiksmų prašymu žinutes.
Header (<head> ...</ head>) dokumento, kai paskambinę jQuery bibliotekos, mes aprašyta "JavaScript" funkcijų, susijusių su nuoroda "Daugiau" (ši funkcija vadinama su " spustelėkite atveju ).
Su šia funkcija paimta iš "id" nuorodą identifikatorius ("msg_id") rodo paskutinį pranešimą, tai identifikatorius yra siunčiamas į antrąjį PHP failą kaip po parametro Ajax prašymą , tuo tarpu, pakeisti div konteinerio turinį nuorodą "Daugiau" su gražia animacinis GIF efektas "pakrauti" , tiesiog užmušti laiką.
Jei Ajax prašymą buvo sėkmingas (sėkmės paraiškos nuosavybės) Mes pašalinti visus div "morebutton" ir įterpti HTML atsakas (kurių sudėtyje yra kitų pranešimų) į konteinerį div "more_update" naudojant pridėti .
 |
ASP Zero (Ebook)
Mokymosi Microsoft ASP ir VBScript nuo nulio. Ne tik 29 €. |
 |
Javascript (kursų)
Užbaigti vadovą kliento-side scripting. Nuo 39 €. |
 |
PHP (kurso)
Visas kursas sukurti dinaminius interneto svetainių. Nuo 49 €. |