"Περισσότερα" Twitter στυλ κουμπί
Σελίδα 1 από 2
Σε αυτό το άρθρο θα εξηγήσω πώς να αναδημιουργήσει την επίδραση της "Περισσότερα" για να Twitter χρησιμοποιώντας το jQuery βιβλιοθήκη.
Το κουμπί που θέλουμε να αναδημιουργήσει, για τους αμύητους, σας επιτρέπει να διευρύνει τον κατάλογο των μηνυμάτων εμφανίζεται από προεπιλογή, χωρίς να χρειάζεται να ανανεώσετε τη σελίδα (η οποία είναι δυνατή χάρη στην τεχνολογία Ajax χρησιμοποιείται όλο και περισσότερο στο περιβάλλον του Web 2.0).
Ξεκινάμε με τη δημιουργία μιας βάσης δεδομένων δοκιμής αποτελείται από ένα ενιαίο πίνακα:
Δημιουργία των θέσεων ΠΙΝΑΚΑΣ ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Κείμενο μηνύματος )?Όπως μπορείτε να δείτε στον πίνακα που μόλις κατασκευάστηκε αποτελείται από δύο μόνο τομείς:
- msg_id η οποία θα προσδιορίσει το μήνυμα?
- και το μήνυμα που περιέχει το κείμενο?
Για την καλύτερη εξυπηρέτησή μου δημιούργησα ένα αρχείο php (που θα χρησιμοποιηθούν στην ένταξη) στην οποία μπορώ να κάνω μόνο τη σύνδεση με τη βάση δεδομένων και εγώ αυτό που ονομάζεται "dbconfig.php"
<? Php
$ Conn mysql_connect = ("host", "username" "PASSWORD") ή να πεθάνουν (mysql_error ())?
mysql_select_db ("NAME_DB", $ conn) ή να πεθάνουν (mysql_error ())?
;>
Όπως αναφέρεται στο αρχείο "dbconfig.php" θα πρέπει να περιλαμβάνονται στα αρχεία που δημιουργούμε, ώστε να μην ξαναγράψουμε τον ίδιο κωδικό πολλές φορές.
Για να εκτελέσετε την ισχύ που χρειάζεστε για να δημιουργήσετε δύο αρχεία:
- το πρώτο που χρησιμοποιείται για την εμφάνιση του πρώτου "n" μηνύματα?
- και ένα δεύτερο που θα γίνει Ajax αιτήματα (που εφαρμόζονται με jQuery) για να εμφανιστεί το «επόμενο μήνυμα".
<html>
<head>
Περισσότερα <title> στυλ Button Twitter </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Περισσότερα »). Κάντε κλικ στο κουμπί (λειτουργία () {
var στοιχείο = $ (αυτή)?
var msg = element.attr ('id')?
$ ('# Morebutton ») HTML (« <img src="loading.gif" />').?
$. Ajax ({
Τύπος: «POST»,
url: «more_ajax.php»,
Ημερομηνία: «lastmsg = '+ msg,
cache: ψευδείς,
επιτυχία: λειτουργία (html) {
$ ('# Morebutton ») Remove ().?
$ ('# More_updates ») Προσάρτηση (html).?
}
})?
επιστροφή ψευδείς?
})?
})?
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
περιλαμβάνουν («dbconfig.php ')?
$ Sql_check = mysql_query ("SELECT * FROM Για περισσότερο msg_id ΟΡΙΟ DESC 2")?
ενώ ($ γραμμή = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ γραμμή ['msg_id']?
$ Μήνυμα = $ γραμμή ['μήνυμα']?
;>
<Div id = "<Php echo $ msg_id?;>" Class = "boxMsg">
<span style="padding:5px;"> <php echo $ msg??> </ p>
</ P>
<? Php
}
;>
<div id="more_updates"> </ p>
<div id="morebutton"> <a id = "<php echo $ msg_id?;>" class = "περισσότερο" href = "#"> Περισσότερα </ a> </ p>
</ P>
</ Body>
</ Html>
Όπως μπορείτε να δείτε μετά την προβολή των 2 πρώτων θέσεων (ταξινομημένο κατά "msg_id" κατά φθίνουσα σειρά), υπάρχει ένα κενό div με id "more_update" (θα υπάρχουν "συσκευασμένα" το επόμενο μήνυμα) και ένα div που αντιπροσωπεύει την επόμενη σύνδεσμο «Περισσότερα» στην οποία μας συνδέουν - μια μέθοδος που χρησιμοποιούν jQuery - τα μηνύματα που ζητά την ανάληψη δράσης.
Header (<head> ...</ head>) του εγγράφου, μετά την κλήση του jQuery βιβλιοθήκη, θα περιγράφεται η λειτουργία JavaScript που συνδέονται με το σύνδεσμο "Περισσότερα" (η λειτουργία αυτή ονομάζεται με το « συμβάν κλικ ).
Με αυτή τη λειτουργία που λαμβάνονται από το "id" του αναγνωριστικού συνδέσμου ("msg_id") εμφανίζει το τελευταίο μήνυμα, αυτό το αναγνωριστικό αποστέλλεται στο δεύτερο αρχείο php ως παράμετρος μετά το αίτημα ajax , εν τω μεταξύ, αντικαταστήστε το περιεχόμενο του δοχείου div σύνδεσμο "Περισσότερα" με ένα όμορφο animated gif, με ισχύ «φόρτωση» , ακριβώς για να σκοτώσει την ώρα του.
Αν η αίτηση Ajax ήταν επιτυχής (επιτυχία του ακινήτου αίτηση) αφαιρούμε όλα τα div "morebutton" και τοποθετήστε το HTML απάντηση (που περιέχει άλλα μηνύματα) στο div εμπορευματοκιβώτιο "more_update" χρησιμοποιώντας το append .
 |
ASP Zero (ebook)
Μαθαίνοντας Microsoft ASP και VBScript από το μηδέν. Σε μόνο 29 €. |
 |
Javascript (Μάθημα)
Πλήρης οδηγός για δέσμες ενεργειών στην πλευρά του πελάτη. Από 39 €. |
 |
PHP (Μάθημα)
Η πλήρης σειρά μαθημάτων για τη δημιουργία δυναμικών ιστοσελίδων. Από 49 €. |