2010 »Αύγουστος» Yahoo! User Interface Blog (YUIBlog)

Yui Θέατρο - Douglas Crockford: "Crockford σε JavaScript - Σκηνή 6: Loopage" (52 λεπτά).

30 Αυγ 2010 στις 15:47 από τον Eric Miraglia | Σε Yui Θέατρο | 8 Σχόλια

Τελευταία δόση Douglas Crockford στο " Crockford σε JavaScript "σειρά, μια ομιλία με την οποία καλύπτει το ρόλο των βρόχων γεγονός και τη σημασία των server-side JavaScript, είναι τώρα διαθέσιμη σε βίντεο. Flash βίντεο είναι ενσωματωμένα κάτω, ή μπορείτε να κατεβάσετε το βίντεο HD (480p ~ 370MB) . Video από τα πρώτα πέντε διαλέξεις είναι διαθέσιμες στην Crockford στη σελίδα JavaScript .

Άλλα πρόσφατα Βίντεο Θέατρο Yui:

Nicholas Ζάκα και ο Βίκτωρ Tsaran: Προσβασιμότητα στον Ιστοσελίδα Yahoo - Nicholas Ζάκα, κύριος δημιουργός της αρχικής σελίδας του Yahoo!, και Victor Tsaran, το Yahoo! 's ανώτατο διευθυντικό στέλεχος της προσβασιμότητας, να συζητήσουν τις στρατηγικές και τις μεθόδους που έκανε μια από τις πιο συχνά επισκεπτόμενες ιστοσελίδες στη τον κόσμο πλήρως προσβάσιμο. Η ομιλία πραγματοποιήθηκε στο του Ιουνίου του 2010 BayJax meetup στο Yahoo.
Dennis Lembree: Κάνοντας το JavaScript Πρόσβαση - Dennis Lembree, ένας εμπειρογνώμονας της προσβασιμότητας και ο δημιουργός του AccessibleTwitter συζητά για τις προκλήσεις της λήψης JS-enabled τοποθεσίες προσβάσιμες. Η ομιλία πραγματοποιήθηκε στο του Ιουνίου του 2010 BayJax meetup στο Yahoo.
Ryan Dahl: Εισαγωγή στην NodeJS - Ryan Dahl, ο δημιουργός του NodeJS, εισάγει το έργο και μιλά για βελτιώσεις στην απόδοση και νέας αρχιτεκτονικής. Η ομιλία πραγματοποιήθηκε στο του Μαΐου 2010 BayJax meetup στο Yahoo.
Ηλίας Insua: jsdom: ένα CommonJS Εφαρμογή του DOM - Ηλίας Insua εισάγει μια server-side εφαρμογή της JavaScript στο DOM του Μαΐου 2010 BayJax meetup στο Yahoo.
Nicholas Ζάκα, Στογιάν Στέφανοφ, ο Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Πέντε παράγοντες για υψηλής απόδοσης του O'Reilly JavaScript συζητήσουν προηγμένες JavaScript και DOM βελτιστοποιήσεις scripting σε τον Απρίλιο του 2010 BayJax meetup στο Yahoo.

Εγγραφή στη Yui Θέατρο:

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

Παρουσιάζοντας Yeti: Η Yui Εύκολο Interface Δοκιμές

25 Αυγ 2010 στις 3:16 pm από Reid Burke | Σε Ανάπτυξης | 16 Σχόλια

Δοκιμές JavaScript είναι ένα σημαντικό, αλλά συχνά παραβλέπεται μέρος της ανάπτυξης ιστοσελίδων. Ένας λόγος είναι επειδή την ανάπτυξη για το web σημαίνει στόχευση περισσότερα από ένα πρόγραμμα περιήγησης. Yui κατατάσσει σήμερα 11 διαφορετικά περιβάλλοντα, που απολαμβάνουν υψηλότερο επίπεδο υποστήριξή μας. Επιπλέον, εξετάζουμε επίσης Yui στις αναδυόμενες X ποιότητας περιβάλλοντα όπως φορητές συσκευές. Όταν έχεις τόσα πολλά διαφορετικά περιβάλλοντα για την υποστήριξη, είναι δελεαστικό να πάρει μόλις δύο σημαντικότερες για την ανάπτυξη με τοπικά και ελπίζουμε για το καλύτερο.

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

Σήμερα, είμαι ενθουσιασμένος για να απελευθερώσει Yeti 0.1.0, ένα πειραματικό εργαλείο της γραμμής εντολών σχεδιαστεί για να κάνουν cross-browser δοκιμές ευκολότερη προτού να δεσμεύσετε μια γραμμή κώδικα.

Yeti ξεκινά αυτόματα JavaScript δοκιμές μονάδα σε ένα πρόγραμμα περιήγησης και τις εκθέσεις με τα αποτελέσματα χωρίς να φύγετε από το τερματικό σας. Είναι πολύ απλό στη χρήση: Απλώς τρέχουν yeti test.html για να πάρει τα αποτελέσματα της δοκιμής Yui εξέταση σε test.html . Μπορείτε να περάσετε πολλές εγγράφων HTML να δοκιμάσουν πολλά συστατικά με τη μία.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

Η πραγματική δύναμη του Yeti τρέχει δοκιμές σε πολλαπλά προγράμματα περιήγησης ταυτόχρονα. Παρά το γεγονός ότι Yeti μπορεί να ανοίξει τις δοκιμές σας ένα-ένα για τον υπολογιστή σας, Yeti σας επιτρέπει να εκτελέσετε δοκιμές σε οποιοδήποτε πρόγραμμα περιήγησης σε οποιαδήποτε συσκευή-όλες την ίδια στιγμή.

Αν τρέχετε Yeti χωρίς επιχειρήματα, θα ξεκινήσει ένα web server που μπορείτε να έχετε πρόσβαση σε http://localhost:8000 . Μπορείτε να το σημείο τότε browsers ή συσκευές του δικτύου σας σε αυτό το URL και κάθε δοκιμασία τρέχετε από το σημείο αυτό θα εκτελεστεί σε όλους τους browsers που επισκέπτονται τη δοκιμαστική σελίδα.

Σε συνδυασμό με την εξαιρετική localtunnel , τείχη προστασίας ανάμεσα σε εσάς και άλλους υπολογιστές είναι λιγότερο επώδυνη. Εάν δεν εργάζεστε με ευαίσθητες πληροφορίες, είναι ένας απλός τρόπος για να κάνετε Yeti σας διαθέσιμα στο διαδίκτυο:

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

Μπορείτε να επισκεφθείτε, στη συνέχεια, ότι η διεύθυνση URL για να αποκτήσετε πρόσβαση Yeti και να αρχίσει να τρέχει δοκιμές:

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

Yeti ως στόχο να καταστήσει ευκολότερο το JavaScript δοκιμές? Ωστόσο, είναι μακριά από το να είναι πλήρης. (Μην πάρετε τον αριθμό έκδοσης 0.1.0 ελαφρά τη καρδία.) Yeti υποθέτει χρησιμοποιείτε Yui Test, έχει δοκιμαστεί μόνο σε Mac OS X, και δεν μπορεί να λειτουργήσει με κάποια είδη τα σενάρια δοκιμών. Παρά τις ελλείψεις αυτές, Yeti ήταν τόσο χρήσιμο εσωτερικά ότι δεν θέλαμε να περιμένουμε άλλο για να το μοιραστείτε με την κοινότητα Yui.

Να πάρει τον κωδικό

Yeti είναι διαθέσιμες στην GitHub και προσφέρονται στο πλαίσιο άδεια BSD Yui του .

Εγκατάσταση

Yeti είναι γραμμένο εξ ολοκλήρου σε JavaScript και τρέχει στην κορυφή του NodeJS . Αν είστε ήδη NodeJS και NPM χρήστη, η εγκατάσταση είναι πολύ απλή:

 $ npm install yeti@stable

Εάν δεν έχετε εγκαταστήσει NodeJS και NPM και είστε σε ένα πρόσφατο Mac, μπορείτε να εγκαταστήσετε ακόμα Yeti με ένα βολικό πρόγραμμα εγκατάστασης.

Κατεβάστε το Yeti 0.1.0 Installer 2.7 MB
Απαιτεί Mac OS X 10.6 και ένα επεξεργαστή Intel Core 2 ή καλύτερη

Αν ο υπολογιστής σας δεν ανταποκρίνεται στις απαιτήσεις του εγκαταστάτη, μπορείτε ακόμα να χρησιμοποιήσετε Yeti, αν είστε σε θέση να εγκαταστήσετε NPM. Περισσότερες οδηγίες εγκατάστασης και χρήσης είναι διαθέσιμα σε README του Yeti .

Η συμμετοχή σας είναι ευπρόσδεκτη

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

Καλή δοκιμή!

Σχετικά με το Συντάκτης: Reid Burke ( @ Reid ) είναι το νεότερο μέλος της ομάδας Yui. Αγαπά αποτρόπαια τέρατα χιόνι και JavaScript.

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

Η ανάπτυξη μιας Πρόσβαση Widget Αστέρια Βαθμολογίες

Σε μια βιασύνη; Μετάβαση στη δοκιμαστική σελίδα .

Πολλά sites ηλεκτρονικού εμπορίου, υπηρεσίες κοινωνικής δικτύωσης, και διαδικτυακές κοινότητες περιλαμβάνουν βαθμολογία ή τα χαρακτηριστικά αξιολόγησης. Γνώμη προσέλκυση των ανθρώπων έχει γίνει ακόμη ένα επιχειρηματικό μοντέλο? Υπάρχουν τώρα ιστοσελίδες που διατίθεται για προϊόντα βαθμολογία, υπηρεσίες, επιχειρήσεις και άλλα.

Η πιο κοινή διεπαφή που χρησιμοποιείται για την εμφάνιση ψήφων είναι το "σύστημα κατάταξης αστέρων», στην οποία ένα συγκεκριμένο αριθμό πόντων (συνήθως εκφράζεται ως αστέρια) έχει ανατεθεί σε ένα στοιχείο από κάθε αναθεωρητή. Θεωρούμε ότι το μοντέλο αυτό σε πολλές περιοχές, από την Amazon να Yelp.

Παραδείγματα αστέρων συστημάτων διαβάθμισης

Εικόνα Α. παραδείγματα κατηγορία από την Amazon και Yelp .

Όπως Σχήμα Α δείχνει, δύο οπτικές διασυνδέσεις είναι παρόμοια, αλλά αυτό που καθιστά τα δύο αυτά διαλύματα ενδιαφέρον είναι βάση σήμανση τους. Ένα στηρίζεται στην <map> , η άλλη για <img> .

Να σκεφτείτε ότι τα περισσότερα συστήματα αξιολόγησης θα πρέπει να βασίζεται σε κάποια σήμανσης αποδειχθεί ότι είναι σημασιολογική και "επιχειρησιακές" σε πολλούς πράκτορες χρήστη - δηλαδή, ότι τα συστήματα αξιολόγησης θα πρέπει να βασίζεται σε ένα συγκεκριμένο σύνολο των HTML στοιχείων και χαρακτηριστικών των οποίων ένα αφορά τη συμπεριφορά και στυλ μέσω JS και CSS. Αυτό θα έχει νόημα, αλλά αυτό απέχει πολύ από την αλήθεια. Όταν πρόκειται για την σήμανση, οι συγγραφείς προσπαθούν σχεδόν τα πάντα:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
και άλλα ...

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

Πριν από την υποβολή μερικές εικόνα με βάση τις τεχνικές για τη σήμανση αξιολογήσεις, νομίζω ότι αξίζει να αναφερθεί μια βασική και απλή προσέγγιση (από Microformats ) που χρησιμοποιεί χαρακτήρες:

 <abbr class="rating" title="3 stars">***</abbr>

Pros: Είναι απλή και σημασιολογική.; Η σήμανση είναι ελάχιστη.; Η μέθοδος δεν εξαρτώνται από την CSS.; Η μέθοδος δεν εξαρτώνται από τις εικόνες.; Δεν υπάρχει καμία αίτηση HTTP.
Μειονεκτήματα: Είναι αδύνατο να αντιπροσωπεύουν τις αξίες μισό (δηλαδή 3,5 αστέρια); Το "λειτουργεί" μόνο με αστερίσκους ("αστέρων").; Οθόνη-αναγνώστες, από προεπιλογή, δεν επεκτείνει συντομογραφίες (η οποία δεν μπορεί να είναι μια μεγάλη υπόθεση σε αυτήν την περίπτωση).

Σημείωση: Χρησιμοποιώ "*" και όχι ★ (★), επειδή οι αναγνώστες οθόνης (τουλάχιστον JAWS και NVDA ) φαίνεται να αγνοούν HTML οντότητες.

Markup να προβάλετε μια εικόνα με βάση βαθμολογίες

Όταν πρόκειται για την εμφάνιση εικόνων, οι συγγραφείς έχουν πολλές επιλογές.

Μία εικόνα ανά βαθμολογία

Χρησιμοποιώντας μια ενιαία εικόνα:

 <img src="4stars.png" alt="4 out of five">

Ένα αστέρι
Δύο αστέρια
Τρία αστέρια
Τέσσερα αστέρια
Πέντε αστέρια

Pros: Χρησιμοποιώντας μία εικόνα ανά βαθμολογία είναι απλή και σημασιολογική.; Η μέθοδος δεν εξαρτώνται από την CSS.; Ελάχιστη σήμανσης.
Μειονεκτήματα: Δημιουργεί πολλά αιτήματα HTTP, καθώς υπάρχουν πολλές διαφορετικές εικόνες.; Πάνω από το θέμα των επιδόσεων, μπορεί να είναι ένας εφιάλτης συντήρησης, όπως οι συγγραφείς έχουν να αντιμετωπίσουν περισσότερες περιουσιακά στοιχεία (εικόνες για να δημιουργήσει, να ωθήσει σε ένα CDN, να τροποποιήσει, όταν ιστοσελίδα αλλάξετε τα χρώματα, κ.λπ.).; Επιλογή κειμένου δεν είναι δυνατή σε Opera (τουλάχιστον στην έκδοση 9.52) ως το εναλλακτικό κείμενο αγνοείται

Μία εικόνα ανά μονάδα

Από την whatwg 's σχέδιο εργασίας :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

Ένα αστέρι
Δύο αστέρια
Τρία αστέρια
Τέσσερα αστέρια
Πέντε αστέρια

Pros: Χρησιμοποιώντας δύο img στοιχεία ανά βαθμολογία μειώνεται ο αριθμός των αιτήσεων HTTP.; Η μέθοδος δεν εξαρτώνται από την CSS.
Μειονεκτήματα: Στο Opera, όταν οι εικόνες είναι άτομα με ειδικές ανάγκες, εναλλακτικό κείμενο δεν είναι επιλέξιμο, και (στην μικρή οθόνη άποψη) ότι το κείμενο αποδίδεται με ένα περίγραμμα το οποίο το καθιστά λιγότερο ευανάγνωστο.

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

Στις Ajaxian , για παράδειγμα, ο συγγραφέας χρησιμοποιεί εναλλακτικό κείμενο με κάθε εικόνα, η οποία κάνει πολύ νόημα, εφόσον κρίνει ότι ο καθένας είναι περιεχόμενο:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

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

Η Sprite για τις εικόνες φόντου

Οι παρακάτω τεχνική είναι μια προσαρμογή της στρατηγικής αρχικά σε εφαρμογή από προγραμματιστές σε Yahoo! Μουσική :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

Ένα αστέρι: 1 από 5
Δύο αστέρια: 2 από 5
Τρία αστέρια: 3 από 5
Τέσσερα αστέρια: 4 από 5
Πέντε αστέρια: 5 από 5

Pros: Η μέθοδος αυτή απαιτεί μία μόνο αίτηση HTTP, καθώς στηρίζεται σε μια ενιαία εικόνα ξωτικό.; Minimal "πόδι εκτύπωσης".
Μειονεκτήματα: Το περιεχόμενο δεν αποκαλύπτεται με εικόνες off.; Τίποτα δεν δείχνει, όταν η σελίδα εκτυπωθεί (ένα φύλλο στυλ εκτύπωσης θα μπορούσε να φροντίσει το θέμα αυτό).; Στο Opera, το υψηλό στυλ αντίθεση κάνει όλα τα αστέρια εξαφανίζονται? Το ίδιο ισχύει και σε High Βελτιστοποίηση λειτουργία αντίθεσης .; Επιλογή κειμένου είναι δυνατό, αλλά δεν είναι προφανές (μέσω τονίζοντας).

Η Sprite στα tags

Η προσέγγιση αυτή βασίζεται στη μέθοδο TIP , η οποία χρησιμοποιεί ένα ξωτικό εικόνα ως <img> στοιχείο και όχι μια εικόνα φόντου:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

Ένα αστέρι: 1 από 5
Δύο αστέρια: 2 από 5
Τρία αστέρια: 3 από 5
Τέσσερα αστέρια: 4 από 5
Πέντε αστέρια: 5 από 5

Pros: Αυτή η μέθοδος απαιτεί ένα μόνο αίτημα HTTP.; Αυτή η τεχνική είναι η μόνη από τις τέσσερις παραπάνω μεθόδους που αποκαλύπτει το περιεχόμενο, όταν οι χρήστες του Firefox επιλέξτε "Απόκρυψη εικόνων" ή "κάνει τις εικόνες αόρατο" (από τη γραμμή εργαλείων του κυρίου του έργου).; Όταν οι εικόνες είναι διαθέσιμο ένα κόκκινο "x" εμφανίζεται μόνο στην υψηλότερη βαθμολογία (δηλαδή με 5 από 5) αντί για το κάθε ένα, όπως συμβαίνει και με άλλες λύσεις που βασίζονται σε img στοιχεία.
Μειονεκτήματα: Η απεικόνιση των εικόνων εξαρτάται σε CSS.

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

εικόνες σε κλίμακα ανάλογα με το κείμενο-το μέγεθος των ρυθμίσεων.
εικόνων που θα εκτυπωθούν.
εναλλακτικό κείμενο να είναι εύκολα επιλεγεί ως το σύνολο της εικόνας εμφανίζεται τόνισε (Firefox).
την εικόνα να μην εξαφανιστούν σε μια ρύθμιση υψηλής αντίθεσης / stylesheet.
εναλλακτική επιλογή κειμένου σε Opera (όταν οι εικόνες είναι άτομα με ειδικές ανάγκες).
χωρίς περιθώρια εναλλακτικό κείμενο σε μικρές άποψη οθόνη Opera.

Markup να ψηφίσουν

Ξεκινώντας με μια εγγενή μηχανισμό

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

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

Αποτέλεσμα

Προσθέτοντας τα διαλείμματα και κενά

Για την καλύτερη ανάγνωση, προσθέτουμε <br> και κενά.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Αποτέλεσμα

Παρουσιάζοντας το sprite εικόνα στα tags

Για αυτή τη λύση, χρησιμοποιούμε ένα μικρότερο ξωτικό από εκείνο στο παραπάνω παράδειγμα. Είναι πλέον αποτελείται από δύο μονά αστέρια ("on" και "off").

Δίνουμε img στοιχεία μέσα στις ετικέτες. Υποθέτουμε ότι δεν θα έχει καμία αξία χωρίς την υποστήριξη CSS, έτσι εμείς "κρύβουν" τους με τον καθορισμό ειδικών διαστάσεων με τους width και height χαρακτηριστικά. Σημειώστε ότι η χρήση 0 και με τις δύο ιδιότητες, θα δείξει ένα σπασμένο εικόνα σε ορισμένες UA s.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

Σημειώστε ότι με τις παραπάνω επισημάνσεις, μπορούμε να περιμένουμε (στα περισσότερα προγράμματα περιήγησης) επιλογή τομέα μέσω επιλογής ετικέτα.

Λαμβάνοντας υπόψη Προσβασιμότητα

Δυστυχώς, όπως είναι, αυτή τη σήμανση, δημιουργεί προβλήματα σε τουλάχιστον δύο οθόνη-αναγνώστες: JAWS και NVDA (βλ. υπόθεση δοκιμασίας για αυτά τα σφάλματα). Το πρόβλημα σχετίζεται με τη χρήση ενός title χαρακτηριστικό και ένα κενό string για το εναλλακτικό κείμενο.

Η λύση να μην συγχέουμε ανάγνωσης οθόνης οι χρήστες είναι να χρησιμοποιήσουν τα "αστέρια" όπως εναλλακτικό κείμενο ( alt ) και τη χρήση JavaScript για να εισάγετε title στο mouseover.

Καλύτερη Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Αποτέλεσμα

Styling

Δίνοντας διαστάσεις στην εικόνα μέσω του CSS

Χρησιμοποιούμε em να επιτρέψει την εικόνα για να αυξηθεί ή να συρρικνωθεί ανάλογα με το font-size.

Markup

Αμετάβλητος

CSS

 img { width:2.8em; height:1.4em; }

Αποτέλεσμα

Όπως μπορείτε να δείτε ήδη, κάνοντας κλικ σε μια εικόνα για επιλέγει το αντίστοιχο κουμπί επιλογής. Δεν υπάρχει καμία ανάγκη για συγγραφή ως σιωπηρή επισήμανση παράγει αυτή τη συμπεριφορά (με εξαίρεση την Ιρλανδία).

Αφαίρεση της εικόνας από τη ροή

Styling η label με position:relative και η εικόνα με position:absolute με top / left αξίες είναι αρκετή για να κρύψει input και το κείμενο μέσα στις ετικέτες.

Markup

Αμετάβλητος

CSS

  ετικέτα { 
    θέση: σχετική?
 } 
 {img
   πλάτος: 2.8em?
   Ύψος: 1.4em?
    θέση: απόλυτη? 
    Top: 0? 
    αριστερά: 0? 
 }

Αποτέλεσμα

Εμφανίζονται ένα αστέρι για κάθε ετικέτα

Εμείς στυλ στην ετικέτα, ώστε οι διαστάσεις του ταιριάζουν με το ύψος και το πλάτος ενός ενιαίου αστέρων.

Markup

Αμετάβλητος

CSS

 label { position:relative;   Ύψος: 1.4em?
  πλάτος: 1.4em?
  υπερχείλιση: κρυμμένο?
  display: block? 
 }
 {img
   πλάτος: 2.8em?
   Ύψος: 1.4em?
   θέση: απόλυτη?
   Top: 0?
   αριστερά: 0?
 }

Αποτέλεσμα

Εμφανίζονται τα αστέρια οριζόντια

Αφαιρούμε το br s και επιπλέουν τις ετικέτες.

Markup

Αμετάβλητος

CSS

  br {
  display: none?
 } 
 ετικέτα {
   θέση: σχετική?
   Ύψος: 1.4em?
   πλάτος: 1.4em?
   υπερχείλιση: κρυμμένο?
    display: block? 
    float: αριστερά? 
 }
 {img
   πλάτος: 2.8em?
   Ύψος: 1.4em?
   θέση: απόλυτη?
   Top: 0?
   αριστερά: 0?
 }

Αποτέλεσμα

Εμφάνιση του sprite εικόνα ανάλογα με την πιστοληπτική

Για να ορίσετε ένα "με 3 από 5" βαθμολογία, εφαρμόζουμε την ίδια τάξη για τα τελευταία δύο ετικέτες. Η κατηγορία αυτή θα αλλάξει τη θέση της εικόνας μέσα στην ετικέτα.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ label> <br>
 <Ετικέτα   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ label>
 </ FIELDSET>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star {img
  αριστερά:-1.4em?
 }

Αποτέλεσμα

Δεν εξαρτώνται από την εικόνα και μόνο για να εμφανίσετε πληροφορίες

Είναι σημαντικό να προσφέρει μια εναλλακτική λύση για την εμφάνιση των άστρων, σε περίπτωση εικόνες δεν είναι διαθέσιμες. Αυτό οφείλεται στο γεγονός ότι οι ετικέτες και τα κουμπιά επιλογής στυλ να είναι στην κορυφή από την άλλη. Μια απλή λύση είναι να προχωρήσουμε input κειμένου και off-screen (δηλαδή χρησιμοποιώντας text-indent:-999em ) και να εφαρμόσετε ένα χρώμα φόντου για τις ετικέτες.

Markup

Καμία αλλαγή

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   υπόβαθρο: teal?
  περιθώριο δεξιά: 1px?
  text-indent:-999em? 
 }
 {img
   πλάτος: 2.8em?
   Ύψος: 1.4em?
   θέση: απόλυτη?
   Top: 0?
   αριστερά: 0?
 }
  . No_star {
  υπόβαθρο: # CCC?
 } 
 . No_star {img
   αριστερά:-1.4em?
 }

Σημείωση:

text-indent διορθώνει επίσης ένα άλμα προς τα πάνω από την εικόνα κάθε φορά που οι έλεγχοι να πάρει την εστίαση.
το δικαίωμα περιθώριο για να βεβαιωθείτε ότι τα χρώματα φόντου δημιουργούν πλατείες και όχι ορθογώνια (το οποίο θα συμβεί με τις γειτονικές ετικέτες που μοιράζονται το ίδιο χρώμα φόντου).

Αποτέλεσμα

Κατακλείδα

Χρησιμοποιούμε το ψευδο-class :hover για να δημιουργήσετε κάποιο αποτέλεσμα της ανατροπής,
Εμείς αποκρύψετε το περίγραμμα FIELDSET,
Έχουμε κρύψει τον μύθο,
Εμείς το στυλ του δρομέα.

Markup

Αμετάβλητος

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   δρομέα: ο δείκτης? 
 }
 . No_star {
   υπόβαθρο: # CCC?
 }
 . No_star {img
   αριστερά:-1.4em?
 }
  ετικέτα: hover {
  αδιαφάνεια: 0,5?
  φίλτρο: άλφα (αδιαφάνεια = 50)?
 }
 FIELDSET {
  συνόρων: 0?
 }
 θρύλος {
  text-indent:-999em?
 }

Σημείωση: Η label:hover αγνοείται από τον IE6 και στην Όπερα της αιμορραγεί χρώμα φόντου μέσα από τις εικόνες. Στη δοκιμαστική σελίδα , αντί να χρησιμοποιούν opacity , είμαι χρησιμοποιώντας ένα διαφορετικό ξωτικό που δείχνει τέσσερις πολιτείες.

Αποτέλεσμα

Εμφάνιση των ειδικοτήτων, χωρίς να επιτρέπει την αλληλεπίδραση των χρηστών

Μπορούμε να κάνουμε τις ικανότητες «μόνο για ανάγνωση" με την προσθήκη disabled και checked χαρακτηριστικά στην κατάλληλη input πεδία.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   άτομα με ειδικές ανάγκες   > 1 / 5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <τύπος εισόδου = "ραδιόφωνο" name = "movie" value = "2_5"   άτομα με ειδικές ανάγκες   > 2 / 5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <τύπος εισόδου = "ραδιόφωνο" name = "movie" value = "3_5" ελέγχονται = "   ελεγχθεί   "> 3 / 5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <τύπος εισόδου = "ραδιόφωνο" name = "movie" value = "4_5"   άτομα με ειδικές ανάγκες   > 4 / 5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <τύπος εισόδου = "ραδιόφωνο" name = "movie" value = "5_5"   άτομα με ειδικές ανάγκες   > 5 / 5 </ label>
 </ FIELDSET>

CSS

Ο κανόνας που χρησιμοποιούν :hover έχει αφαιρεθεί

H4 Αποτελεσμάτων>

Δίνοντας περισσότερη σκέψη για τη διαδικασία

Στο σημείο αυτό, είναι δυνατόν να ψηφίσουν χωρίς την υποστήριξη του σεναρίου, αλλά βλέποντες χρήστες δεν έχουν καμία ένδειξη σχετικά με την επιλογή τους. Γι 'αυτό και τη χρήση JavaScript για να:

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

Την ίδια στιγμή, να επωφεληθούν από τη χρήση ενός script για να εισάγετε title χαρακτηριστικά που θα δημιουργήσει "επεξηγήσεις" όταν οι χρήστες του ποντικιού πάνω από τις ετικέτες / αστέρια.

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

Αυτή είναι η δοκιμαστική σελίδα , το τελικό προϊόν. Για να δείτε πώς αυτή η λύση συμπεριφέρεται ανάλογα με τις διάφορες ρυθμίσεις, μπορεί να θέλετε να χρησιμοποιήσετε τα αγαπημένα σας εργαλεία προγραμματισμού για την αύξηση της κείμενο-το μέγεθος, το διάλειμμα μονοπάτια της εικόνας, απενεργοποιήστε το JavaScript, CSS στροφή μακριά, και πολλά άλλα ...

Τυλίξτε

Έρχεται με μια «αποδεκτή» λύση απαιτεί να εντοπίσει τις ανάγκες, εκπρόσωποι χρήστη »χρήστες ιδιαιτερότητες, τις ρυθμίσεις για τον Χρήστη» και πολλά άλλα - που σημαίνει εκτεταμένες δοκιμές.

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

Επίσης, η ανατροφοδότηση από τους χρήστες των βοηθητικών συσκευών »επιτρέπει να αγνοήσει κάποια μηνύματα λάθους επικύρωσης - όπως αυτή που ο Firefox εκθέσεις Toolbar Προσβασιμότητα (σύμφωνα με http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

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

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

εικόνες off,
javascript off,
CSS off,
ένα συνδυασμό των παραπάνω.

Είναι επίσης καλό να ξέρεις ότι η τεχνική αυτή βασίζεται στην img στοιχεία και όχι εικόνες φόντου, η οποία επιτρέπει τα αστέρια για να:

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

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

Αργά την εύρεση

Πρόσφατα ανακάλυψα το σύστημα του Αμαζονίου έχει κατασκευαστεί για τη σελίδα της ψηφοφορίας. Είναι αρκετά ενδιαφέρον, δεδομένου ότι εξυπηρετούν μια διαφορετική λύση ανάλογα με την υποστήριξη σενάριο. Αν υπάρχει υποστήριξη σενάριο, που χρησιμοποιούν μια εικόνα <map> (ενδιαφέρουσα προσέγγιση), αν δεν υπάρχει υποστήριξη σενάριο που χρησιμοποιούν κουμπιά επιλογής. Και στις δύο περιπτώσεις, η λύση είναι προσβάσιμη στους χρήστες του πληκτρολογίου, και αυτό βοηθάει στην μεγιστοποίηση της πρόσβασης σε ένα χαρακτηριστικό που είναι μια βασική διαφοροποίησης για την πλατφόρμα του Αμαζονίου.

Σημειώστε ότι δεν χρησιμοποιούν JavaScript για να αντικαταστήσει τα κουμπιά επιλογής με μια εικόνα <map> ? αντ 'αυτού, χρησιμοποιούν noscript στοιχεία στα οποία πίνακα σήμανσης περιέχει κουμπιά επιλογής.

"Out of the box" λύσεις

Dreamweaver ^®: Spry Βαθμολογία Widget
Yui: Κατηγορία Script Αξιολόγηση για Yui; Κατηγορία σενάριο Βαθμολογία με Yui
JQuery: Half-Star Plugin Αξιολόγηση; jQuery Ajax Rater; Απλό σύστημα επισήμανσης βάσει αστέρων; 5 Σύστημα αστέρων σε PHP, MySQL και jQuery
WordPress: GD σύστημα επισήμανσης βάσει αστέρων για WordPress; GD Αστέρων; Κατηγορία αστέρων για Κριτικές
Φλας: 5 Κατηγορία αστέρων συνιστώσα του συστήματος
Διάφορα.: Πώς μια αστέρων θα πρέπει να; Starry widget 2

Ιδιαίτερες ευχαριστίες

Ιδιαίτερες ευχαριστίες στον Victor Tsaran και Todd Kloots για τις πολύτιμες πληροφορίες τους.

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

Ανακοινώνοντας Yui 3.1.2: Κρίσιμη ενημερωμένη έκδοση ασφαλείας για όλους Yui χρήστες 3.1.x/3.2.0pr1

19 του Αυγούστου, 2010 στις 12:35 pm από Eric Miraglia | Σε Ανάπτυξης | Comments Off

Η ομάδα Yui Yui 3.1.2 κυκλοφόρησε σήμερα. Αυτή είναι μια σημαντική ενημερωμένη έκδοση ασφαλείας για όλους τους χρήστες του Yui 3.1.x και 3.2.0pr1. Αν είστε φιλοξενεί Yui 3.1.x ή 3.2.0pr1 στον ιστότοπό σας, ή αν χρησιμοποιείτε μεταξύ τομέων λειτουργικότητα Yui 3.1.x/3.2.0pr1 IO, μπορείτε επηρεάζονται.

XDR σε IO χρησιμότητα Yui του εφαρμόζει τις μεταφορές Flash, ως εναλλακτική για browsers που δεν υποστηρίζουν μητρική XDR. Ένα λάθος στην εφαρμογή μας της εφεδρικής Flash σε Yui εκδόσεις 3.1.x και 3.2.0pr1 επιτρέπει την io.swf αρχείο για να λειτουργήσουν unsafely αν σερβίρεται από τις CDN Yahoo! ή από το δικό σας διακομιστή. Η θεραπεία για αυτό το πρόβλημα είναι διττό:

Εάν έχετε αναπτύξει την πλήρη Yui 3.1.x/3.2.0pr1 χτίσει τον κατάλογο στο διακομιστή σας, αντικαταστήστε build/io/io.swf στις πληγείσες έκδοση με την έκδοση περιλαμβάνονται σε Yui 3.1.2. Το κάνουν έστω και αν χρησιμοποιείτε το βοηθητικό πρόγραμμα IO ή χαρακτηριστικό XDR της.
Εάν χρησιμοποιείτε XDR χαρακτηριστικό IO, η αναβάθμιση στην έκδοση 3.1.2 του io-swf αντιμετωπίζει το πρόβλημα της ασφάλειας. Host έκδοση 3.1.2 του io.swf στο δικό σας διακομιστή (το αρχείο αυτό δεν μπορεί να λειτουργήσει με ασφάλεια από ένα CDN? δεν περιλαμβάνεται στο CDN από 3.1.2). Εάν έχετε σχεδίασης io.swf από http://yui.yahooapis.com , αφαιρέστε αυτόν τον τομέα από σας crossdomain.xml αρχείο.

Περισσότερες λεπτομέρειες σχετικά με αυτό το θέμα μπορείτε να βρείτε στην τεκμηρίωση χρησιμότητα IO .

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

Γρήγορη κατάσταση επεξεργασίας για Yui 2 DataTable

19 Αυγούστου του 2010 στις 08.42 π.μ. από τον John Lindal | Σε Ανάπτυξης | 9 Σχόλια

Yui 2 DataTable παρέχει κηλίδα επεξεργασίας inline. Όταν disableBtns είναι ενεργοποιημένη στη διαμόρφωση του στήλη, την επεξεργασία απλών αξίες όπως χορδές ή τους αριθμούς αισθάνεται ακριβώς όπως το Excel. Ωστόσο, η εμπειρία δεν μπορεί να ανταποκρίνεται όπως ένα desktop εφαρμογή, διότι κάθε αλλαγή απαιτεί συνήθως μια κλήση XHR στο διακομιστή για την αποθήκευση (ή την απόρριψη!) Τη νέα τιμή. Εάν ο χρήστης πρέπει να αλλάξει πολλές από τις τιμές που εμφανίζονται, μπορεί να είναι μια αργή και απογοητευτική εμπειρία. Για να λυθεί αυτό, έχω αναπτύξει QuickEditDataTable. Αυτό ισχύει και DataTable για να προσθέσετε τη λειτουργία γρήγορης επεξεργασίας, η οποία επιτρέπει σε όλους τους επεξεργάσιμο τιμές που πρέπει να αλλάξει σε μια χύμα λειτουργία:

( Κάντε κλικ στο screenshot για να παίξει με αυτό το παράδειγμα .)

Επισκόπηση

Για να εισάγετε τη λειτουργία γρήγορης επεξεργασίας, καλέστε startQuickEdit() . Για να βγείτε από τη λειτουργία γρήγορης επεξεργασίας, καλέστε cancelQuickEdit() .

Είναι δική σας ευθύνη να αποθηκεύσετε τις αλλαγές πριν από την κλήση cancelQuickEdit() . Για να απλοποιήσει το έργο αυτό, QuickEditDataTable παρέχει getQuickEditChanges() . Αυτό επιστρέφει μια σειρά από αντικείμενα, ένα για κάθε γραμμή. Κάθε αντικείμενο περιέχει μόνο τις τιμές που είχαν αλλάξει σε αυτή τη γραμμή, σφήνες από τη στήλη, ID. Για παράδειγμα, αν ο πίνακας έχει 4 στήλες (τίτλος, συγγραφέας, έτος, ποσότητα), και ο χρήστης αλλάξει μόνο η ποσότητα σε μία γραμμή με 20, τότε το αντικείμενο για τη συγκεκριμένη γραμμή θα είναι {quantity:20} . Οι άλλες τιμές θα πρέπει να παραλείπεται.

QuickEditDataTable μπορεί να επεκταθεί εύκολα YAHOO.widget.ScrollingDataTable εάν χρειάζεστε αυτή τη λειτουργικότητα. Αν χρειάζεστε αυτό, απλά κάντε ένα αντίγραφο του αρχείου προέλευσης και να αλλάξετε τη βασική κλάση.

Διαμόρφωση

Γρήγορη Επεξεργασία είναι ένα αποκλειστικό κατάσταση στην οποία οι μορφοποιητές κυττάρων για επεξεργάσιμο στήλες ανταλλαχθούν έξω και να αντικατασταθεί με ειδικές μορφοποιητές που παράγουν input , textarea , ή select τα στοιχεία. Μόνο οι στήλες που έχουν quickEdit διαμόρφωση θα είναι επεξεργάσιμο. Οι επιλογές ρύθμισης είναι οι εξής:

copyDown

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

formatter

Το σύστημα διαμόρφωσης των κυττάρων τα οποία θα καθιστούν κατάλληλο πεδίο φόρμας: <input type="text">, <textarea>, ή <select>. Από προεπιλογή, το μορφοποιητή κύτταρο YAHOO.widget.QuickEditDataTable.textQuickEditFormatter χρησιμοποιείται για όλα τα κύτταρα να παράγουν τα στοιχεία εισόδου. Για να πάρετε μια textarea στοιχείο, ρυθμίσετε τις παραμέτρους μιας στήλης που θα χρησιμοποιηθεί YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter αντ 'αυτού. Μπορείτε επίσης να γράψετε μια προσαρμοσμένη γρήγορη μορφοποιητή επεξεργασία - βλ. παρακάτω.

validation

Επικύρωση ρυθμίσεων για κάθε πεδίο στη στήλη.

css

CSS τάξεις κωδικοποίηση των βασικών κανόνων επικύρωσης:

yiv-required: Αξία δεν πρέπει να είναι κενό.
yiv-length:[x,y]: String πρέπει να είναι τουλάχιστον x χαρακτήρες και το πολύ y χαρακτήρες. Τουλάχιστον ένα από τα Χ και Υ πρέπει να καθορίζονται.
yiv-integer:[x,y]: Η ακέραιη τιμή πρέπει να είναι τουλάχιστον x και το πολύ y . x και y είναι και τα δύο προαιρετικά.
yiv-decimal:[x,y]: Η δεκαδική τιμή πρέπει να είναι τουλάχιστον x και το πολύ y . Εκθέτες δεν επιτρέπονται. x και y είναι και τα δύο προαιρετικά.

fn

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

msg

Ένας χάρτης των τύπων στα μηνύματα που θα εμφανίζεται όταν μια βασική ή regex κανόνα επικύρωσης αποτύχει. Οι έγκυροι τύποι είναι: required , min_length , max_length , integer , decimal , και regex . Δεν υπάρχει προεπιλογή για τον τύπο regex , έτσι πρέπει να καθορίσετε ένα μήνυμα, αν διαμορφώσετε ένα regex επικύρωσης. Τα μηνύματα λάθους προεπιλογή για τους άλλους τύπους αποθηκεύονται σε YAHOO.widget.QuickEditDataTable.Strings και αυτό μπορεί να ανατραπεί ή / και τοπικό.

regex

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

Μερικές φορές, ένα μη επεξεργάσιμο στήλη πρέπει να αποδίδονται με διαφορετικό τρόπο κατά τη διάρκεια της γρήγορης κατάσταση επεξεργασίας. Το καλύτερο παράδειγμα είναι μια στήλη που περιέχει ένα σύνδεσμο, αφού πλοήγηση μακριά από τη σελίδα, ενώ στη λειτουργία γρήγορης επεξεργασίας μπορεί να είναι καταστροφικές. Για να καταργήσετε τη σύνδεση κατά τη διάρκεια της γρήγορης επεξεργασίας, διαμορφώστε qeFormatter για τη στήλη που θα YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . Για τις διευθύνσεις ηλεκτρονικού ταχυδρομείου, χρησιμοποιήστε YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . Μπορείτε επίσης να γράψετε τη δική σας συνήθεια, μόνο για ανάγνωση μορφοποιητή. Απλά ακολουθούν τους συνήθεις κανόνες για την κατασκευή ένα σύστημα διαμόρφωσης των κυττάρων DataTable.

Προσαρμοσμένη Γρήγορη μορφοποιητές Επεξεργασία

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

 λειτουργία myQuickEditFormatter (el, oRecord, oColumn, oData) {
   var σήμανσης =
     «<input Type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/> '+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY?
     el.innerHTML lang.substitute = (σήμανση, {
       κλειδί: oColumn.key,
       yiv: oColumn.quickEdit.validation;  (OColumn.quickEdit.validation.css | |''):''
     })?
     el.firstChild.value = extractMyEditableValue (oData)?
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply (αυτό, τα επιχειρήματα)?
 }?

Μπορείτε να χρησιμοποιήσετε textarea ή να select αντί της input , αλλά μπορείτε να δημιουργήσετε έναν μόνο τομέα.

extractMyEditableValue() δεν χρειάζεται να είναι μια ξεχωριστή λειτουργία ούτε θα πρέπει να περιορίζεται στη χρήση μόνο oData . Το έργο θα πρέπει κανονικά να γίνει inline στη λειτουργία μορφοποιητή, αλλά το όνομα της συνάρτησης δείγματος καθιστά το σημείο σαφές.

Περίπου ο συντάκτης: John Lindal ( @ jafl5272 στο Twitter) είναι ένας από τους επικεφαλής μηχανικούς κατασκευής το θεμέλιο για τη Yahoo! APT είναι χτισμένο. Προηγουμένως, εργάστηκε στο Δίκτυο Εκδότης Yahoo!.

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

Χρησιμοποιώντας Yui 2 σχετικά με την μηχανή αναζήτησης DuckDuckGo

19 του Αυγούστου, 2010 στις 5:41 am από Gabriel Weinberg | Σε Yui Εφαρμογές | 2 Σχόλια

DuckDuckGo είναι μια μηχανή αναζήτησης που χρησιμοποιεί Yui εκτενώς. Εδώ είναι αυτό που χρησιμοποιεί και συγκεκριμένα:

ImageLoader. Matt Mlinac της Yui 2 ImageLoader ήταν το πρώτο πράγμα που εφαρμόστηκαν και ποια γαντζώθηκε μου αρχικά στην Yui για το έργο αυτό. DuckDuckGo έχει favicons δίπλα στα αποτελέσματα και συχνά έχει «Zero-κλικ Πληροφορίες" πάνω από τα αποτελέσματα που περιλαμβάνει συνήθως μια εικόνα . Δεν ήθελα αυτές τις εικόνες για να ανταγωνιστεί με τα αποτελέσματα κατά τη φόρτωση, όσο να πάρει τα αποτελέσματα όσο το δυνατόν γρηγορότερα είναι ο τελικός στόχος.
Το βοηθητικό πρόγραμμα ImageLoader χειρίζεται αυτό καλά από τη φόρτωση των εικόνων μετά την φόρτωση της σελίδας. DDG επίσης αυτόματα φορτώνει η επόμενη σελίδα των αποτελεσμάτων κατά την κύλιση προς τα κάτω. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

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

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

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

Επόμενη Σελίδα »

Άλλα πρόσφατα Βίντεο Θέατρο Yui:

Εγγραφή στη Yui Θέατρο:

Να πάρει τον κωδικό

Εγκατάσταση

Η συμμετοχή σας είναι ευπρόσδεκτη

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

Markup να προβάλετε μια εικόνα με βάση βαθμολογίες

Μία εικόνα ανά βαθμολογία

Μία εικόνα ανά μονάδα

Η Sprite για τις εικόνες φόντου

Markup

CSS

Η Sprite στα tags

Markup

CSS

Markup να ψηφίσουν

Ξεκινώντας με μια εγγενή μηχανισμό

Markup

Αποτέλεσμα

Προσθέτοντας τα διαλείμματα και κενά

Markup

Αποτέλεσμα

Παρουσιάζοντας το sprite εικόνα στα tags

Λαμβάνοντας υπόψη Προσβασιμότητα

Καλύτερη Markup

Αποτέλεσμα

Styling

Δίνοντας διαστάσεις στην εικόνα μέσω του CSS

Markup

CSS

Αποτέλεσμα

Αφαίρεση της εικόνας από τη ροή

Markup

CSS

Αποτέλεσμα

Εμφανίζονται ένα αστέρι για κάθε ετικέτα

Markup

CSS

Αποτέλεσμα

Εμφανίζονται τα αστέρια οριζόντια

Markup

CSS

Αποτέλεσμα

Εμφάνιση του sprite εικόνα ανάλογα με την πιστοληπτική

Markup

CSS

Αποτέλεσμα

Δεν εξαρτώνται από την εικόνα και μόνο για να εμφανίσετε πληροφορίες

Markup

CSS

Αποτέλεσμα

Κατακλείδα

Markup

CSS

Αποτέλεσμα

Εμφάνιση των ειδικοτήτων, χωρίς να επιτρέπει την αλληλεπίδραση των χρηστών

Markup

CSS

Δίνοντας περισσότερη σκέψη για τη διαδικασία

Τυλίξτε

Αργά την εύρεση

"Out of the box" λύσεις

Ιδιαίτερες ευχαριστίες

Επισκόπηση

Διαμόρφωση

Προσαρμοσμένη Γρήγορη μορφοποιητές Επεξεργασία

Yui Βιβλιοθήκη στο Twitter

Μετάφραση

Συνδικάτο

Πρόσφατες Δημοσιεύσεις

Yui Βιβλιοθήκη

Αρχεία:

Blogroll

Πολιτική Σχόλιο

Γίνετε Yahoo!

Meta: