Όπως μπορείτε να δείτε, όλα είναι απλά. Τι πρέπει όμως να προσέξεις; Και πρέπει να δώσετε προσοχή στο div με id="smartPortfolio", id="moreButton" και id="loadingDiv", καθώς χρησιμοποιούνται στο σενάριο, το οποίο μας βοηθά να φορτώνουμε περιεχόμενο από άλλες σελίδες. Το SmartPortfolio είναι ένα «δοχείο» για το χαρτοφυλάκιό μας. MoreButton - αυτό θα είναι το κουμπί μας, όταν κάνετε κλικ σε αυτό, φορτώνεται ένα άλλο μέρος του χαρτοφυλακίου. LoadingDiv - η περιοχή στην οποία θα εμφανίζεται το κείμενο όταν ανοίξει πλήρως το χαρτοφυλάκιο ή όταν παρουσιαστεί κάποιο είδος σφάλματος.

Για παράδειγμα, ορισμένοι από τους αναγνώστες θα εξακολουθήσουν να προσπαθήσουν να δοκιμάσουν αυτό το σενάριο όχι στον διακομιστή, αλλά απλώς να ανοίξουν το αρχείο ευρετηρίου στο πρόγραμμα περιήγησης. Σε αυτήν την περίπτωση, θα δουν ένα μήνυμα σφάλματος. Επιπλέον, σε πολύ αργή σύνδεση, μπορεί να χρειαστεί χρόνος για τη λήψη αρχείων και για να καταλάβει ο χρήστης ότι η διαδικασία βρίσκεται σε εξέλιξη, μπορείτε να εισάγετε ένα μήνυμα εκεί ότι φορτώνονται ή τοποθετούνται δεδομένα (μια εικόνα, μια ένδειξη προόδου ή κάτι άλλο).

Δεν έγραψα το σενάριο μόνος μου, αλλά το βρήκα σε έναν από τους ιστότοπους, ο συγγραφέας αναφέρεται στον πηγαίο κώδικα, για όσους ενδιαφέρονται, ρίξτε μια ματιά. Επειδή δεν είναι πολύ μεγάλο, θα τα δώσω όλα, αλλά αν σκοπεύετε να χρησιμοποιήσετε τα ίδια ονόματα αναγνωριστικών και διαδρομές αρχείων με τα δικά μου, τότε δεν μπορείτε καν να το εξετάσετε, αλλά απλώς να το συμπεριλάβετε πριν από την ετικέτα κλεισίματος σώματος (στο υποσέλιδο).

Για όσους σχεδιάζουν να κάνουν αλλαγές, εδώ είναι το ίδιο το σενάριο:

var lazyload = τεμπέλικο φορτίο || () (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + σελίδα + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, success: function(response) ( if ( !response || answer.trim() == "ΚΑΝΕΝΑ") ( $(buttonId).fadeOut(); $(loadingId).text("Το χαρτοφυλάκιο έχει φορτωθεί πλήρως"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Λυπούμαστε, κάτι πήγε στραβά με το αίτημα. Ανανεώστε τη σελίδα."); ) )); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1;); ))(jQuery, lazyload) ;

Έτσι, τώρα αξίζει να μιλήσουμε για εκείνα τα αρχεία από τα οποία θα φορτώσουμε πληροφορίες. Το σενάριο υποθέτει ότι αυτά θα είναι αρχεία με ονόματα 2.html…5.html, κ.λπ. που περιέχει τις πληροφορίες μας. Για παράδειγμα, το αρχείο μου 2.html φορτώνεται πρώτα και έχει το ακόλουθο περιεχόμενο:

Στη δομή του ιστοτόπου μου, οι σελίδες από τις οποίες θα ληφθούν πληροφορίες για μεταγενέστερη φόρτωση όταν πατηθούν, βρίσκονται στο φάκελο σελίδων. Υπάρχουν τρία αρχεία, δύο από τα οποία είναι γεμάτα και το τελευταίο είναι κενό. Υποθέτει τη λογική του σεναρίου.

Η διαδρομή στο σενάριο καθορίζεται ως εξής:

Var url = "./pages/" + page + ".html";

Εάν σκοπεύετε να χρησιμοποιήσετε μια διαφορετική διαδρομή, φροντίστε να την αντικαταστήσετε στο σενάριο. Επιπλέον, εάν χρησιμοποιήσατε άλλα αναγνωριστικά, τότε θα πρέπει να επαναπροσδιοριστούν στο σενάριο. Ακριβώς εδώ:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

Και, όπως είπα, πριν από το κλείσιμο της ετικέτας σώματος, συμπεριλαμβάνουμε το ίδιο το σενάριο:

Όπως αυτό στο σελίδα προορισμούΜπορείτε να εφαρμόσετε lazy loading. Στείλτε περισσότερα θέματα για τα οποία θα θέλατε να διαβάσετε ένα άρθρο στο ιστολόγιο. Στο μέτρο του δυνατού, θα προσπαθήσω να δημοσιεύσω όχι το προγραμματισμένο υλικό, αλλά αυτό για το οποίο ρωτάτε στην ενότητα «Οι προτάσεις σας». Και για σήμερα, αυτό είναι όλο. Αντίο!

AJAX και jQuery. Ενημέρωση δυναμικού περιεχομένου. Βασικά (αλλάζει από 01/03/2012)

Αυτό το άρθρο θα συζητήσει τι είναι το AJAX και το jQuery και θα εξετάσει παραδείγματα για το πώς να τα χρησιμοποιήσετε.

Το AJAX είναι ένα εργαλείο για τη δημιουργία διαδικτυακών εφαρμογών που επικοινωνούν με τον διακομιστή στο παρασκήνιο. Σε αυτήν την περίπτωση, ο χρήστης λαμβάνει μια εφαρμογή με ενημέρωση δυναμικού περιεχομένου, χωρίς να φορτώνει ξανά ολόκληρη τη σελίδα.

jQuery - JavaScript-framework, μια βιβλιοθήκη που σας επιτρέπει να χρησιμοποιείτε πιο άνετα ορισμένες από τις δυνατότητες του Javascript, όπως: δημιουργία οπτικά εφέ, χειρισμός συμβάντων, χειραγώγηση DOM και υποστήριξη AJAX.

Κατεβάστε τελευταία έκδοση jQuery και μάθετε όλες τις δυνατότητες αναλυτικά στον ιστότοπο του προγραμματιστή: http://www.jquery.com/

Σε αυτό το άρθρο, θα εξετάσουμε μόνο μία συνάρτηση στη βιβλιοθήκη jQuery, τη συνάρτηση $.ajax(). Αυτή η δυνατότητα μας επιτρέπει τόσο να στέλνουμε δεδομένα στον διακομιστή όσο και να λαμβάνουμε απαντήσεις από τον διακομιστή, όλα στο παρασκήνιο, χωρίς να φορτώνουμε ξανά τη σελίδα. Η ρύθμιση για τη λήψη ή τη μετάδοση δεδομένων εξαρτάται από τις παραμέτρους με τις οποίες καλείται η συνάρτηση $.ajax(). Τα κυριότερα θα συζητηθούν παρακάτω. Μπορείτε να διαβάσετε περισσότερα για τις παραμέτρους στο εγχειρίδιο jQuery.

Ας περάσουμε σε παραδείγματα.

Σπουδαίος!
Για να λειτουργήσουν σωστά τα παραδείγματα, πρέπει:
1. Όλα τα αρχεία πρέπει να είναι γραμμένα σε κωδικοποίηση UTF-8.
2. Τα σενάρια πρέπει να εκτελούνται στον διακομιστή web και όχι στο πρόγραμμα περιήγησης ως αρχείο.

Παράδειγμα 1: Δυναμική ενημέρωση περιεχομένου σε χρονόμετρο

Ας δημιουργήσουμε ένα απλό πρόγραμμα που εμφανίζεται τρέχουσα ώρα, ενημερώνεται μία φορά το δευτερόλεπτο με χρονόμετρο. Ένα χαρακτηριστικό αυτού του προγράμματος θα είναι η λήψη πληροφοριών για την τρέχουσα ώρα από άλλο εξωτερικό αρχείο.

Το περιεχόμενο του αρχείου index.html.

Υπάρχουν πολλά χαρακτηριστικά στον κώδικα, ας τα εξηγήσουμε.

1. Η βιβλιοθήκη jQuery περιλαμβάνεται στην κεφαλίδα αρχείο HTML, αυτή η γραμμή είναι γραμμένη για αυτό.

Το ίδιο το αρχείο jquery.js βρίσκεται στον ίδιο φάκελο με τα παραδείγματα αρχείων.

2. Δημιουργείται ένα κοντέινερ στο σώμα του εγγράφου στο οποίο θα φορτώσουμε το περιεχόμενο.

3. Περίεργο με την πρώτη ματιά, η συνάρτηση $(document).ready() απαιτείται για τη σωστή Το jQuery λειτουργεί, άλλωστε, σε αυτό μπορούμε να κάνουμε όλες τις προετοιμασίες για να λειτουργήσει το πρόγραμμα. Στην περίπτωσή μας, καλούμε τη συνάρτηση show(), η οποία έχει μηχανισμό λήψης περιεχομένου από άλλο αρχείο, και ρυθμίζουμε ένα χρονόμετρο έτσι ώστε η συνάρτηση show() να καλείται μία φορά ανά δευτερόλεπτο.

$(document).ready(function()( show(); setInterval("show()",1000); ));

4. Η συνάρτηση show() αποτελείται από μια κλήση στη συνάρτηση $.ajax() με συγκεκριμένο αριθμό παραμέτρων, η οποία μας επιτρέπει να λαμβάνουμε πληροφορίες από ένα εξωτερικό αρχείο στον διακομιστή στο παρασκήνιο.

$.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html); ) ));

Εξετάστε τις παραμέτρους της συνάρτησης $.ajax() που χρησιμοποιείται.

Url: "time.php" Αναφέρεται στο αρχείο time.php για τη λήψη του περιεχομένου. cache: false Τα αποτελέσματα του ερωτήματος δεν αποθηκεύονται προσωρινά. success: function(html)( $("#content").html(html); ) Εάν το αίτημα πετύχει, ο έλεγχος περνά σε μια συνάρτηση που λαμβάνει το περιεχόμενο ως παράμετρο και γράφει το κοντέινερ της. Η εγγραφή στο κοντέινερ γίνεται σε αυτή τη γραμμή:
$("#content").html(html);

Τα περιεχόμενα του αρχείου time.php.

Ο σκοπός του αρχείου time.php είναι να εμφανίζει την τρέχουσα ώρα στην οθόνη.

Κατεβάστε αρχεία πηγήςπαράδειγμα (16,6 kb):

Παράδειγμα 2: Δυναμική ενημέρωση περιεχομένου με βάση την επιλογή του χρήστη

Ένα πρόγραμμα που φορτώνει δυναμικά περιεχόμενο της επιλογής του χρήστη.

Το περιεχόμενο του αρχείου index.html.

Ποια σελίδα θα θέλατε να ανοίξετε;

Στο σώμα του εγγράφου δημιουργείται μια φόρμα που έχει δύο κουμπιά, μέσω των οποίων ο χρήστης επιλέγει το περιεχόμενο που επιθυμεί. Και ένα δοχείο για τη φόρτωση περιεχομένου.

Το συμβάν κλικ κουμπιού σελίδα 1 αντιμετωπίζεται από τη συνάρτηση $("#btn1").click() και το συμβάν κλικ στο κουμπί σελίδα 2 αντιμετωπίζεται από τη συνάρτηση $("#btn2").click().

Τα περιεχόμενα των αρχείων page1.html και page2.html που φορτώνονται δυναμικά στην περιοχή περιεχομένου είναι απλές σελίδες htmlή αρχεία κειμένουμε περιεχόμενο.

Λήψη δειγμάτων αρχείων πηγής (18,4 kb):

Παράδειγμα 3: Αποστολή δεδομένων στο διακομιστή στο παρασκήνιο και λήψη περιεχομένου

Εξετάστε ένα παράδειγμα που στέλνει το καταχωρημένο όνομα χρήστη στον διακομιστή. Ο διακομιστής, όταν λαμβάνει ένα όνομα, εκδίδει έναν χαιρετισμό και μετράει τον αριθμό των χαρακτήρων στο όνομα που εισάγατε.

Το περιεχόμενο του αρχείου index.html.

Εισάγετε το όνομά σας:

Μια φόρμα για την εισαγωγή ονόματος χρήστη έχει δημιουργηθεί στο σώμα του εγγράφου. Και ένα κοντέινερ για τη φόρτωση δυναμικού περιεχομένου.

Σημειώστε ότι η ίδια η φόρμα δεν έχει τα συνηθισμένα πεδία ενεργειών και μεθόδων. Η συνάρτηση $("#myForm").submit() λειτουργεί ως ο χειριστής συμβάντων για κλικ στο κουμπί "Υποβολή". Ας εξετάσουμε αυτή τη λειτουργία.

$("#myForm").submit(function()( $.ajax(( type: "POST", url: "greetings.php", data: "username="+$("#username").val( ), επιτυχία: function(html)( $("#content").html(html); ) )); return false; ));

Όπως μπορούμε να δούμε, η κύρια εργασία σχετίζεται και πάλι με τη συνάρτηση $.ajax(). Αυτή τη φορά εμφανίζονται Επιπλέον επιλογές, δεν λαμβάνεται υπόψη στα παραδείγματα 1 και 2. Συγκεκριμένα:

Τύπος: "POST" Τύπος μεταφοράς δεδομένων. data: "username="+$("#username").val() Οι παράμετροι μεταβιβάστηκαν στον διακομιστή. Σε αυτήν την περίπτωση, μεταβιβάζουμε τα περιεχόμενα του πεδίου ονόματος χρήστη - το όνομα χρήστη. Γενικά, οι παράμετροι γράφονται με τον ίδιο τρόπο όπως στο Μέθοδος GET, σε μία γραμμή, για παράδειγμα:
δεδομένα: "username=Vasya&age=18&sex=male"

Σημειώστε ότι στο τέλος γράφεται η γραμμή:

επιστροφή ψευδής? Αυτό γίνεται έτσι ώστε η φόρμα να μην προσπαθεί να μεταφέρει δεδομένα στο αρχείο από το οποίο εκκινείται και να μην επαναφορτωθεί η σελίδα.

Περιεχόμενα του αρχείου greetings.php.

".$_REQUEST["όνομα χρήστη"]."!
"; echo "Το όνομά σας έχει γράμματα: ".strlen($_REQUEST["όνομα χρήστη"]).""; ?>

Εμφανίζουμε έναν χαιρετισμό στην οθόνη και μετράμε τον αριθμό των χαρακτήρων στο όνομα.

Λήψη δειγμάτων αρχείων πηγής (16,8 kb):

Αξίζει να πούμε εν κατακλείδι ότι εκτός από τα προφανή πλεονεκτήματα της δημιουργίας σελίδων χρησιμοποιώντας δυναμικά ενημερωμένο περιεχόμενο, υπάρχουν ορισμένα μειονεκτήματα που πρέπει να ληφθούν υπόψη κατά την ανάπτυξη ενός ιστότοπου, και συγκεκριμένα:

1. Σε σελίδες με ενημερώσεις δυναμικού περιεχομένου, το κουμπί "Πίσω" στο πρόγραμμα περιήγησης δεν λειτουργεί σωστά.

2. Οι σελίδες με ενημερώσεις δυναμικού περιεχομένου δεν αλλάζουν τη διεύθυνση URL με βάση το περιεχόμενό τους, επομένως δεν μπορούν να τοποθετηθούν σελιδοδείκτες.

3. Οι σελίδες με ενημερώσεις δυναμικού περιεχομένου δεν ευρετηριάζονται μηχανές αναζήτησης, επειδή δεν εκτελούν εντολές JavaScript.

Αυτές οι ελλείψεις μπορούν να εξαλειφθούν μέσω προγραμματισμού. Αυτό το άρθρο δεν καλύπτει τέτοιες μεθόδους.

Πάει καιρός από τότε που δημοσίευσα κανέναν κωδικό. Σήμερα θα διορθώσω την κατάσταση και θα δώσω μερικά χρήσιμα αποσπάσματα jQuery που σίγουρα θα χρειαστείτε στους ιστότοπούς σας.

Δεν θα μπω στη θεωρία, όλη η τεκμηρίωση του jQuery βρίσκεται στον επίσημο ιστότοπο της βιβλιοθήκης. Θα σας υπενθυμίσω απλώς τι είναι το jQuery.

jQuery είναι Βιβλιοθήκη JavaScriptεστιάζοντας σε Αλληλεπίδραση JavaScriptκαι HTML. Η βιβλιοθήκη jQuery διευκολύνει την πρόσβαση σε οποιοδήποτε στοιχείο DOM, την πρόσβαση στα χαρακτηριστικά και το περιεχόμενο των στοιχείων DOM και τον χειρισμό τους. Η βιβλιοθήκη jQuery παρέχει επίσης ένα βολικό API για εργασία με AJAX.

Λοιπόν πάμε!

1. Ομαλή κύλιση στην κορυφή της σελίδας

Κανένας ιστότοπος δεν είναι πλήρης χωρίς αυτό. Μόλις 4 γραμμές κώδικα θα επιτρέψουν στους επισκέπτες σας να κάνουν ομαλή κύλιση ολόκληρης της σελίδας προς τα επάνω με ένα κλικ.

$("a").click(function() ( $("html, body").animate(( scrollTop: 0 ), "slow"); return false; ));

2. Διπλότυπες κεφαλίδες πίνακα

Για να βελτιώσετε την αντίληψη και την αναγνωσιμότητα των πινάκων σας, μπορείτε να αντιγράψετε τους τίτλους τους κάτω από τον πίνακα. Θα φαινόταν ασήμαντο, αλλά είναι πολύ βολικό σε πολύπλοκα και μεγάλα τραπέζια που δεν χωρούν σε μία οθόνη.

$tfoot = $(" "); $($("thead").clone(true, true).children().get().reverse()).each(function()($tfoot.append($(this)); ) $tfoot.insertAfter("table thead");

3. Φόρτωση εξωτερικών δεδομένων

ΑΠΟ jQueryΕίναι πολύ εύκολο να ανεβάσετε εξωτερικό περιεχόμενο σε ιστοσελίδες. Μπορεί να εμφανιστεί απευθείας σε μπλοκ DIV, όπως στο παρακάτω παράδειγμα.

$("#content").load("somefile.html", function(response, status, xhr) ( // χειρισμός σφαλμάτων if(status == "σφάλμα") ( $("#content").html(" Παρουσιάστηκε σφάλμα: " + xhr.status + " " + xhr.statusText); ) ));

4. Ίσο ύψος στήλης

Είναι γνωστό ότι για να ευθυγραμμιστούν τα μπλοκ σε ύψος τυπικά μέσαΤο HTML και το CSS δεν είναι τόσο εύκολο. Λίγες μόνο γραμμές κώδικα παρακάτω θα σας επιτρέψουν να κάνετε το ύψος όλων των μπλοκ ίσο με το ύψος του μεγαλύτερου μπλοκ.

varmaxheight = 0; $("div.col").each(function()( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").height(maxheight);

5. Πίνακας ζέβρας

Όπως γνωρίζετε, η αντίληψη και η αναγνωσιμότητα του πίνακα θα είναι αισθητά υψηλότερη εάν κάνετε πολύχρωμη εναλλαγή σειρών. Αυτό είναι πολύ εύκολο να εφαρμοστεί με το jQuery.

$(document).ready(function()( $("table tr: even").addClass("stripe"); ));

6. Μερική ανανέωση σελίδας

Με το jQuery είναι πολύ εύκολο να εφαρμόσετε μια μπλοκ (μερική) ανανέωση σελίδας. Για παράδειγμα, ο παρακάτω κώδικας θα σας επιτρέψει να ενημερώνετε αυτόματα το μπλοκ #refresh κάθε 10 δευτερόλεπτα.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // χιλιοστά του δευτερολέπτου για αναμονή

7. Προφόρτωση εικόνας

Αυτός ο κώδικας σάς επιτρέπει να φορτώνετε εικόνες στο παρασκήνιο χωρίς φόρτωση κατά την προβολή της σελίδας. Απλώς αναφέρετε στη γραμμή 7 τις εικόνες που πρέπει να προφορτώσετε.

$.preloadImages = function() ( for(var i = 0; i ").attr("src", ορίσματα[i]); ) ) $(document).ready(function() ($.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));

8. Άνοιγμα εξωτερικών συνδέσμων σε νέα παράθυρα/καρτέλες

Αυτό το απόσπασμα αναγκάζει όλους τους εξωτερικούς συνδέσμους στη σελίδα να ανοίξουν σε νέο παράθυρο του προγράμματος περιήγησης. Το σενάριο καθορίζει τυπικά τον τρέχοντα τομέα του ιστότοπου και λειτουργεί εάν δεν ταιριάζει με τη διεύθυνση του συνδέσμου.

$("a").each(function() ( var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(this ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));

9. Αποκλεισμός σε ολόκληρο το παράθυρο του προγράμματος περιήγησης

Αυτό το σενάριο θα σας βοηθήσει να τεντώσετε το μπλοκ για να γεμίσετε την οθόνη του προγράμματος περιήγησης. Ιδανικό για τροπικά παράθυρα και διαλόγους.

var winWidth = $(window).width(); var winHeight = $(window).height(); $("div").css(( "width": winWidth, "height": winHeight, )); $(window).resize(function()( $("div").css(( "width": winWidth, "height": winHeight, )); ));

10. Έλεγχος πολυπλοκότητας κωδικού πρόσβασης

Εάν επιτρέπετε στους επισκέπτες του ιστότοπού σας να ορίζουν τους δικούς τους κωδικούς πρόσβασης, θα ήταν καλή ιδέα να ελέγξετε την πολυπλοκότητά του και να ενημερώσετε τον επισκέπτη σχετικά.

Αρχικά, ας γράψουμε το τμήμα HTML του κώδικα:

Και με τη βοήθεια του παρακάτω κωδικού, θα ελέγξουμε τον εισαγόμενο κωδικό πρόσβασης και θα εμφανίσουμε πληροφορίες στον επισκέπτη: ο κωδικός πρόσβασής του είναι περίπλοκος, μεσαίος ή αδύναμος και επίσης θα ελέγξουμε αν είναι πολύ σύντομος.

$("#pass").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var αρκετάRegex = νέο RegExp("( ?=.(6,)).*", "g"); if (false == αρκετάRegex.test($(this).val())) ( $("#passstrength").html("Περισσότεροι χαρακτήρες "); ) αλλιώς εάν (strongRegex.test($(this).val())) ($("#passstrength").className = "ok"; $("#passstrength").html("Ισχυρό!" ); ) αλλιώς if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("Medium!") ; ) else ( $("#passstrength").className = "σφάλμα"; $("#passstrength").html("Αδύναμο!"); ) επιστροφή true; ));

11. Αλλαγή μεγέθους εικόνας με jQuery

Φυσικά, είναι πιο λογικό να αλλάξετε το μέγεθος των εικόνων στην πλευρά του διακομιστή χρησιμοποιώντας PHP και GD, αλλά υπάρχουν περιπτώσεις που αυτό πρέπει να γίνει από την πλευρά του πελάτη. Και το jQuery θα μας βοηθήσει ξανά σε αυτό.

$(window).bind("load", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $( this).width(); var ύψος = $(this).height(); if(width > maxWidth)( ratio = maxWidth / πλάτος; $(this).css("width", maxWidth); $(this) .css("ύψος", αναλογία ύψους *); ύψος = ύψος * αναλογία; ) var πλάτος = $(this).width(); var ύψος = $(this).height(); if(height > maxHeight)( αναλογία = μέγιστο Ύψος / ύψος; $(αυτό).css("ύψος", μέγ.Ύψος); $(αυτό).css("πλάτος", αναλογία πλάτους *); πλάτος = πλάτος * αναλογία; "#contentpage img").show(); // IMAGE RESIZE ));

12. Φόρτωση περιεχομένου κατά την κύλιση προς τα κάτω στη σελίδα

Αυτή η τεχνική αναφέρεται συχνά ως άπειρη κύλιση. Το περιεχόμενο φορτώνεται καθώς ο χρήστης κάνει κύλιση στη σελίδα. Αυτό είναι αρκετά εύκολο να εφαρμοστεί με τον παρακάτω κώδικα.

var loading = false; $(window).scroll(function()( if((($(window).scrollTop()+$(window).height())+250)>=$(document).height())( if( φόρτωση == false)( φόρτωση = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max"). val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); loading = false; )); ) ) )); $(document).ready(function() ( $("#loaded_max").val(50); ));

13. Επαληθεύστε τη μεταφόρτωση εικόνας

Συχνά συμβαίνει να πρέπει να ελέγξετε εάν μια εικόνα έχει φορτωθεί αυτήν τη στιγμή ή όχι. Και το jQuery θα μας βοηθήσει ξανά σε αυτό.

Var imgsrc = "img/image1.png"; $(" ").load(function () ( alert("image loaded"); )).error(function () ( alert("error loading image"); )).attr("src", imgsrc);

14. Ταξινόμηση αλφαβητικά

Εάν πρέπει να ταξινομήσετε δυναμικά μια λίστα αλφαβητικά, αυτό το μικρό απόσπασμα σίγουρα θα σας βοηθήσει.

$(function() ( $.fn.sortList = function() ( var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Αποθήκευση - χρήσιμο.

Όλα τα τελευταία και πιο ενδιαφέροντα από τον κόσμο του WordPress στο κανάλι μου στο Telegram. Εγγραφείτε!