"More" pogu stilu Twitter
Lapa 1 no 2
Šajā rakstā es paskaidrot, kā atjaunot ietekmi "More" pogu, lai čivināt, izmantojot jQuery bibliotēku.
Pogu, uz kuras mēs vēlamies atjaunot, lai uninitiated, ļauj paplašināt ziņu sarakstā parādīts pēc noklusējuma bez nepieciešamības, lai atsvaidzinātu lapu (kas ir iespējams Ajax tehnoloģiju, pateicoties arvien vairāk izmanto vidē, Web 2.0).
Mēs sākam, izveidojot testu datu bāze sastāv no vienas tabulas:
CREATE TABLE amati ( msg_id INT PRIMARY KEY auto_increment, Ziņojuma teksts );Kā jūs varat redzēt tabulā tu tikko uzcelta sastāvā ir tikai divi lauki:
- msg_id kas noteiks ziņojumu;
- un ziņojumu, kas satur tekstu;
Par manu ērtībai es izveidojis php failu (ko es izmantot iekļaušana), kur es varu tikai savienojumu ar datu bāzi, un es sauc to par "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "Lietotājvārds" "parole") vai die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) vai die (mysql_error ());
?>
Kā minēts failu "dbconfig.php" būs iekļauti failus mēs izveidot, lai nav pārrakstīt pašu kodu vairākas reizes.
Lai veiktu efekts jums ir nepieciešams izveidot divus failus:
- pirmo reizi izmantots, lai parādītu pirmo "n" vēstījumus;
- un otrkārt, ka tiks ajax pieprasījumu (īsteno ar jQuery), lai parādītu "nākamais ziņojums".
<html>
<head>
Vairāk <title> Button Twitter stils </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Funkcija () {
$ ('. More "). Click (funkcija () {
var elements = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton ") Html (" <img src="loading.gif" /> ").;
$. Ajax ({
tips: "POST",
url: "more_ajax.php",
datums: "lastmsg = '+ msg,
cache: viltus,
panākumiem: funkcija (html) {
$ ('# Morebutton ") Remove ().;
$ ('# More_updates "), Append (html).;
}
});
atgriezties viltus;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
ietver ("dbconfig.php");
$ Sql_check = mysql_query ("SELECT * FROM lai vairāk msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Ziņu = $ row ['īsziņu'];
?>
<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 = "vairāk" href = "#"> Lasīt vairāk </ a> </ div>
</ Div>
</ Body>
</ Html>
Kā jūs varat redzēt pēc skata pirmās 2 amata vietu (sakārtoti pēc "msg_id" dilstošā secībā), ir tukša div ar id "more_update" (tur būs "iepako" nākamo ziņu) un div ka ir nākamais link "More", no kura mēs saistām - metode, izmantojot jQuery - prasība rīkoties ziņojumus.
Header (<head> ...</ head>) dokumenta, pēc izsaucēja jQuery bibliotēku, mēs aprakstīts javascript funkcijas, kas saistītas ar saikni "More" (šo funkciju sauc ar " klikšķi notikums ).
Ar šo funkciju ņemti no "id" saite identifikatoru ("msg_id") parāda pēdējo ziņojumu, šis identifikators tiek nosūtīts uz otro php failu kā parametru, pēc ajax pieprasījumu , tikmēr, nomainiet saturu div konteiners link "More" ar skaistu animācijas gif spēkā ar "loading" , tikai, lai nogalinātu laiku.
Ja ajax pieprasījumu bija veiksmīgs (izdošanos īpašuma) mēs noņemtu visas div "morebutton", un ievietojiet HTML atbildes (kas satur citas ziņas), kas atrodas traukā, div "more_update", izmantojot pievienošanas .
 |
ASP Zero (Ebook)
Mācības Microsoft ASP un VBScript no nulles. Pie 29 tikai €. |
 |
Javascript (Kurss)
Pilnīga rokasgrāmata, lai klienta puses skriptu. Sākot no € 39. |
 |
PHP (Kurss)
Pilns kurss, lai radītu dinamisku tīmekļa vietnes. Sākot no 49 €. |