40 MooTools Tutorials και Plugins

02 Αυγ 2010 | JavaScript


40 MooTools Tutorials and Plugins

Το MooTools είναι ένα δημοφιλές, ελαφρύ και αντικειμενοστραφές JavaScript Framework, το οποίο μπορεί να δώσει μια λίγο ποιο πικάντικη γεύση στην διαδραστικότητα και την εμφάνιση της ιστοσελίδας σας.

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

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

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

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

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

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

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

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

2. Sexy Alert Box

Sexy Alert Box

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

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

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

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

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

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

4. AutoCompleter

AutoCompleter

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

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

5. AutoGrow textarea MooTools plugin

AutoGrow textarea

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

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

6. Background Animation με MooTools

Background Animation

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

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

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

Καλύτερα Pull Quotes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Δημιουργία Animated Sliding Button

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

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

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

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

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

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

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

Δημιουργία Twitter-Style drop down

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

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

15. Facebook sliders με CSS και MooTools

Facebook sliders με CSS και MooTools

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

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

16. FancyForm

FancyForm

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

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

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

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

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

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

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

JavaScript Dropdown μενού με MooTools

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

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

19. Kroppr

Kroppr

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

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

20. Milkbox

Milkbox

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

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

21. MooFlow

MooFlow

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

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

22. MooRainbow

MooRainbow

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

23. mooSlide

mooSlide

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

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

24. MooTools Count Down plugin

MooTools Count Down plugin

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

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

25. MooTools Kwicks Plugin

MooTools Kwicks Plugin

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

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

26. MooTools Zoomer Plugin

MooTools Zoomer Plugin

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

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

27. Morph effect στο event mouseover/mouseleave

Morph effect στο event mouseover/mouseleave

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

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

28. Sexy Animated Tabs με MooTools

Sexy Animated Tabs

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

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

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

Sexy sliding JavaScript side bar

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

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

30. Sliding Labels με MooTools

Sliding Labels με MooTools

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

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

Smooth Scrolling με το MooTools Fx.SmoothScroll

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

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

32. TableGear

TableGear

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

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

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

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

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

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

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

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

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

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

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

MooTools + Google Analytics

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

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

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

Modal Box όπως στο Facebook

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

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

37. SqueezeBox – Expandable Lightbox

SqueezeBox – Expandable Lightbox

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

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

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

Κατεβάστε

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

Δημιουργία απλού News Scroller

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

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

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

Checkbox filtering

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

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

Περισσότερα για τον CorfuGmr

CorfuGmr

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








Σχόλια



2 Αυγούστου 2010

[...] This post was mentioned on Twitter by Web Resoures.eu, Web Resoures.eu. Web Resoures.eu said: 40 MooTools Tutorials και Plugins : http://j.mp/bmhJu7 [...]




medicine hat escorts

26 Νοεμβρίου 2010

This is my problem…

Superb website, I like how your page looks! The layout is great!…


Αφήστε ένα σχόλιο

Υποβολή σχολίου

 

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL



^
Top
css.php