Skitter

Ένα image slides που μπορεί να δεχτεί μεγάλο βαθμό παραμετροποιήσεων με πολλές διαφορετικές εναλλαγές εικόνων. Ένα άλλο χαρακτηριστικό που μου αρέσει σε αυτό το jQuery plug-in είναι η δυνατότητα του φορτώσει εικόνες από ένα αρχείο xml.

Σελίδα για το skitter

Awkward Showcase

Το Awkward Showcase είναι ένα plugin για το jQuery javascript framework. Μερικοί συνηθίζουν να το αποκαλούν slider για περιεχόμενο ιστοσελίδων. Στην πραγματικότητα μπορεί να κάνει περισσότερα πράγματα από το να κάνει slide το περιεχόμενο. Για παράδειγμα μπορείτε να έχετε πάνω στο slide show tool tips, να ενεργοποιήσετε την προβολή εικονιδίων, να επιτρέψετε στο plugin να καθορίζει μόνο του το ύψος του και άλλα πολλά.

Σελίδα για το Awkward Showcase

Photoswipe

Αυτή η image gallery είναι σχεδιασμένη για κινητά τηλέφωνα και για συσκευές με οθόνη αφής, όπως είναι για παράδειγμα τα iPhone, iPad, Android, Blackberry 6 και φυσικά και για όλες τις εφαρμογές για απλούς υπολογιστές.

Σύνδεσμος για το photoswipe

jqFancyTransitions

Ένα πολύ εύκολο στη χρήση plugin για jQuery για να προβάλετε φωτογραφίες σαν slide show με ωραία εφέ εναλλαγής εικόνων.

Σύνδεσμος για το jqFancyTransitions

jQuery Slider2

Ένα απλό και ελαφρύ plugin για jQuery για να δημιουργήσετε slideshow με κείμενο μέσα σε αυτό.

Σύνδεσμος για το jQuery Slider2

jQuery Image Gallery

Image gallery σε συνδυασμό με το εφέ του Lightbox καθώς επίσης και με δυνατότητα για slideshow μέσω του jQuery UI

Σύνδεσμος για το jQuery Image Gallery

Η δομή των δεδομένων για το Google Maps API μπορεί να βελτιωθεί πάρα πολύ με τη βοήθεια του GMAP3 γιατί έχει μια σειρά από συναρτήσεις που κάνουν τη ζωή του web developer ποιο εύκολη. Μερικές από τις συναρτήσεις που έχει είναι οι ακόλουθες : getAddress, getLatlng, getRoute και πολλές ακόμα.

Πάρτε για παράδειγμα το jQuery Masonry plugin (θα το δούμε στη συνέχεια), το οποίο μετατρέπει ένα κανονικό layout σε ένα πραγματικά συναρπαστικά ευέλικτο layout με αυτόματη στοίχιση για κάθε στοιχείο, με αποτέλεσμα το τελικό layout να παραμένει καθαρό και περιποιημένο.

Στη συνέχεια αυτού του άρθρου θα δείτε 6 jQuery plugins που θα σας βοηθήσουν να δημιουργήσετε σύνθετα web layout.

UI.Layout

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

jQuery Masonry

Ένα δυναμικό plugin για jQuery

jLayout

Το jLayout σας παρέχει τέσσερις αλγόριθμους για να στοιχίσετε τα στοιχεία στην σελίδα σας.

jQuery pageSlide

jQSlickWrap

Το jQSlickWrap είναι ένα plugin για jQuery που σας επιτρέπει εύκολα και με ακρίβεια να καλύψετε το καινό που δημιουργεί το κείμενο σας γύρο από την περιοχή μιας εικόνας.

Columnizer

Το Columnizer θα αλλάξει το layout του περιεχομένου της σελίδας σας έτσι που να μοιάζει στη μορφή μιας εφημερίδας. Μπορείτε να ορίσετε το πλάτος κάθε στήλης ή ένα στατικό σύνολο από στήλες. Και φυσικά είναι εύκολο στη χρήση !

Σε αυτό το άρθρο θα σας παρουσιάσουμε plug-ins για πλέγματα δεδομένων που μπορείτε να τα χρησιμοποιήσετε στις σελίδες σας. Με τη βοήθεια της JavaScript μεταμορφώνουν κανονικούς πίνακες σε πλέγματα δεδομένων όπως αυτό του Excel, σε συνδυασμό με μια μεγάλη ποικιλία χαρακτηριστικών και δυνατοτήτων.

Ρίξτε λοιπόν μια ματιά στη λίστα με τα 6 καλύτερα plug-ins για data grids τα οποία είναι εξοπλισμένα με πολλά χαρακτηριστικά και θα σας φανούν πραγματικά πολύ χρήσιμα.

FlexiGrid

Ένα ελαφρύ αλλά δυνατό data grid με στήλες που το πλάτος τους προσαρμόζετε στις ανάγκες του τελικού χρήστη και κυλιόμενα δεδομένα, και επιπλέον με τη δυνατότητα να συνδέσετε ένα xml ή json αρχείο με τα δεδομένα που θέλετε να προβάλετε.

Σημαντικά χαρακτηριστικά

• Προσαρμόσιμο πλάτος και ύψος για γραμμές και στήλες
• Τα δεδομένα μπορούν να ταξινομηθούν ανά στήλη.
• Μπορεί να μετατρέψει ένα απλό table σε data grid
• Δυνατότητα σύνδεσης μέσω AJAX σε πηγές δεδομένων από αρχεία xml ή jsonn
• Σελιδοποίηση
• Προβολή/απόκρυψη στηλών
• Γραμμή εργαλείων
• Αναζήτηση ανάμεσα στα δεδομένα
• Προσβάσιμη API

EditableGrid

Το EditableGrid είναι μια βιβλιοθήκη JavaScript ανοικτού κώδικα που ως σκοπό έχει τη μετατροπή απλών html πινάκων σε ένα εξειδικευμένο επεξεργάσιμο στοιχείο. Στοχεύει στην απλότητα, καθώς απαιτεί μόνο μερικές γραμμές κώδικα για να μπορέσετε να μετατρέψετε ένα πίνακα σε ένα ισχυρό data grid.

Σημαντικά χαρακτηριστικά

• Μπορεί να φορτώσει δεδομένα από αρχεία XML ή από ένα html table
• Μπορεί να δεχτεί διαφορετικούς τύπους δεδομένων ανά στήλη
• Επεξεργασία δεδομένων με κατάλληλο επεξεργαστή, ανάλογα με τον τύπο δεδομένων της στήλης
• Δυνατότητα να δηλώσετε ένα προκαθορισμένο σύνολο τιμών για ένα πεδίο ή για τα πεδία μιας στήλης
• Ενσωματωμένος έλεγχος εγκυρότητας δεδομένων για κάθε τύπο δεδομένων
• Εισαγωγή και διαγραφή γραμμών
• Callbacks για κάθε συμβάν

jQGrid

Το jQGrid είναι ένα εργαλείο JavaScript που υποστηρίζει πλήρως την τεχνολογία AJAX και παρέχει λύσεις στην παρουσίαση και επεξεργασία δεδομένων στο διαδίκτυο. Ενώ το grid ουσιαστικά εκτελείτε στο τερματικό του χρήστη, μπορεί να μεταφέρει δεδομένα μέσω της τεχνολογίας AJAX από το server από κάθε γλώσσα προγραμματισμού που μπορεί να εκτελεστεί στη μεριά του server, συμπεριλαμβανομένων και των PHP, ASP, Java Servlets, JSP, ColdFusion και Perl.

Σημαντικά χαρακτηριστικά

• Θέματα βασισμένα σε CSS
• Σελιδοποίηση των δεδομένων
• Το πλάτος κάθε στήλης μπορεί να προσαρμοστεί ανάλογα με τις απαιτήσεις του χρήστη
• Ταξινόμηση δεδομένων
• Υποστηρίζει τύπους δεδομένων
• Υποστηρίζει πηγές δεδομένων από αρχεία XML, JSON και πίνακες
• Διαχείριση συμβάντων
• API για τον χρήστη
• Πολύγλωσση υποστήριξη

TableSorter

Το TableSorter είναι ένα jQuery plug-in που μπορεί να μετατρέψει ένα πίνακα που έχει τα τμήματα thead και tbody σε ένα πίνακα που μπορεί να ταξινομηθεί χωρίς να ανανεώσει τη σελίδα.

Σημαντικά χαρακτηριστικά

• Ταξινόμηση δεδομένων από πολλαπλές στήλες
• Cross Browser υποστήριξη
• Μικρό μέγεθος κώδικα

DataTables

Το DataTables είναι ένα plug-in για jQuery. Είναι εξερετικά ευέλικτο εργαλείο που βασίζετε στη συνεχή βελτίωση και ανάπτυξη.

Σημαντικά χαρακτηριστικά

• Μεταβλητό μήκος σελιδοποίησης
• Άμεσο φιλτράρισμα δεδομένων
• Ταξινόμηση πολλαπλών στηλών με εντοπισμό του τύπου δεδομένων
• Έξυπνη διαχείριση του πλάτους των στηλών
• Προβολή δεδομένων από σχεδόν κάθε πηγή δεδομένων
• Δυναμική δημιουργία πινάκων
• Αυτόματο φόρτωμα των δεδομένων με AJAX
• Κρυφές στήλες

SlickGrid

Αρκετά απλό το SlickGrid, είναι ένα JavaScript στοιχείο για πλέγματα/spreadsheets. Σε γενικές γραμμές είναι πολύ εξειδικευμένο εργαλείο, και ως επέκταση αυτού, είναι λίγο ποιο δύσκολο στην εκμάθηση και την παραμετροποίηση, αλλά αν τελικά καταφέρετε να το προσαρμόσετε στη σελίδα σας τότε θα έχετε ένα πολύ δυνατό πλέγμα στα χέρια σας.

Σημαντικά χαρακτηριστικά

• Προσαρμοσμένη εικονική κύλιση
• Εξαιρετικά γρήγορη σχεδίαση του component
• Υποστηρίζει τα themes από το jQuery UI
• Δέχεται προσαρμογές / ρυθμίσεις
• Αλλαγή μεγέθους/θέσης/απόκρυψη/προβολή των στηλών

Selectors

    // Επιλογή στοιχείου με id
    $("#IDστοιχείου").doSomthing();

    // Επιλογή στοιχείου με css class
    $(".όνομαΚλάσσης").doSomthing();

    // Επιλογή στοιχείου με id όπου το id περιέχει ένα string
    $("[id*='τιμή']").doSomthing();

    // Επιλογή στοιχείου με id όπου το id αρχίζει με ένα string
    $("[id^='τιμή']").doSomthing();

    // Επιλογή στοιχείου με id όπου το id τελειώνει με ένα string
    $("[id$='τιμή']").doSomthing();

    // Επιλογή όλων των στοιχείων συγκεκριμένου τύπου
    $("div").doSomthing();
    $("p").doSomthing();
    $("form").doSomthing();

Οι συναρτήσεις Toggle, Show και Hide

    // Εμφάνιση/Απόκριψη ενός στοιχείου
    $("#IDστοιχείου").toggle(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Εμφάνιση/Απόκριψη ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").toggle(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Απόκριψη ενός στοιχείου
    $("#IDστοιχείου").hide(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Απόκριψη ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").hide(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Εμφάνιση ενός στοιχείου
    $("#IDστοιχείου").show(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Εμφάνιση ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").show(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις slide

    // SlideUp/SlideDown ενός στοιχείου
    $("#IDστοιχείου").slideToggle(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideUp/SlideDown ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideToggle(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // SlideUp ενός στοιχείου
    $("#IDστοιχείου").slideUp(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideUp ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideUp(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // SlideDown ενός στοιχείου
    $("#IDστοιχείου").slideDown(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideDown ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideDown(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις fade

    // Fade in ενός στοιχείου
    $("#IDστοιχείου").fadeIn(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade in ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeIn(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Fade out ενός στοιχείου
    $("#IDστοιχείου").fadeOut(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade out ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeOut(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Fade to ενός στοιχείου. Αυτό το effect κάνει fade μέχρι το ποσοστό που ορίζει ο χρήστης.
    $("#IDστοιχείου").fadeTo(1000, 0.25);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade out ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeTo(
                                1000,
                                0.25,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις animation

    // Animation ενός στοιχείου
    $("#IDστοιχείου").animate(
        {
            opacity: 0.25                // Ιδιότητα CSS που θα γίνει animate
        },
        1000                               // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect
    );

    // Animation ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").animate(
        {
            opacity: 0.25                // Ιδιότητα CSS που θα γίνει animate
        },
        1000,                              // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect
        function()
        {
            alert("To effect ολοκληρώθηκε");
        }
    );

Δημιουργία/Κατάργηση κλάσσης CSS

    // Προσθήκη κλάσσης σε στοιχείο
    $("#IDστοιχείου").addClass('όνομαΚλασσης');

    // Κατάργηση κλάσσης σε στοιχείο
    $("#IDστοιχείου").removeClass('όνομαΚλασσης');

    // Κατάργηση κλάσσης και δημιουργία νέας σε στοιχείο
    $("#IDστοιχείου").removeClass('όνομαΚλασσης').addClass('όνομαΚλασσης');
    $("#IDστοιχείου").addClass('όνομαΚλασσης').removeClass('όνομαΚλασσης');

Ορισμός/ανάκτηση τιμών από πεδία κειμένου

    // Ανάκτηση τιμής από πεδίο κειμένου
    var textValue = $("#IDστοιχείου").val();

    // Ορισμός τιμής σε πεδίο κειμένου
    $("#IDστοιχείου").val('Τιμή πεδίου');

Ορισμός/ανάκτηση κώδικα HTML ενός στοιχείου

    // Ανάκτηση κώδικα HTML από στοιχείο
    var htmlValue = $("#IDστοιχείου").html();

    // Ορισμός κώδικα HTML σε στοιχείο
    $("#IDστοιχείου").html('

Τιμή πεδίου

');

Ορισμός/ανάκτηση κειμένου από στοιχείο

    // Ανάκτηση κειμένου από στοιχείο
    var textValue = $("#IDστοιχείου").text();

    // Ορισμός κειμένου σε στοιχείο
    $("#IDστοιχείου").text('Τιμή κειμένου');

Ορισμός/ανάκτηση των ιδιοτήτων width/height

    // Ανάκτηση της ιδιότητα height
    var elementHeight = $("#IDστοιχείου").height();

    // Ορισμός ύψους για ένα στοιχείο
    $("#IDστοιχείου").height(500);

    // Ανάκτηση της ιδιότητα width
    var elementWidth = $("#IDστοιχείου").width();

    // Ορισμός πλάτους για ένα στοιχείο
    $("#IDστοιχείου").width(500);

Εισαγωγή

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

Face Detection

Ποτέ δεν περίμενα πως το jQuery θα μπορούσε να κάνει κάτι τέτοιο. Ένα υπέροχο plugin που εντοπίζει αυτόματα τα πρόσωπα σε μια φωτογραφία.

Supersized!

Το Supersized! είναι μια image gallery πλήρους οθόνης. Αυτό που πραγματικά κάνει, είναι να αλλάζει το μέγεθος των εικόνων, χωρίς να τις παραμορφώνει, ανάλογα με το μέγεθος της οθόνης.

Hover Slide Effect

Ένα tutorial για να δημιουργήσετε τα δικά σας μοναδικά slide effects, αλλά για να καταλάβετε για τι πράγμα μιλάω θα πρέπει να το δείτε.

Sliderman

Το Sliderman.js είναι μια ανεξάρτητη βιβλιοθήκη JavaScript για slide show. Το χαρακτηριστικό αυτού του plugin που το κάνει μοναδικό είναι η δυνατότητα να έχει διαφορετικά effect στις αλλαγές των εικόνων.

SpryMap

Latest Tweets Tooltips

Quovolver

SlideNote

Orbit

Animator.js

Burst Engine

Canvas 3D

Facebook Animation Library

$fx()

Glimmer

GX

jsAnim

JSTweener

moo.fx

Pixastic

Processing.js

Raphael

script.aculo.us

Scriptio.us

Scripty2

xAnimation

Πηγή : Web Design Forum

Form validation

jQuery Login Form

Digg Style Signup Form

Color jQuery & CSS3 Sliders

Working with Events – Part 1

Ajax-based Form Submission

jQuery Fade-in Spoiler

Dynamic Page Content Replacement

Simplify Ajax development with jQuery

Simple Toggle with CSS & jQuery

Gallery with z-index

Skype-style buttons με jQuery

Apple-style Slideshow Gallery

απο την PHP & την XML στην jQuery

Manipulating the DOM(code snippits)

Semantic Blockquotes with jQuery

jQuery Basics with Google Maps

Live Updating List

Flickr CSS Menu Design

Πηγή : Web Design Forum

Η εμφάνιση μιας ιστοσελίδας παίζει έναν από τους ποιο σημαντικούς ρόλους για την επιτυχία της.

Τα προηγούμενα χρόνια, τεχνολογίες όπως η JavaScript, τα CSS και η AJAX συχνά χρησιμοποιούνταν για να παρέχουν στο χρήστη την άνεση του πλούσιας διεπαφής (RIA).

Με τη χρήση μίας από της δημοφιλέστερες βιβλιοθήκες JavaScript όπως το MooTools μπορεί να έχετε περισσότερο ομαλή διαδραστικότητα στην ιστοσελίδα σας.

Σε αυτό το άρθρο έχουμε συγκεντρώσει μερικά MooTools Tutorials και Plugins που μπορεί να σας φανούν χρήσιμα αν μπαίνετε τώρα στο χώρο αυτό.

1. Πως να βάλετε αυτόματα τίτλους στις εικόνες σας με MooTools

Σε αυτό το Tutorial θα γράψετε ένα απλό σενάριο το οποίο θα επιλέγει όλες τις εικόνες με την ιδιότητα class=”captioned ”, το οποίο θα παίρνει την ιδιότητα title ή alt και θα προβάλει το περιεχόμενο τους κάτω από την εικόνα.

Ανάγνωση του Tutorial
Δείγμα

2. Sexy Alert Box

Το Sexy Alert Box αντικαθιστά το παλιό και συχνά απότομο alert, με ένα ποιο εμφανίσιμο και ποιό ομαλή εμφάνιση που είναι συμβατό με το MooTools 1.2 ή νεότερο.

Ανάγνωση του Tutorial
Δείγμα

3. Έλεγχος διαθεσιμότητας ονόματος χρήστη με AJAX συμβατό με MooTools 1.2 ή νεότερο.

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

Ανάγνωση του Tutorial
Δείγμα

4. AutoCompleter

Θα πρέπει να έχετε παρατηρήσει πως το Google σας παρέχει προτάσεις καθώς πληκτρολογείτε ένα όρο αναζήτησης σε ένα drop down. Αυτό το σενάριο αυτόματης συμπλήρωσης σας δίνει την ίδια λειτουργικότητα με τη βοήθεια του MooTools.

Ανάγνωση του Tutorial
Δείγμα

5. AutoGrow textarea MooTools plugin

Αυτό το Plugin αλλάζει το μέγεθος των Textarea κατά τη διάρκεια πληκτρολόγησης από το χρήστη. Αυτή η έκδοση είναι βασισμένη στο Plugin που γράφτηκε αρχικά σε jQuery από τον Chrys Bader (www.chrysbader.com )

Ανάγνωση και κατέβασμα του Plugin
Δείγμα

6. Background Animation με MooTools

Mootools, το JavaScript Framework που δημιουργεί animation πολύ εύκολα. Σε αυτό το Tutorial θα δείτε πως μπορείτε να δημιουργήσετε animation στο Background της σελίδας σας.

Ανάγνωση του Tutorial
Δείγμα

7. Καλύτερα Pull Quotes με MooTools

Σε αυτό το Tutorial θα χρησιμοποιήσετε όμορφα pull quotes που αυτόματα θα προβάλει τα Quotes χωρίς να επαναλαμβάνει περιεχόμενο της σελίδας.

Ανάγνωση του Tutorial
Δείγμα

8. Δημιουργήστε στα γρήγορα ένα SlideShow με Image Preloader

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

Ανάγνωση του Tutorial
Δείγμα

9. Δημιουργία ενός απλού και ισχυρού Product Highlighter με MooTools

Σε αυτό το Tutorial θα δείτε πως μπορείτε να δημιουργήσετε ένα ευέλικτο highlighter για τα προϊόντα ή της υπηρεσίες που έχετε στην ιστοσελίδα σας.

Ανάγνωση του Tutorial
Δείγμα

10. Δημιουργία μιας θεαματικής Image Gallery

Σε αυτό το tutorial θα μάθετε να συνδικάζεται πολλά από τα χαρακτηριστικά του MooTools για να δημιουργήσετε μια κομψή και λειτουργική Image Gallery.

Ανάγνωση του Tutorial
Δείγμα

11. Δημιουργία Sprite μενού με MooTools

Σε αυτό το Tutorial θα μάθετε πως να δημιουργείτε Sprite μενού με CSS και MooTools.

Ανάγνωση του Tutorial
Δείγμα

12. Δημιουργία Animated Sliding Button με MooTools

Κάθε web site θα πρέπει να έχει ελκυστικά και εμφανίσιμα κουμπιά για να τραβήξει την προσοχή του χρήστη. Αν θέλετε να είστε ένας πετυχημένος ιδιοκτήτης ιστοσελίδας, θα πρέπει να είστε δημιουργικός και δεν θα πρέπει να χρησιμοποιείτε τα παλιομοδίτικα κουμπιά στη σελίδα σας. Σε αυτό το Tutorial θα μάθετε πως να δημιουργείτε Animated Siding Buttons με τη βοήθεια του MooTools.

Ανάγνωση του Tutorial
Δείγμα

13. Δημιουργία Snook-Style μενού με MooTools

Αυτό το Tutorial θα σας δείξει πως μπορείτε να χρησιμοποιήσετε μια εικόνα και το MooTools για να δημιουργήσετε ένα ομαλό εφέ στο mouse-over event.

Ανάγνωση του Tutorial
Δείγμα

14. Δημιουργία Twitter-Style drop down με MooTools

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

Ανάγνωση του Tutorial
Δείγμα

15. Facebook sliders με CSS και MooTools

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

Ανάγνωση του Tutorial
Δείγμα

16. FancyForm

Το σενάριο FancyForm αντικαθιστά τα παλιά checkbox με τα νέα διαδραστικά και ευέλικτα checkbox όπου ένα v είναι το σήμα για επιλεγμένο και ένα x είναι το σήμα για μη επιλεγμένο.

Ανάγνωση του Tutorial
Δείγμα

17. Κωδικός πρόσβασης όπως στο iPhone

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

Ανάγνωση του Tutorial
Δείγμα

18. JavaScript Dropdown μενού με MooTools

Τα drop down μενού είναι απαραίτητα για κάθε ιστοσελίδα. Σε αυτό το Tutorial θα μάθετε να δημιουργείτε απλά και ταπεινά drop down μενού χρησιμοποιώντας το MooTools Core Build και το Fx.Slide

Ανάγνωση του Tutorial
Δείγμα

19. Kroppr

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

Ανάγνωση του Tutorial
Δείγμα

20. Milkbox

Το Milkbox είναι ένα απλό και καθαρό αντίγραφο του lightbox για MooTools.

Ανάγνωση του Tutorial
Δείγμα

21. MooFlow

Το MooFlow σας δίνει μια απολύτως τέλια εμπειρία περιήγησης στην ιστοσελίδα σας, σχεδόν ίδια με αυτή στην ιστοσελίδα της Apple.

Κατεβάστε
Δείγμα

22. MooRainbow

Περιγραφή
Κατεβάστε
Δείγμα

23. mooSlide

Το mooSlide αντικαθιστά το κοινό lightbox με ένα που υποστηρίζει AJAX. Μπορείτε να έχετε ότι περιεχόμενο θέλετε μέσα σε αυτό, όπως για παράδειγμα HTML, Flash, καθώς επίσης μπορεί να κάνει και Slide από πάνω προς τα κάτω

Κατεβάστε
Δείγμα

24. MooTools Count Down plugin

Υποθέτω πως όλοι μας έχουμε χρησιμοποιήσει το rapidshare για τουλάχιστον μια φορά και έπρεπε να περιμένουμε για μερικά δευτερόλεπτα μέχρι να αρχίσει το download. Με τη βοήθεια του MooTools μπορείτε να δημιουργήσετε ένα παρόμοιο count down plugin.

Αυθεντικός σύνδεσμος
Δείγμα

25. MooTools Kwicks Plugin

Το MooTools Kwicks Plugin θα σας επιτρέψει να έχετε κριμένες πληροφορίες μιας εικόνας όταν περνάτε το ποντίκι σας από πάνω.

Αυθεντικός σύνδεσμος
Δείγμα

26. MooTools Zoomer Plugin

Το zoomer σας παρέχει την κατάλυση λειτουργικότητα για να μεγεθύνετε μεγάλες εικόνες.

Αυθεντικός σύνδεσμος
Δείγμα

27. Morph effect στο event mouseover/mouseleave

Σε αυτό το Tutorial θα μάθετε να βάζετε ένα κομψό morph effect σε λίστες με το mouseover

Tutorial
Κατεβάστε
Δείγμα

28. Sexy Animated Tabs με MooTools

Αν δεν έχετε αρκετό χώρο, αλλά έχετε πολύ περιεχόμενο τότε είναι καλό να χρησιμοποιείτε tabs. Αυτό το Tutorial θα σας δείξει πως να δημιουργείτε sexy animated tabs που μπορούν να διαχειριστούν πολύ περιεχόμενο σε λίγο χόρο.

Ανάγνωση του Tutorial
Δείγμα

29. Sexy sliding JavaScript side bar μενού με MooTools

Ένα sliding μενού μπορεί να σας βοηθήσει να εξοικονομήσετε αρκετό χώρο στην ιστοσελίδα σας. Αυτό το Tutorial χρησιμοποιεί το MooTools για να δημιουργήσει αυτό το Sexy Sliding Bar μενού.

Ανάγνωση του Tutorial
Δείγμα

30. Sliding Labels με MooTools

Ανάγνωση του Tutorial
Δείγμα

31. Smooth Scrolling με το MooTools Fx.SmoothScroll

Μάθετε πως να δημιουργείτε smooth scrolling με το MooTools Fx.SmoothScroll

Ανάγνωση του Tutorial
Δείγμα

32. TableGear

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

Κατεβάστε
Δείγμα

33. Δύο CSS κάθετα μενού με show/hide effects

Αυτό είναι ένα απλό Tutorial που θα σας διδάξει πως να δημιουργήσετε δυο κάθετα μενού με show/hide effects. Το ένα παράδειγμα θα χρησιμοποιεί απλή JavaScript και το άλλο MooTools.

Ανάγνωση του Tutorial
Δείγμα

34. Χρησιμοποιήστε CSS και MooTools για να προσομοιώσετε το effect οριζόντιου μενού σε Flash

Αυτό το Tutorial δείχνει πως μπορείτε να χρησιμοποιήσετε το MooTools και λίγο κώδικα CSS / HTML για να προσομοιώσετε την οριζόντια πλοήγηση όπως στο Flash.

Ανάγνωση του Tutorial
Δείγμα

35. Χρησιμοποιήστε το MooTools για να καθοδηγήσετε το Google Analytics να παρακολουθεί τους εξερχόμενους συνδέσμους.

Το Google Analytics είναι σε θέση να σας παρέχει πολύτιμες πληροφορίες για τους επισκέπτες της ιστοσελίδας σας, όπως για παράδειγμα από που ήρθαν, τι είδαν, πόσο έμειναν στη σελίδα σας, κ.α. Τι γίνετε όμως αν θέλετε να δείτε σε ποιο σύνδεσμο έκαναν Click για να φύγουν από την ιστοσελίδα σας; Αυτό μπορείτε να το καταφέρετε με τη βοήθεια του MooTools.

Ανάγνωση του Tutorial

36. Modal Box όπως στο Facebook με MooTools

Σε αυτό το Tutorial θα μάθετε πως να συνδυάζεται CSS, εικόνες του Facebook και το MooTools για να δημιουργήσετε ένα Modal Box σαν αυτό του Facebook.

Ανάγνωση του Tutorial
Δείγμα

37. SqueezeBox – Expandable Lightbox

Κατεβάστε
Δείγμα

38. FancyUpload – Το Swiff συναντά την AJAX

Κατεβάστε

39. Δημιουργία απλού News Scroller με MooTools

Οι News Scrollers είναι πολύ διαδεδομένοι στο internet λόγο της αποτελεσματικότητας τους. Σε αυτό το Tutorial θα μάθετε πως να δημιουργήσετε ένα απλό News Scroller.

Ανάγνωση του Tutorial
Δείγμα

40. Checkbox filtering με τη βοήθεια του MooTools ElementFilter

Αυτό το Tutorial χρησιμοποιεί το MooTools ElementFilter για να φιλτράρει τα Checkbox. Για παράδειγμα αν δημιουργείτε Search Box, όταν θα πληκτρολογείτε τον όρο αναζήτησης, τα στοιχεία ταιριάζουν με τον όρο αναζήτησης θα τσεκάρονται αυτόματα.

Ανάγνωση του Tutorial
Δείγμα

1. Flip! A jQuery plugin

2. jQuery Quicksand plugin

3. ImageFlow

4. Building an interactive map with jQuery instead of Flash

5. Slideout Tips With jQuery & CSS3

6. Zoomer Gallery

7. jQuery Circulate

8. Photo Zoom Out Effect

9. Sliding Boxes and Captions with jQuery

10. CSS3 Lightbox Gallery

11. Making a Photoshoot Effect With jQuery & CSS

12. Awesome Bubble Navigation

13. Beautiful Background Image Navigation

14. AviaSlider

15. Background Image Slideshow

16. Panning Slideshow

17. jqFancyTransitions

18. iCarousel – Horizontal images slider

19. Making an Interactive Picture with jQuery

20. Cloud Zoom

21. Apple-like Retina Effect

Πηγή : Web Design Forum