"More" butonuna stili heyecan
2 Sayfa 1
Bu yazıda jQuery kütüphanesi kullanarak Twitter "More" butonuna etkisini yeniden nasıl açıklayacağız.
Biz Deneyimsiz için, yeniden istediğiniz düğmesine dokunduktan sonra (giderek Web 2.0 ortamlarda kullanılan Ajax teknolojisi sayesinde mümkün olan) sayfayı yenilemek gerek kalmadan varsayılan olarak görüntülenir mesajları listesini uzatmak sağlar.
Biz tek bir tablo oluşan bir test veritabanı oluşturarak başlayın:
(TABLO mesaj CREATE msg_id INT PRIMARY KEY auto_increment, İleti Metni );Sadece yerleşik sadece iki alandan oluşan tablo gördüğünüz gibi:
- mesajı belirleyecektir msg_id;
- metni içeren ve mesaj;
Benim kolaylık sağlamak için ben veritabanına sadece bağlantı kurmak olduğu bir php dosyası (ben dahil olarak kullanacağı) oluşturulan ve "dbconfig.php" adı verilen
<? Php
$ Conn = mysql_connect ("host", "Kullanıcı Adı" "Şifre") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
Gibi dosya "dbconfig.php" aynı kodu birden çok kez yeniden yazmak değil, böylece yarattığımız dosyalar eklenecektir bahsetti.
Eğer iki dosya oluşturmak için gereken efekti yapmak için:
- ilk ilk "n" mesaj gösterimi için kullanılır;
- ve ajax istekleri yapılacak ikinci bir (jQuery ile uygulanan) "bir sonraki mesajı" gösterilecek.
<html>
<head>
Daha <title> Düğme heyecan tarzı </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. More'). (Function () {tıklayın
var eleman = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton') html ('<img src="loading.gif" />').;
$. Ajax ({
türü: 'POST',
url: 'more_ajax.php'
tarih: 'lastmsg =' + msj,
cache: false,
Başarı: function (html) {
$ ('# Morebutton') çıkarın ().;
$ ('# More_updates') ekle (html).;
}
});
return false;
});
});
</ Script>
</ Merkez>
<body>
<div align="center" style="width:500px;">
<? Php
('dbconfig.php') arasında;
$ Sql_check = mysql_query ("daha msg_id DESC LIMIT 2 tarafindan SELECT * FROM");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
Msg $ = $ row ['mesaj'];
?>
<Div id = "<Php echo msg_id $;?>" Class = "boxMsg">
<span style="padding:5px;"> <php echo $ msg;?> </ span>
</ DIV>
<? Php
}
?>
<div id="more_updates"> </ p>
<div id="morebutton"> <a id = "<php msg_id $;?>" class = "daha fazla" href = "#"> Daha fazla </ a> </ p>
</ DIV>
</ Body>
</ Html>
İlk 2 ileti (azalan sırada "msg_id" sıralaması) inceledikten sonra gördüğünüz gibi id "more_update" (sonraki mesajı var "paketlenmiş" olacaktır) ve sonraki temsil eden bir div ile boş bir div var biz ilişkilendirmek için hangi "Diğer" bağlantısı - jQuery kullanarak bir yöntem - eylem istek mesajları.
Belgenin başlığı (<head> ...</ head>), jQuery kütüphanesi çağırdıktan sonra, bağlantıların "Diğer" (Bu fonksiyonu 'ile denir ilişkili javascript işlevi açıklanan click olayını ).
Bağlantı tanımlayıcı "id" ("msg_id") alınan bu işlevi son iletiyi görüntüler, bu tanımlayıcı sonra bir parametre olarak ikinci php dosyası gönderilir ajax isteği , bu arada, div konteyner içeriğini değiştirmek güzel olan "More" bağlantı etkisi "yükleme" ile animasyonlu gif sadece zaman öldürmek için.
Ajax isteği başarılı olursa (uygulama özelliği başarılı) biz "morebutton" Tüm div kaldırmak ve kapsayıcı div kullanarak "more_update" da (diğer mesajları içeren) HTML yanıt eklemek ekleyin .
 |
ASP Zero (Ebook)
Sıfırdan Microsoft ASP ve VBScript öğrenilmesi. Sadece 29 de €. |
 |
Javascript (Ders)
Istemci tarafı komut dosyası için kılavuz tamamlayın. En düşük € 39. |
 |
PHP (Ders)
Dinamik Web siteleri oluşturmak için tam ders. 49 € düşük. |