Το MooTools είναι ένα δημοφιλές, ελαφρύ και αντικειμενοστραφές JavaScript Framework, το οποίο μπορεί να δώσει μια λίγο ποιο πικάντικη γεύση στην διαδραστικότητα και την εμφάνιση της ιστοσελίδας σας.
Η εμφάνιση μιας ιστοσελίδας παίζει έναν από τους ποιο σημαντικούς ρόλους για την επιτυχία της.
Τα προηγούμενα χρόνια, τεχνολογίες όπως η JavaScript, τα CSS και η AJAX συχνά χρησιμοποιούνταν για να παρέχουν στο χρήστη την άνεση του πλούσιας διεπαφής (RIA).
Με τη χρήση μίας από της δημοφιλέστερες βιβλιοθήκες JavaScript όπως το MooTools μπορεί να έχετε περισσότερο ομαλή διαδραστικότητα στην ιστοσελίδα σας.
Σε αυτό το άρθρο έχουμε συγκεντρώσει μερικά MooTools Tutorials και Plugins που μπορεί να σας φανούν χρήσιμα αν μπαίνετε τώρα στο χώρο αυτό.
1. Πως να βάλετε αυτόματα τίτλους στις εικόνες σας με MooTools
Σε αυτό το Tutorial θα γράψετε ένα απλό σενάριο το οποίο θα επιλέγει όλες τις εικόνες με την ιδιότητα class=”captioned ”, το οποίο θα παίρνει την ιδιότητα title ή alt και θα προβάλει το περιεχόμενο τους κάτω από την εικόνα.
2. Sexy Alert Box
Το Sexy Alert Box αντικαθιστά το παλιό και συχνά απότομο alert, με ένα ποιο εμφανίσιμο και ποιό ομαλή εμφάνιση που είναι συμβατό με το MooTools 1.2 ή νεότερο.
3. Έλεγχος διαθεσιμότητας ονόματος χρήστη με AJAX συμβατό με MooTools 1.2 ή νεότερο.
Σχεδόν κάθε ιστοσελίδα διαθέτη σύστημα μελών. Ως εκ τούτου κάποια από αυτά τα Site χρειάζονται ένα σύστημα ελέγχου διαθεσιμότητας ονομάτων χρηστών για να ενημερώνουν τους χρήστες τους άμεσα για την διαθεσιμότητα του ονόματος που έχουν επιλέξει. Εδώ θα βρείτε ένα Tutorial, για το πως να δημιουργήσετε ένα σενάριο ελέγχου ονομάτων που θα είναι συμβατό με το MooTools 1.2 ή νεότερο.
4. AutoCompleter
Θα πρέπει να έχετε παρατηρήσει πως το Google σας παρέχει προτάσεις καθώς πληκτρολογείτε ένα όρο αναζήτησης σε ένα drop down. Αυτό το σενάριο αυτόματης συμπλήρωσης σας δίνει την ίδια λειτουργικότητα με τη βοήθεια του MooTools.
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 της σελίδας σας.
7. Καλύτερα Pull Quotes με MooTools
Σε αυτό το Tutorial θα χρησιμοποιήσετε όμορφα pull quotes που αυτόματα θα προβάλει τα Quotes χωρίς να επαναλαμβάνει περιεχόμενο της σελίδας.
8. Δημιουργήστε στα γρήγορα ένα SlideShow με Image Preloader
Αυτός ο κώδικας θα σας δείξει πως να δημιουργήσετε ένα απλό SlideShow με τη βοήθεια του MooTools που θα έχει τη δυνατότητα να κατεβάσει τις εικόνες που χρησιμοποιεί πριν αυτές εμφανιστούν στον χρήστη.
9. Δημιουργία ενός απλού και ισχυρού Product Highlighter με MooTools
Σε αυτό το Tutorial θα δείτε πως μπορείτε να δημιουργήσετε ένα ευέλικτο highlighter για τα προϊόντα ή της υπηρεσίες που έχετε στην ιστοσελίδα σας.
10. Δημιουργία μιας θεαματικής Image Gallery
Σε αυτό το tutorial θα μάθετε να συνδικάζεται πολλά από τα χαρακτηριστικά του MooTools για να δημιουργήσετε μια κομψή και λειτουργική Image Gallery.
11. Δημιουργία Sprite μενού με MooTools
Σε αυτό το Tutorial θα μάθετε πως να δημιουργείτε Sprite μενού με CSS και MooTools.
12. Δημιουργία Animated Sliding Button με MooTools
Κάθε web site θα πρέπει να έχει ελκυστικά και εμφανίσιμα κουμπιά για να τραβήξει την προσοχή του χρήστη. Αν θέλετε να είστε ένας πετυχημένος ιδιοκτήτης ιστοσελίδας, θα πρέπει να είστε δημιουργικός και δεν θα πρέπει να χρησιμοποιείτε τα παλιομοδίτικα κουμπιά στη σελίδα σας. Σε αυτό το Tutorial θα μάθετε πως να δημιουργείτε Animated Siding Buttons με τη βοήθεια του MooTools.
13. Δημιουργία Snook-Style μενού με MooTools
Αυτό το Tutorial θα σας δείξει πως μπορείτε να χρησιμοποιήσετε μια εικόνα και το MooTools για να δημιουργήσετε ένα ομαλό εφέ στο mouse-over event.
14. Δημιουργία Twitter-Style drop down με MooTools
Λιπών, ο καθένας μας θα πρέπει να έχει δει το drop down μενού στη φόρμα εισόδου στο Twitter. Αυτό το Tutorial θα σας δείξει πως μπορείτε να αντιγράψετε αυτή την λειτουργικότητα με το MooTools.
15. Facebook sliders με CSS και MooTools
Αυτό το Tutorial εξηγεί πως να δημιουργήσετε sliders σαν αυτούς του Facebook που ελέγχουν το πλάτος, το ύψος και την διαφάνεια μιας εικόνας.
16. FancyForm
Το σενάριο FancyForm αντικαθιστά τα παλιά checkbox με τα νέα διαδραστικά και ευέλικτα checkbox όπου ένα v είναι το σήμα για επιλεγμένο και ένα x είναι το σήμα για μη επιλεγμένο.
17. Κωδικός πρόσβασης όπως στο iPhone
Σε αυτό το Tutorial θα μάθετε πως να δημιουργείτε πεδία κωδικού πρόσβασης όπως στο iPhone, που θα προβάλει των τελευταίο χαρακτήρα που πληκτρολογείτε κάθε φορά και θα αποκρύπτει τους υπόλοιπους
18. JavaScript Dropdown μενού με MooTools
Τα drop down μενού είναι απαραίτητα για κάθε ιστοσελίδα. Σε αυτό το Tutorial θα μάθετε να δημιουργείτε απλά και ταπεινά drop down μενού χρησιμοποιώντας το MooTools Core Build και το Fx.Slide
19. Kroppr
Το Kroppr είναι ένα εργαλείο κοπής εικόνων για την ιστοσελίδα σας που επιτρέπει στους χρήστες να περιστρέφουν, να αλλάζουν το μέγεθος και να κόβουν εικόνες με ελάχιστες αλλαγές στην ιστοσελίδα σας.
20. Milkbox
Το Milkbox είναι ένα απλό και καθαρό αντίγραφο του lightbox για MooTools.
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
28. Sexy Animated Tabs με MooTools
Αν δεν έχετε αρκετό χώρο, αλλά έχετε πολύ περιεχόμενο τότε είναι καλό να χρησιμοποιείτε tabs. Αυτό το Tutorial θα σας δείξει πως να δημιουργείτε sexy animated tabs που μπορούν να διαχειριστούν πολύ περιεχόμενο σε λίγο χόρο.
29. Sexy sliding JavaScript side bar μενού με MooTools
Ένα sliding μενού μπορεί να σας βοηθήσει να εξοικονομήσετε αρκετό χώρο στην ιστοσελίδα σας. Αυτό το Tutorial χρησιμοποιεί το MooTools για να δημιουργήσει αυτό το Sexy Sliding Bar μενού.
30. Sliding Labels με MooTools
31. Smooth Scrolling με το MooTools Fx.SmoothScroll
Μάθετε πως να δημιουργείτε smooth scrolling με το MooTools Fx.SmoothScroll
32. TableGear
Το TableGear είναι ένα λογισμικό για να εργάζεστε με δεδομένα στο ιντερνέτ. Είναι σχεδιασμένο για να φορτώνει τα δεδομένα σας μέσα στην ιστοσελίδα σας, και να εργάζεστε με αυτά γρήγορα και εύκολα, όπως θα κάνατε το ίδιο με το Microsoft Excel.
33. Δύο CSS κάθετα μενού με show/hide effects
Αυτό είναι ένα απλό Tutorial που θα σας διδάξει πως να δημιουργήσετε δυο κάθετα μενού με show/hide effects. Το ένα παράδειγμα θα χρησιμοποιεί απλή JavaScript και το άλλο MooTools.
34. Χρησιμοποιήστε CSS και MooTools για να προσομοιώσετε το effect οριζόντιου μενού σε Flash
Αυτό το Tutorial δείχνει πως μπορείτε να χρησιμοποιήσετε το MooTools και λίγο κώδικα CSS / HTML για να προσομοιώσετε την οριζόντια πλοήγηση όπως στο Flash.
35. Χρησιμοποιήστε το MooTools για να καθοδηγήσετε το Google Analytics να παρακολουθεί τους εξερχόμενους συνδέσμους.
Το Google Analytics είναι σε θέση να σας παρέχει πολύτιμες πληροφορίες για τους επισκέπτες της ιστοσελίδας σας, όπως για παράδειγμα από που ήρθαν, τι είδαν, πόσο έμειναν στη σελίδα σας, κ.α. Τι γίνετε όμως αν θέλετε να δείτε σε ποιο σύνδεσμο έκαναν Click για να φύγουν από την ιστοσελίδα σας; Αυτό μπορείτε να το καταφέρετε με τη βοήθεια του MooTools.
36. Modal Box όπως στο Facebook με MooTools
Σε αυτό το Tutorial θα μάθετε πως να συνδυάζεται CSS, εικόνες του Facebook και το MooTools για να δημιουργήσετε ένα Modal Box σαν αυτό του Facebook.
37. SqueezeBox – Expandable Lightbox
38. FancyUpload – Το Swiff συναντά την AJAX
39. Δημιουργία απλού News Scroller με MooTools
Οι News Scrollers είναι πολύ διαδεδομένοι στο internet λόγο της αποτελεσματικότητας τους. Σε αυτό το Tutorial θα μάθετε πως να δημιουργήσετε ένα απλό News Scroller.
40. Checkbox filtering με τη βοήθεια του MooTools ElementFilter
Αυτό το Tutorial χρησιμοποιεί το MooTools ElementFilter για να φιλτράρει τα Checkbox. Για παράδειγμα αν δημιουργείτε Search Box, όταν θα πληκτρολογείτε τον όρο αναζήτησης, τα στοιχεία ταιριάζουν με τον όρο αναζήτησης θα τσεκάρονται αυτόματα.
Περισσότερα για τον CorfuGmr
Σχόλια
[...] 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
This is my problem…
Superb website, I like how your page looks! The layout is great!…
Αφήστε ένα σχόλιο
Αναζήτηση
Newsletters
Newsletters από το Web Resources
Μεταστοιχεία
Αρχείο
- Φεβρουαρίου 2012 (1)
- Δεκεμβρίου 2011 (2)
- Νοεμβρίου 2011 (1)
- Οκτωβρίου 2011 (4)
- Σεπτεμβρίου 2011 (3)
- Αυγούστου 2011 (6)
- Ιουλίου 2011 (14)
- Ιουνίου 2011 (6)
- Μαΐου 2011 (3)
- Απριλίου 2011 (11)
- Μαρτίου 2011 (19)
- Φεβρουαρίου 2011 (8)
- Ιανουαρίου 2011 (17)
- Δεκεμβρίου 2010 (8)
- Νοεμβρίου 2010 (8)
- Οκτωβρίου 2010 (11)
- Σεπτεμβρίου 2010 (11)
- Αυγούστου 2010 (5)
- Ιουλίου 2010 (8)
- Ιουνίου 2010 (10)
- Μαΐου 2010 (14)
- Απριλίου 2010 (8)
- Μαρτίου 2010 (14)
![Θεωρία των χρωμάτων [Μέρος 1ο] : Η έννοια των χρωμάτων](http://www.web-resources.eu/wp-content/uploads/2010/08/00012-30x30.jpg "Θεωρία των χρωμάτων [Μέρος 1ο] : Η έννοια των χρωμάτων"){kind=small}
