Το Yahoo! Blog User Interface (YUIBlog)

YUI 3.3.0 έκδοση προεπισκόπησης 3

Στο YUIConf το Νοέμβριο θα κυκλοφορήσει μια προεπισκόπηση των YUI 3.3.0, επόμενη σημαντική έκδοση μας στο YUI codeline 3 . Είμαστε τώρα στην τρίτη έκδοση προεπισκόπησης μας, και αν έχετε λίγο χρόνο κατά τη διάρκεια των χειμερινών διακοπών για να μας βοηθήσουν να κλωτσούν τα ελαστικά θα θέλαμε για να σας δώσει μια περιστροφή. Μπορείτε να χρησιμοποιήσετε το αρχείο σπόρων YUI 3.3.0pr1 από το CDN για να ξεκινήσετε, κατεβάσετε την διανομή από YUILibrary.com , ή να ελέγξετε το 3.3.0pr3 διανομή φιλοξενείται σε YUIBlog (σημείωση: οι επιδόσεις είναι αρκετά υποτονική σε YUIBlog λόγω της έλλειψης combo-χειρισμού? να είστε σίγουροι ότι CDN με γνώμονα τις εφαρμογές σας γενικά θα είναι ταχύτερη από την αντίστοιχη χρήση 3.2.0).

Μερικά από τα νέα πράγματα που ψάχνουν σε αυτή την έκδοση:

• όλα τα νέα AutoComplete (beta)
• όλα τα νέα γραφήματα (beta) , που τροφοδοτείται από SVG, καμβά και VML
• όλα τα νέα DataTable (beta) , οι απαρχές μιας πιο αρθρωτή αναβάθμιση από το δημοφιλές YUI 2 συστατικών
• νέο στοιχείο ελέγχου κλήσης (β) , ένα καινοτόμο πάρει ένα πεπερασμένο εύρος ελέγχου ή ρυθμιστικό δημιουργήθηκε από Yahoo! σχεδιαστής Τζεφ Conniff
• όλα τα νέα χρησιμότητα Resize (beta) , που παρέχονται από τον Eduardo Lundgren του Liferay, συγγραφέας του βιβλίου με Nate Cavanaugh του YUI 3-με βάση AlloyUI επεκτάσεις διαθέσιμες στο YUI Γκαλερί 3 . (Μπορείτε να συναντήσετε τον Eduardo και Nate σε αυτό το AlloyUI περιοδείας πυροβόλησαν YUIConf 2010 .)

Υπάρχει πολύ περισσότερο στην αγάπη για YUI 3.3.0, και εμείς θα πρέπει να μοιράζονται περισσότερες πληροφορίες όπως η ημερομηνία πλησιάζει GA. Προς το παρόν, προσπαθούμε για την απελευθέρωση ενός παραθύρου κατά τη δεύτερη εβδομάδα του Ιανουαρίου. Καλωσορίζουμε τα σχόλιά σας σχετικά με την προεπισκόπηση του YUI φόρουμ και στην βάση δεδομένων του εισιτηρίου αν βρείτε ζητήματα που προκαλούν ανησυχία, όταν δοκιμάσετε τη δική σας εφαρμογή με τη νέα έκδοση.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

YUILibrary.com εκτός λειτουργίας για συντήρηση (ενημέρωση: πίσω τώρα)

Ενημέρωση 12:32 μ.μ. 12/21/2010: Επιστροφή οργανωθεί και να λειτουργήσει - ενημερώστε μας αν δείτε κάποια ζητήματα.

Πήραμε YUILibrary.com κάτω σήμερα το πρωί για τη συντήρηση. Αναμένουμε ότι αυτή η εργασία να διαρκέσει 4-6 ώρες. Ζητούμε συγγνώμη για την αναστάτωση και θα προσπαθήσει να κρατήσει το downtime όσο το δυνατόν συντομότερη.

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

YUIBlog και @ YUILibrary θα τρέξει ενημερώσεις όταν ο χώρος είναι και πάλι επάνω.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

YUI 2.9.0 Ενημέρωση Τύπου

Την επόμενη εβδομάδα η ομάδα YUI θα αρχίσει τον προγραμματισμό για την απελευθέρωση 2.9.0 πρέπει να αποστέλλονται στο δεύτερο μισό του 1ου τριμήνου 2011. YUI 2.9.0 θα είναι η τελευταία μεγάλη dot-απελευθέρωση του codeline 2.x, και η ομάδα θα επανεξετάσει επιθετικά όλα τα ανοιχτά εισιτήρια κατά το YUI 2 του σχεδίου και την ανάθεση τους είτε να είναι ένα μέρος της έκδοσης 2.9.0, το κλείσιμο ως "ΔΕΝ ΘΑ ΦΙΞ", ή μεταφορά τους στο έργο YUI 3.

Η πραγματικότητα του χρόνου και την έλλειψη πόρων μας αναγκάζει να επικεντρωθούμε στις κορυφαίες θέματα προτεραιότητας που θα παρέχει κάποια κλείσιμο σε YUI 2.x και θα μας επιτρέψει να εντείνουμε τις προσπάθειές μας για την ανάπτυξη 3.x. Εδώ είναι μερικά από τα κριτήρια που θα χρησιμοποιήσουμε για να μας καθοδηγήσει για να αποφασιστεί τι πρέπει να περιληφθεί στην απελευθέρωση 2.9.0:

• Ζητήματα που αρνητικά περιπτώσεις η χρήση των επιπτώσεων πυρήνα.
• Αναδυόμενες θέματα που σχετίζονται με τις νέες κυκλοφορίες πρόγραμμα περιήγησης στο Α βαθμού μήτρα.
• Βελτιώσεις και νέες λειτουργίες θα πρέπει να διαγραφεί η προτεραιότητα για YUI 2 και εξετάζονται για YUI 3.

Η μετάβαση της ομάδας από τις αναπτυσσόμενες YUI δύο παράλληλες codelines να επικεντρώνεται αποκλειστικά στην YUI 3 δεν σημαίνει το τέλος του YUI 2 του σχεδίου. Όλες οι παρούσες και μελλοντικές YUI 2 κυκλοφορίες θα συνεχίσει να φιλοξενείται στο CDN το Yahoo!, το YUI 2 codebase θα συνεχίσουν να φιλοξενούνται σε GitHub, και θα θέλαμε να διερευνηθούν με βάση την κοινότητα συντήρηση του YUI 2 στο μέλλον.

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

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

Αυστηρή λειτουργία έρχεται στην πόλη

Αυτή είναι η ώρα και εποχή, όταν οι άνθρωποι σε όλο τον κόσμο ξεχνούν τις διαφορές τους και να έρθουν μαζί σε συνθήκες ειρήνης και συναδέλφωσης για να γιορτάσει την πρώτη επέτειο της έγκρισης της ECMA Γενικής Συνέλευσης των ECMAScript Η Γλώσσα Προγραμματισμού πρότυπο, πέμπτη έκδοση. Το πιο σημαντικό χαρακτηριστικό σε ES5 είναι η νέα αυστηρή λειτουργία. Αυστηρή Mode είναι ένα opt-in λειτουργία που επισκευάζει ή αφαιρεί μερικά από τα πιο προβληματικά χαρακτηριστικά της γλώσσας.

Καθορισμός Αυστηρή λειτουργία

Υπάρχουν δύο τρόποι για να ζητήσετε αυστηρή λειτουργία. Η πρώτη είναι η εισαγωγή αυτής της pragma

  "Αυστηρή χρήση"? 

στην κορυφή ενός αρχείου ή μονάδα συλλογής. Θα πρέπει να εμφανίζεται πριν από οποιεσδήποτε άλλες δηλώσεις, αλλά μπορεί να προηγείται κενό και σχόλια. Έχει τη μορφή της ένα άχρηστο αλφαριθμητικό δήλωση, γι 'αυτό θα πρέπει να αγνοηθεί από ES3 συστήματα. Αυτό σημαίνει ότι είναι δυνατό να γραφτεί ES5/strict προγράμματα που μπορεί να λειτουργήσει και με τα παλαιότερα προγράμματα περιήγησης. Αυστηρό κώδικα μπορεί επίσης να αλληλεπιδράσουν με μη αυστηρή (ή προχειρότητα) κώδικα, είναι τόσο αυστηρές λειτουργίες μπορούν να καλέσουν προχειρότητα λειτουργίες, ατημέλητη και λειτουργίες μπορεί να καλέσει αυστηρή λειτουργίες. Αυτό το υψηλό επίπεδο συμβατότητας κάνει υιοθέτηση αυστηρών εύκολη λειτουργία.

Όλα του κώδικα στο αρχείο ή μονάδα συλλογή με την "use strict"; προοίμιο θα υποβληθούν σε επεξεργασία με αυστηρό κώδικα. Υπάρχει ένα πρόβλημα, όμως. εκτιμήσεις απόδοσης μας υποχρεώνει σήμερα να ενώσετε πολλά αρχεία μαζί το JavaScript για να αποφεύγεται η σώρευση καθυστερήσεων HTTP. Εάν ένα αρχείο με ένα "use strict"; προοίμιο έχει προχειρότητα κωδικό προσαρτηθεί σε αυτό, η προχειρότητα κώδικας θα υποβληθούν σε επεξεργασία με αυστηρές και μάλλον θα αποτύχει. Υπάρχει ένας εύκολος κανόνας: Μην αναμιγνύετε αυστηρή και προχειρότητα στο ίδιο αρχείο, αλλά έχουμε ήδη δει κάποιες διάσημες ιστοσελίδες πάρετε αυτό το λάθος.

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

  (Λειτουργία () {
    "Αυστηρή χρήση"?
    / / Αυτή η λειτουργία είναι αυστηρή ...
 } ())?

 (Λειτουργία () {
    / / Αλλά αυτή η λειτουργία είναι ατημέλητη ...
 } ())? 

Έκταση

Ιστορικά, έχει το JavaScript σύγχυση σχετικά με το πώς λειτουργεί είναι scoped. Μερικές φορές φαίνεται να είναι στατικά scoped, αλλά μερικά χαρακτηριστικά καθιστούν τους συμπεριφέρονται σαν να είναι δυναμικά scoped. Αυτό δημιουργεί σύγχυση, κάνοντας τα προγράμματα δύσκολο να διαβάσουν και να κατανοήσουν. Παρεξήγηση προκαλεί σφάλματα. Είναι επίσης ένα πρόβλημα για την απόδοση. Στατική οριοθέτηση του πεδίου εφαρμογής θα επιτρέψει μεταβλητή δεσμευτικές να συμβεί κατά τη μεταγλώττιση, αλλά η απαίτηση για τη δυναμική πεδίο σημαίνει ότι το δεσμευτικό πρέπει να αναβληθεί για το χρόνο εκτέλεσης, η οποία έρχεται με σημαντικές συνέπειες στις επιδόσεις.

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

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

Σιωπηρή Καθολικές μεταβλητές

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

Παγκόσμια Διαρροή

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

Θορυβώδης αποτυχία

Το JavaScript είχε πάντα μόνο για ανάγνωση ιδιότητες, αλλά δεν θα μπορούσατε να δημιουργήσετε μόνοι σας τα μέχρι ES5 της Object.createProperty λειτουργία εκτίθεται αυτήν την ικανότητα. Αν προσπάθησε να εκχωρήσετε μια τιμή σε ένα μόνο για ανάγνωση ιδιοκτησίας, θα αποτύχει σιωπηλά. Η ανάθεση δεν θα αλλάξει την αξία του ακινήτου, αλλά το πρόγραμμά σας θα προχωρήσει σαν να είχε. Αυτή είναι μια κίνδυνο την ακεραιότητα που μπορεί να προκαλέσει κάποια προγράμματα για να πάει σε μια ασυνεπή κατάσταση. Σε αυστηρό τρόπο, προσπαθεί να αλλάξει ένα read-only ιδιοκτησίας θα ρίξει μια εξαίρεση.

Οκταδικό

Το οκταδικό (ή βάση 8) αναπαράσταση των αριθμών ήταν εξαιρετικά χρήσιμο όταν κάνει μηχάνημα σε επίπεδο προγραμματισμού στις μηχανές των οποίων τα μεγέθη λέξη ήταν πολλαπλάσιο του 3. Μπορείτε χρειάζεται οκταδικό, όταν ασχολούνται με το CDC 6600 mainframe, το οποίο είχε μέγεθος λέξη των 60 bits. Αν θα μπορούσατε να διαβάσετε οκταδικό, θα μπορούσαμε να εξετάσουμε μια λέξη ως 20 ψηφία. Δύο ψηφία εκπροσώπησε την op κωδικό, και ένα ψηφίο προσδιόρισε ένα από τα 8 μητρώα. Κατά τη διάρκεια της αργής μετάβασης από τους κωδικούς μηχανής σε γλώσσες υψηλού επιπέδου, θεωρήθηκε ότι είναι χρήσιμο να προβλεφθεί οκταδικό μορφές σε γλώσσες προγραμματισμού.

Στο Γ, μια εξαιρετικά ατυχής εκπροσώπηση των octalness επιλέχθηκε: μηδενικό. Έτσι, Γ, 0100 64 δεν σημαίνει, 100, και 08 είναι ένα λάθος, όχι 8. Ακόμα περισσότερο, δυστυχώς, αυτό αναχρονισμός έχει αντιγραφεί σε σχεδόν όλες τις σύγχρονες γλώσσες, συμπεριλαμβανομένων JavaScript, όπου χρησιμοποιείται μόνο για τη δημιουργία λάθη. Δεν έχει άλλο σκοπό. Έτσι, σε αυστηρό τρόπο, οι μορφές οκταδικό δεν επιτρέπονται πλέον.

Και τα λοιπά

Η arguments ψευδο πίνακα γίνεται λίγο πιο σειρά-όπως στην ES5. Σε αυστηρό τρόπο, χάνει του callee και caller ιδιότητες. Αυτό καθιστά δυνατό να περάσει σας arguments για να μη αξιόπιστο κωδικό, χωρίς να παραιτούνται από ένα πολύ εμπιστευτικό πλαίσιο. Επίσης, η arguments ιδιοκτησία των λειτουργιών αποβάλλεται.

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

Εάν το πρόγραμμά σας περνά JSLint , κατά πάσα πιθανότητα θα λειτουργήσει σε αυστηρό τρόπο.

Είναι ακόμα έναν ατελή κόσμο

Υπάρχουν ακόμη προβλήματα σε JavaScript ότι η αυστηρή λειτουργία δεν ασχολείται. Για παράδειγμα, ερωτηματικό εισαγωγή εξακολουθεί να αποτελεί κίνδυνο, και 0,1 + 0,2 εξακολουθεί να μην είναι ίσος με 0,3. Διόρθωση των προβλημάτων αυτών θα πρέπει να περιμένουν για μελλοντικές εκδόσεις.

Γιατί Αυστηρή Θέματα λειτουργίας

Εκτός από τα προφανή οφέλη για την αξιοπιστία του προγράμματος και η αναγνωσιμότητα, η αυστηρή λειτουργία βοηθά στην επίλυση του προβλήματος Mashup. Θέλουμε να είμαστε σε θέση να καλεί τρίτα κωδικό μέρος στις σελίδες μας να κάνουμε χρήσιμα πράγματα για εμάς και τους χρήστες μας, χωρίς να δώσει εν λόγω κώδικα την άδεια να αναλάβει το πρόγραμμα περιήγησης ή να παραποιήσει το ίδιο για τον χρήστη ή διακομιστές μας. Πρέπει να περιορίζουν το τρίτο κόμμα κωδικό. Συστήματα όπως το Caja της Google να το κάνετε αυτό, αλλά με σημαντικό κόστος στην απόδοση και την ταλαιπωρία. Δικά μου AdSafe σύστημα κάνει επίσης αυτό, αλλά με το κόστος της εξάλειψης this και [] Τα στοιχεία προσπελαύνονται από τη γλώσσα, που μπορεί να κάνει δύσκολη την έγκριση. Αυστηρή λειτουργία μας επιτρέπει να κάνει την τρίτη κωδικό κόμμα με την άνεση και την απόδοση των AdSafe και την εκφραστικότητα της Κάχα. Αυτό θα είναι πάρα πολύ σημαντικό, όπως τις ιστοσελίδες μας γίνονται πιο πολύπλοκες και πιο συνδεδεμένο.

Αυστηρή λειτουργία δεν λύνει το πρόβλημα XSS. Η λύση στο πρόβλημα αυτό εξαρτάται από το W3C αναλαμβάνοντας κάποια θετική δράση .

ES5/strict είναι τώρα σε προεπισκόπηση, και σύντομα θα είναι στάνταρ εξοπλισμός σε όλους τους browsers συμβατό πρότυπα παντού.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

Η θέση του ακινήτου CSS

Αυτή η ιδιότητα ισχύει για όλα τα στοιχεία. Έχει πέντε πιθανές τιμές:

• static
• relative
• absolute
• fixed
• inherit

θέση: στατική

Από το άρθρο 9 Visual μοντέλο μορφοποίησης :

Το κουτί είναι μια κανονική θέση, που ορίζονται σύμφωνα με την κανονική ροή . Τα top , right , bottom και left ιδιότητες δεν ισχύουν.

Πράγματα που πρέπει να προσέξετε σε αυτή την επίδειξη

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

Πράγματα που πρέπει να θυμάστε

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

θέση: σχετική

Από το άρθρο 9 Visual μοντέλο μορφοποίησης :

Η θέση του κουτιού υπολογίζεται σύμφωνα με την κανονική ροή (αυτό ονομάζεται η θέση στην κανονική ροή ). Στη συνέχεια, το πλαίσιο αυτό αντισταθμίζεται σε σχέση με την κανονική της θέση. Όταν μια θέση Β είναι σχετικά θέση, η θέση του στο ακόλουθο κουτί υπολογίζεται σαν Β δεν αντισταθμίστηκαν.

Πράγματα που πρέπει να προσέξετε σε αυτή την επίδειξη

• Πλαίσιο «δύο» έχει μετακινηθεί προς τα κάτω κατά 300 pixels, αλλά το πλαίσιο «τρεις» καθώς και οι ακόλουθες παράγραφοι παρέμεινε στην ίδια θέση. Φαίνεται σαν να το κουτί είχε αρθεί από την σελίδα, αφήνοντας πίσω του το αποτύπωμα. Αυτό συμβαίνει επειδή συμψηφισμό σχετικά τοποθετημένο κιβώτιο δεν διαταράσσει τη ροή.
• Τα σχετικά τοποθετηθεί επικαλύψεις κουτί τα ακόλουθα στοιχεία. Δείχνει μπροστά από άλλες θέσεις.

Πράγματα που πρέπει να θυμάστε

• Οι τιμές πάντα Αξονική = αριστερά-δεξιά και πάνω-κάτω =. Εάν η direction του μπλοκ που περιέχουν είναι ltr , η τιμή του «αριστερού» νίκες και «δεξιά» γίνεται - «αριστερά». Αν direction της που περιέχουν μπλοκ είναι rtl , το «δικαίωμα» νίκες και «αριστερά» αγνοείται. Συγγραφείς θα μπορούσαν να επωφεληθούν από το πώς λειτουργούν τα πράγματα με τον καθορισμό ίσης αξίας σε αντίθετη ιδιότητες.
• Σε αντίθεση με το «απόλυτο» μοντέλο, top , right , bottom και left ιδιότητες δεν μπορεί να επεκτείνεται ούτε συρρικνώνεται το πλαίσιο (που δεν μπορεί να αλλάξει το μέγεθός του).

position: absolute

Από το άρθρο 9 Visual μοντέλο μορφοποίησης :

Η θέση του κουτιού (και ενδεχομένως το μέγεθος) που ορίζεται με την top , right , bottom και left ιδιότητες. Αυτές οι ιδιότητες καθορίζουν αντισταθμιστικά οφέλη σε σχέση με του κουτιού που περιέχει μπλοκ . Μια απόλυτα τοποθετημένο κιβώτιο έχει αφαιρεθεί από την κανονική ροή εξ ολοκλήρου (δεν έχει αντίκτυπο στη μεταγενέστερη αδέλφια) και αποδίδεται μια θέση σε σχέση με ένα μπλοκ που περιέχει. Επίσης, αν και απολύτως τοποθετηθεί κουτιά έχουν τα περιθώρια, δεν καταρρέουν με άλλα περιθώρια.

Πράγματα που πρέπει να προσέξετε σε αυτή την επίδειξη

• Επειδή δεν αντισταθμίζεται πλαίσιο έχει καθοριστεί, θέση «δύο» δεν μετακινούνται από την αρχική του θέση, αλλά αν είχαμε χρησιμοποιήσει top:0;left:0; για παράδειγμα, ότι η θέση θα είναι στην επάνω αριστερή γωνία της θύρας .
• Διάταξη σοφός, είναι σαν «δύο» κουτί είχε στυλ με display:none . Το κουτί έχει αφαιρεθεί από τη ροή.
• Με «δύο» από κουτί της ροής, στη θέση «τρία» έχει μετακινηθεί προς τα επάνω κατά το πλαίσιο «ένα» (οι παράγραφοι ακολούθησαν).
• Όπως όλα τα στοιχεία που αφαιρούνται από τη ροή, «δύο» κουτί έχει οριζόντια μεμβράνη συρρίκνωσης.

Πράγματα που πρέπει να θυμάστε

• Για κάθε θέση «απόλυτη» ή «σταθερό» στοιχείο η υπολογιζόμενη αξία για την display είναι block .
• Για κάθε θέση «απόλυτη» ή «σταθερό» στοιχείο η υπολογιζόμενη αξία για float είναι none .
• «Περιέχει μπλοκ Α 'είναι ένα πλαίσιο που καθιερώνει ένα πλαίσιο τοποθέτησης. Έχει διαπιστωθεί από τον πλησιέστερο πρόγονο με «θέση» της «απόλυτης», «σχέση» ή «σταθερό». Αυτό σημαίνει ότι το κουτί γονέας δεν μπορεί να είναι το μπλοκ που περιέχουν .
• Η προεπιλεγμένη θέση της απόλυτης τοποθέτησης κουτί δεν είναι πάντα το ίδιο σαν να ήταν διακοσμημένα με κορυφαία: 0? Αριστερά: 0? (Στο πλαίσιο LTR). Και αυτό για δύο λόγους:
  1. Το μπλοκ που περιέχει ένα κουτί τοποθετημένο καθορίζεται από την πλησιέστερη θέση πρόγονο? Αν δεν υπάρχει, το δοχείο αναφοράς είναι το στοιχείο ρίζας. Το μπλοκ που περιέχει κατά την οποία οι ριζικό στοιχείο ζωής είναι ένα ορθογώνιο ονομάζεται αρχική περιέχουν μπλοκ. Για συνεχή μέσα, έχει τις διαστάσεις του viewport (ένα παράθυρο ή άλλη περιοχή προβολής στην οθόνη) και βρίσκεται σταθερά στο καταγωγή καμβά. Το παράδειγμα αυτό δείχνει το κουτί τοποθετημένο σε σχέση με το viewport (η προεπιλογή που περιέχει μπλοκ).
  2. Το στοιχείο είναι τοποθετημένο σε σχέση με το κουτί γεμίσει, όχι το πλαίσιο περιεχομένου, ούτε στο πλαίσιο των συνόρων της που περιέχουν μπλοκ. Αυτό το νέο παράδειγμα δείχνει όταν η θέση "δύο" θα ήταν αν τα άκρα του πλαισίου γεμίσει δεν αγγίζουν τις άκρες του κουτιού περιεχομένου (που περιέχει το μπλοκ είναι body ).
• Το μέγεθος του κουτιού μπορεί να είναι το αποτέλεσμα της top , right , bottom και left αξίες των ακινήτων. Για παράδειγμα, το μηδενισμό από όλες τις ιδιότητες που θα κάνει το τέντωμα πλαίσιο για να ταιριάζει με τις διαστάσεις του κουτιού που περιέχει το υλικό παραγεμίσματος του μπλοκ του. Δείτε το μηδενισμό από όλα τα αντισταθμιστικά οφέλη κουτί (σημείωση: IE6 δεν τεντώσει το κουτί).
• Για να δημιουργήσετε μια μάσκα επικάλυψης που δεν μετακινηθείτε με το έγγραφο (όπως στο προηγούμενο παράδειγμα ), είτε χρησιμοποιούν fixed αντί του absolute στυλ ή body με position:relative με την αρχική τοποθέτηση μπλοκ είναι η viewport (στυλ html δεν θα μπορούσε να λειτουργήσει σε IE) . Δεδομένου ότι αυτή η επίδειξη επικάλυψης δείχνει.
• position:absolute ωθήσεις haslayout .

Το πιο σημαντικό πράγμα που πρέπει να θυμάστε

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

θέση: σταθερό

Από το άρθρο 9 Visual μοντέλο μορφοποίησης :

Πάγια θέση είναι μια υποκατηγορία της απόλυτης θέσης. Η μόνη διαφορά είναι ότι για μια σταθερή θέση κουτί, που περιέχει το μπλοκ είναι εγκατεστημένος από το viewport . Για συνεχή μέσα , σταθερές θέσεις δεν κινούνται όταν το έγγραφο κύλιση. Από αυτή την άποψη, είναι παρόμοια με σταθερές εικόνες φόντου . Για Paged Media (όπου το περιεχόμενο του εγγράφου χωρίζεται σε μία ή περισσότερες διακριτές σελίδες), τα κουτιά με τις σταθερές θέσεις επαναλαμβάνεται σε κάθε σελίδα. Αυτό είναι χρήσιμο για την τοποθέτηση, για παράδειγμα, μια υπογραφή στο κάτω μέρος κάθε σελίδας. Περικόπτονται Κουτιά με σταθερή θέση που είναι μεγαλύτερη από την περιοχή της σελίδας. Μέρη του σταθερού πλαισίου θέση που δεν είναι ορατές στην αρχική περιέχει μπλοκ δεν θα εκτυπωθεί.

Πράγματα που πρέπει να προσέξετε σε αυτή την επίδειξη :

• Δεδομένου ότι η σταθερή θέση είναι μια υποκατηγορία της απόλυτης θέσης, ό, τι ίσχυε για «απόλυτη» ισχύει επίσης και για «σταθερό» (το στοιχείο συρρικνωθεί δεματικά, αφαιρείται από τη ροή, κλπ.).
• Το κιβώτιο είναι τοποθετημένο σε σχέση με το viewport, δεν μετακινηθείτε με τη σελίδα.
• Σε IE 6, το πλαίσιο εμφανίζεται ως στατική θέση , αλλά υπάρχει ένα «αστείο» λύση γι 'αυτό.
• Κατά την εκτύπωση του εγγράφου, κουτί «δύο» εμφανίζεται σε κάθε σελίδα.

Πράγματα που πρέπει να θυμάστε:

• Η θέση του κουτιού υπολογίζεται σύμφωνα με την «απόλυτη» μοντέλο, αλλά, επιπλέον, το πλαίσιο έχει καθοριστεί σε σχέση με κάποια αναφορά. Στην περίπτωση των φορητών, προβολής, οθόνη, TTY, τηλεόραση και τύπους μέσων, το πλαίσιο έχει καθοριστεί σε σχέση με το viewport και δεν μετακινείται κατά την κύλιση.
• Περιεχόμενο μπορεί να είναι inaccessile να βλέποντες χρήστες, εάν μέρος του κουτιού είναι εκτός της περιοχής του viewport.
• Στην περίπτωση των έντυπων μέσων ενημέρωσης τύπου, οι συντάκτες μπορούν να θέλετε να αποτρέψετε ένα στοιχείο από την εμφάνιση σε κάθε εκτυπωμένη σελίδα. Ίσως με ένα @ media κανόνα, όπως σε:

    @ Έντυπων μέσων ενημέρωσης { 
     # Logo {θέση: στατική?}
   } 

• Όπως position:absolute , position:fixed θα προκαλέσει haslayout στον IE.

θέση: κληρονομούν

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

Σημειώστε ότι το IE 6 και 7 δεν υποστηρίζουν αυτή τη λέξη-κλειδί, εκτός όταν χρησιμοποιείται με direction και visibility (βλ. Αξία Ακινήτου CSS κληρονομούν ).

Πράγματα που πρέπει να εξετάσουν

Αντισταθμίζει Πλαίσιο

Να γνωρίζετε ότι για απολύτως και σταθερά τοποθετημένα πλαίσια, οι αξίες που σε ποσοστό top , right , bottom και left υπολογίζονται σύμφωνα με τις διαστάσεις του που περιέχει μπλοκ (το οποίο δεν μπορεί να είναι το κουτί γονέα).

«Θέση» και «ξεχειλίζουν»

Ένα κουτί με στυλ overflow:hidden κλιπ θα τοποθετηθεί σχετικά στοιχεία (ένθετα κουτιά), αλλά δεν θα κρύψει πάντα απόλυτα τοποθετημένο αυτά. Αυτό συμβαίνει επειδή το κουτί γονέας δεν είναι πάντα το μπλοκ που περιέχει (το πλησιέστερο πρόγονο με μια «θέση» της «απόλυτης», «σχέση» ή «σταθερό»).

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

Περιθώρια

Οι συγγραφείς μπορούν να χρησιμοποιήσουν τα περιθώρια σχετικά με τα στοιχεία, ανεξαρτήτως του καθεστώτος της θέσης τους.

Η περίπτωση του IE

Στην Ιρλανδία, «τοποθετώντας» ένα κουτί μπορεί να είναι ευλογία ή κατάρα:

• Σε IE6, position:relative (with haslayout) μπορεί να χρησιμοποιηθεί για να αποτρέψει ένα κουτί στιλ, με αρνητικό περιθώριο από να ψαλιδιστεί από ένα δοχείο γονέα (δείτε πώς η τοποθέτηση κουτί διορθώνει αυτό το θέμα).
• Τοποθέτηση ένα στοιχείο μπορεί να «διαταράξει» το δρόμο στοίβα κουτιών στον IE 6 και 7, καθώς αυτό μπορεί να δημιουργήσει ένα νέο πλαίσιο στοίβαγμα (δείτε μια δοκιμή ).

Στοίβαξης για στοίβαγμα και το επίπεδο

• Σύμφωνα με την ακολουθία του πηγαίου κώδικα, τοποθετημένα κουτιά έρχονται μπροστά από άρματα και τα κουτιά στην κανονική ροή.
• Οι συγγραφείς μπορούν να καθορίζουν τα επίπεδα στοίβα μέσω της περιουσίας του «z-index» μόνο σε κουτιά τοποθετημένα.
• Σε IE6 και 7, το απλό γεγονός της τοποθέτησης ενός πλαισίου μπορεί να δημιουργήσει μια συσσώρευση πλαίσιο (βλ. ανωτέρω, « η περίπτωση του IE ").

Κινητές συσκευές

Διαβάστε το άρθρο του PPK, η [έκτη] αξίας θέση , για να μάθετε γιατί το κινητό πωλητές browser δεν μπορεί να στηρίξει πραγματικά position:fixed .

Περαιτέρω αναγνώσεις

• Οπτική μοντέλο μορφοποίησης
• Θέση (CSS ιδιοκτησίας)
• Η δήλωση θέσης

Ένα "φάντασμα" με αναλογία DrLangbhani:

Ένα στοιχείο με τη σχετική θέση είναι πάντα αντισταθμίζεται σε σχέση με την κανονική του θέση είναι στη ροή. Με άλλα λόγια, μετατοπίζεται σε σχέση με την οποία θα ήταν υπό κανονικές συνθήκες, και τη μετατόπιση του βάρους δεν επηρεάζει τη διάταξη των στοιχείων γύρω από αυτό. Είναι σαν ένα φάντασμα που έχει αφήσει το σώμα του πίσω. Ένα σώμα που έχει πλάτος και το ύψος και επηρεάζει το περιβάλλον του, αλλά είναι αόρατη. Το φάντασμα κουτί είναι σε θέση να κινηθούν, αλλά είναι ακόμα συνδεδεμένο με το παλιό σώμα ότι η θέση του εξακολουθεί να μετράται από αυτό. Τώρα, ένα στοιχείο με απόλυτη θέση είναι ακόμη πιο εύκολη. Δεν είναι πλέον επηρεάζει το περιβάλλον του σε όλα (είναι τραβηγμένη από τη ροή διάταξης). Είναι πλέον ένα πραγματικό φάντασμα που δεν άφησαν πίσω τους το σώμα. Όσον αφορά τα συγγενικά στοιχεία του είναι σαν να έχει παύσει να υφίσταται. Για να πάρει τη θέση του, να κοιτάξετε μέσα από καθένα από τα στοιχεία της μητρικής μέχρι να βρείτε μία είτε με την θέση: σχετική, [θέση: σταθερό,] ή θέση: απόλυτη. Το στοιχείο αυτό θα χρησιμεύσει ως σημείο αναφοράς. Μόνο αν δεν μπορείτε να βρείτε μια "θέση" στοιχείο θα πρέπει να αντισταθμιστεί από το έγγραφο.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

Στο YUI Γκαλερί 3: Η ενότητα Carousel

Τι είναι ένα γαϊτανάκι;

Ένα στοιχείο ελέγχου Carousel παρέχει ένα widget για την περιήγηση σε ένα σύνολο από αντικείμενα, όπως παρατάχθηκαν κάθετα ή οριζόντια σε ένα υπερφορτωμένο περιοχή της σελίδας. Το «γαϊτανάκι» μεταφορά προέρχεται από μια αναλογία για να γλιστρήσει καρουζέλ στις ημέρες της φωτογραφίας ταινία? Το Carousel έλεγχος μπορεί να διατηρήσει την πιστότητα με την παρούσα μεταφορά, επιτρέποντας τη συνεχή, κυκλική πλοήγηση μέσω όλων των τμημάτων του περιεχομένου.

Το Carousel είναι μέρος μιας οικογένειας των widgets που σας επιτρέπουν να "υπερφόρτωση" ένα χώρο στη σελίδα, που παρέχει περισσότερο περιεχόμενο για το διάστημα από ό, τι χωράει μέσα διαστάσεις της, παρέχοντας παράλληλα μια εύκολη, διαισθητική μηχανισμού για τον χρήστη να ανακαλύψει και να περιηγηθείτε στο πρόσθετο περιεχόμενο . Ακορντεόν, Καρτέλες, δέντρα και ScrollViews είναι άλλα παραδείγματα αυτού του είδους.

Γιατί ακόμη Carousel έλεγχο;

3 YUI χρειάζεται ένα ισχυρό, πλούσιο σε χαρακτηριστικά Carousel (όπως έχουμε YUI 2 ). Ο σχεδιαστικός στόχος για αυτό το γαϊτανάκι ήταν να γίνει και καθαρούς και να προσθέσετε επιπλέον διαμορφώσεις μέσω plugins, εκμεταλλευόμενοι YUI 3 « εγγενή υποστήριξη για να διατηρήσουν σπονδυλωτής ελαφρότητα και την ταχύτητα.

YUI 3 Πλαίσιο Widget

Ένα από τα μεγαλύτερα πλεονεκτήματα της γραφής έθιμο widgets χρησιμοποιώντας YUI 3 είναι το πλαίσιο Widget (περισσότερα σχετικά με το πλαίσιο Widget: οδηγός χρήσης , σε βάθος εισαγωγή βίντεο ). Συγκρίνοντας το Carousel στο YUI 2.8.2 να μου YUI 3 Carousel Πινακοθήκη , το YUI 3 έκδοση είναι λιτή και κομψή. Αυτό οφείλεται στο γεγονός ότι το μεγαλύτερο μέρος της βαριάς ανύψωσης σε σχέση με την παροχή της θεμελίωσης παρέχοντας κοινό σύνολο χαρακτηριστικών widget, μια πειθαρχημένη κύκλου ζωής, προοδευτική υποστήριξη αξεσουάρ, κ.λπ. έρχονται με την κατηγορία Widget.

Η YUI 3 πλαίσιο Widget παρέχει επίσης ένα σταθερό μοτίβο MVC που προωθεί κάθε widget να υιοθετήσουν μεθόδους διαχωρισμού των κρατικών έναντι UI μεθόδους ενημέρωσης. Αυτό κάνει ο κώδικας πολύ καθαρά και εύκολα στη συντήρηση. Στην πραγματικότητα αυτό είναι ένας από τους σημαντικότερους παράγοντες για τους οποίους η YUI 3 Carousel είναι καλύτερη από προηγούμενες YUI 2-με βάση τον ξάδελφό του.

Η YUI 3 Plugin μοντέλο επιτρέπει στους προγραμματιστές να προσθέσει νέες λειτουργίες ή να τροποποιήσει την υπάρχουσα συμπεριφορά σε αντικείμενα. Αυτό επιτρέπει την προσθήκη επιπλέον λειτουργικότητα στην κορυφή του Carousel να τραβήξει δυναμικά στοιχεία μέσω Ajax, κλπ. Έτσι, το YUI 3 Carousel δεν έχουν κωδικό κίνησης ψήνεται σε αυτό, αλλά, αντίθετα, έχω δημιουργήσει ένα plugin που προσθέτει υποστήριξη κινούμενα σχέδια για περιπτώσεις όπου απαιτείται . Αυτό βοηθά να κρατήσει το στοιχείο πολύ ελαφρύ.

Μια Carousel Gallery για τη δική σας ιστοσελίδα

Μετά την ανάγνωση για το τι Carousel είναι και πώς μπορεί να σας βοηθήσει να βελτιώσουμε την ιστοσελίδα σας, ελπίζουμε ότι αισθάνονται πρόθυμοι να λερώσετε τα χέρια σας. Μην ανησυχείτε, με YUI 3 επέκταση Γκαλερί Carousel μας, εφαρμόζοντας ένα καρουσέλ στην ιστοσελίδα σας είναι τόσο εύκολη όσο παρέχοντας μια λίστα με κουκκίδες σε μορφή HTML. Αυτό δεν είναι απλώς ένα γήπεδο πωλήσεων - αυτό είναι το πώς θα ενταχθεί πρόσφατα Γκαλερί Carousel στο Yahoo! Sports σελίδα αποτελεσμάτων αναζήτησης.

Ένα απλό παράδειγμα

Ας ξεκινήσουμε με ένα απλό παράδειγμα το οποίο θα καλύψει σχεδόν όλα όσα χρειάζεται να ξέρετε. Ο ευκολότερος τρόπος για σας να χρησιμοποιήσετε το νέο Ιπποδρόμιο Gallery είναι να αφήσουμε YUI 3 φορτώσετε automagically από δίκτυο διανομής περιεχομένου της Yahoo. Υπενθυμίζοντας τι Carousel είναι μια κυλιόμενη λίστα των στοιχείων, έχουμε δημιουργήσει μια λίστα σε μορφή HTML. Θα περιλαμβάνει τον κατάλογο σε ένα div, το οποίο επιτρέπει το JavaScript για να μας βρείτε εύκολα και να εργαστούν με αυτό. Εάν έχετε ήδη κάποια στοιχεία που εκπροσωπούνται σε μια λίστα σαν τρόπο σήμανσης σας, μπορείτε επίσης να βάλετε μόνο το καρουσέλ div γύρω από αυτό και να δοκιμάσετε την τύχη σας! Είναι πολύ σημαντικό να πούμε ότι, αν και είμαστε χρησιμοποιώντας ένα παράδειγμα της εικόνας εδώ, μπορείτε να χρησιμοποιήσετε Carousel Gallery για οτιδήποτε θέλετε!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Span> 

Τώρα που έχουμε τα δεδομένα μας για να εργαστεί με, θέλουμε να ενισχύσουμε τα βλέμματα, δείχνοντας τα πέντε στοιχεία, χρησιμοποιώντας το Carousel widget. Υποθέτοντας ότι χρησιμοποιείτε ήδη YUI 3 αυτό είναι ένα απλό έργο. Το μόνο πράγμα που μπορεί να μην έχουν ξαναδεί, ανάλογα με το πόσο βαθιά θα έχουν σκάψιμο σε YUI 3 και την Πινακοθήκη στο παρελθόν, είναι ότι προσδιορίζει μια έκδοση Γκαλερί ρητά. Αυτό είναι απαραίτητο επειδή είμαστε χρησιμοποιώντας ένα νέο widget, το οποίο δεν είναι όπως στην Πινακοθήκη χτίσει ο loader YUI της προσπαθεί να φορτώσει από από προεπιλογή. Ωστόσο, όπως YUI και YUI Γκαλερί ώριμη, αυτό δεν θα είναι πλέον απαραίτητο στο μέλλον, όταν η προεπιλεγμένη κατασκευή αριθμός αυξάνεται.

  YUI ({gallery: «γκαλερί-2010.10.20-19-33 '})
  . Χρήση ("γκαλερί-γαϊτανάκι», «γκαλερί καρουσέλ-anim", "υποκατάστατο", η λειτουργία (Y) {
   var καρουσέλ = νέα Y.Carousel ({boundingBox: "# δοχείο",
    contentBox: "# δοχείο> ol"})?
   carousel.plug (Y.CarouselAnimPlugin, {animation: {ταχύτητα: 0,7}})?
   carousel.render ()?
 })? 

(Με την ευκαιρία, αν σας ενδιαφέρει να πάρει καινούργια πράγματα που μπορείτε να επισκεφτείτε το YUI 3 αποθετήριο Γκαλερί με github ή πιρούνι Gopal του , όπου αναπτύσσει Carousel. Αν βρείτε κάποιο bug, είμαστε πάντα πρόθυμοι να ακούσουμε γι 'αυτό.)

Δημιουργία αντιγράφων ασφαλείας για το παράδειγμά μας ... YUI θα πάρει από εδώ. Ο φορτωτής τραβά αυτόματα Γκαλερί Carousel και τις εξαρτήσεις του από το δίκτυο διανομής περιεχομένου της Yahoo. Μετά από αυτό, το γαϊτανάκι με τις οποίες ξεκινά και εμφανίζεται. Ο χρήστης μπορεί στη συνέχεια κάντε κλικ στο αριστερό ή δεξί βέλος για να μετακινηθείτε γύρω. Παρακαλώ συγχωρήστε με για την άσκηση σε μια σειρά από περιττές περιπλοκές, αλλά εγώ δεν μπορούσα να αντισταθώ. Συνήθιζα Y.CarouselAnimPlugin να αφήσει μας καρουσέλ διαφάνεια ομαλά από τη μία σελίδα στην άλλη και όχι μόνο την εμφάνιση του αμέσως επόμενη σελίδα. Αισθανθείτε ελεύθερος να παίξει με την παράμετρο της ταχύτητας, αν επιθυμείτε.

Όπως μπορείτε να δείτε από το screenshot παραπάνω, το Carousel είναι έτοιμο και λειτουργεί. Ωστόσο, το CSS δεν μπορεί να ταιριάζει πολύ καλά στο υπόλοιπο της σελίδας σας. This leads us to our next section, where we'll discuss how to customize Gallery Carousel.

Customizing Gallery Carousel

Now that you have your Carousel up and running and identified a use case for your website, you hopefully want to integrate it seamlessly. As mentioned previously, we did so for our Sports Search Results Page. If you want to increase the number of visible items, for example from three to four, you can do so by modifying the line which instantiates Carousel.

 var carousel = new Y.Carousel({ boundingBox: "#container",
 contentBox: "#container > ol", numVisible: 4 }); 

Still not good enough? Yeah, right. Luckily CSS allows us to add our own style definitions and even overwrite the initial ones without touching any existing CSS. So your first step will probably be to remove the borders, because they are quite obtrusive. Just add the following CSS to your page header.

 .YUI 3-carousel {
  border: none !important;
 }
.YUI 3-carousel-nav {
  background: none !important;
 }
.carousel ol li {
  border: none !important;
 } 

Now, that looks better. I've also used a negative margin to reduce the gap between my Carousel and the heading. However, we are still not completely there. I assume that you also want to use your own custom buttons, which integrate nicely into your page layout. For this example we will use the same buttons that are also used on Yahoo's search result pages. This requires a bit more, but still simple, CSS.

 .YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
 }
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
 }
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
 }
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
 }
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
 } 

We will leave it to that for today and hope you feel ready to get started. At least that was all that we needed. However, depending on how big your site is and how interested you are in its performance, there are general thoughts about loading something from a third party content delivery network that also apply here. For example, Sidnei da Silva laid out some interesting thoughts in a blog post earlier this month. We would be happy to provide a How To that explains how a YUI widget and its dependencies can be moved to your own website, or even content delivery network, so you are able to keep the number of HTTP requests as low as possible. Let us know if you are interested, we are looking forward to your feedback!

More to Explore in the Gallery

The excellent team of Eduardo Lundgren and Nate Cavanaugh of Liferay have a Carousel component in the Gallery as well — certainly worth checking out if you're in the market for this kind of control.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

YUI Theater — Ryan Grove: “Introducing YUI 3 AutoComplete” (42 min.)

In this talk from YUIConf 2010 , YUI 3 AutoComplete author Ryan Grove ( @yaypie ) takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component (which is coming in the soon-to-be-released YUI 3.3.0) and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities. ( Note : If you enjoy this talk, you might want to check out Ryan's other excellent talk from this year, “ Achieving Performance Zen with YUI 3 .”)

If the video embed below doesn't show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater .

• Download HD video (480p ~297MB)
• Download video (m4v)
• Download slides

Other Recent YUI Theater Videos:

• Paul Donnelly and Nagesh Susarla: YQL + YUI: Building End-to-End Applications — When developing widgets, it's not how to use YQL data that comes up as a question, but rather how to access it. In this YUIConf 2010 session, YQL engineers Paul Donnelly and Nagesh Susarla review starting your query out in the YQL console, accessing YQL data via the various endpoints, and going through YQL's various authentication layers.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL — In this session from YUIConf 2010, TipTheWeb cofounder and YUI contributor Eric Ferraiuolo discusses the creation of a project-scale codebase using YUI 3, YUI 3 Gallery, and YQL.
• Reid Burke: Yeti: YUI's Easy Testing Interface — Testing cross-browser web applications has been too difficult for too long: You're either manually reloading browsers or struggling with complicated automation software. In this session from YUIConf 2010, YUI engineer Reid Burke talks about how YUI's Yeti project helps to address these problems. Reid discusses when you should use automated testing for your frontend code, how Yeti works with YUI Test, how to setup cross-browser testing in minutes and how the YUI team uses Yeti to ship a better product.
• Douglas Crockford: Project Future — Yahoo! JavaScript architect Douglas Crockford reflects on the life of Walt Disney, who dreamed of creating a 'City of the Future' in Florida as part of the project that became Disney World. (This is not a technical session, but rather one about big dreams and the life lessons we can draw from them.)
• Tom Hughes-Croucher: How to Stop Writing Spaghetti Code — In this session from YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher explores different coding styles for event-driven, non-blocking server-side JavaScript and which styles are most successful.

CC Content/Used by Kind Permission:

• http://www.flickr.com/photos/franksvalli/5166422476/
• http://www.flickr.com/photos/franksvalli/5165821437/

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!