Το Yahoo! Blog User Interface (YUIBlog)

YUI 3 Γρήγορη Συμβουλή: Προσθέτοντας τη δική σας Awesome

29 Σεπ, 2010 στις 12:22 pm από Eric κατηγορουμένου | Σε Ανάπτυξη | 3 Σχόλια

Luke ( @ ls_n ) δημοσιεύτηκε αυτό το απόσπασμα, απαντώντας σε ερώτηση τις προάλλες, και σκέφτηκα ότι άξιζε μοιράζονται εδώ και μια γρήγορη άκρη.

Όπως με τα περισσότερα επιλογής με βάση ιδιώματα, πολύ εκφραστική δύναμη του YUI 3 προέρχεται από ό, τι μπορείτε να κάνετε όταν έχετε σχέση με έναν ή περισσότερους HTMLElements - στο YUI 3, αυτό σημαίνει ότι έχουν κόμβος αναφοράς, το οποίο μπορείτε να πάρετε συνήθως μέσω Y.one( selector string ) ή Y.all( selector string ) . Έτσι, Y.one("#foo"). doSomethingInteresting είναι ένα συνηθισμένο μοτίβο.

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

Πρώτον, να δημιουργήσετε ένα νέο προσαρμοσμένο module (ας πούμε node++ ):

  YUI.add («κόμβο + +», η λειτουργία (Y) {
	
	 / / Ορίζουμε μια συνάρτηση που θα εκτελεστεί στο πλαίσιο μιας
	 / / Κόμβος παράδειγμα:
	 doSomethingAwesome λειτουργία () {
		 Y.log («Κάνε κάτι τρομερό εδώ.")?
	 }

	 / / Χρήση addMethod να προσθέσετε doAwesomeThing στον κόμβο πρωτότυπο:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome)?
	
	 / / Επεκτείνουν αυτή τη λειτουργικότητα NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing")?
	
 }, 0 .0.1 », {απαιτεί: [« κόμβο »]})? 

Κύρια σημεία του Λουκά είναι εδώ .

Με αυτόν τον ορισμό στη σελίδα, node++ μπορεί να use δ σε κάθε περίπτωση. Σε κώδικα της εφαρμογής σας, θα κάνετε:

  YUI (). Χρήση («κόμβο + +», η λειτουργία (Y) {
	
	 / / Χρήση από ένα μόνο κόμβο:
         . Y.one (# foo ') doAwesomeThing ()?

	 / / Χρήση από NodeList:
	 Y.all ("p") doAwesomeThing ().?
	
 })? 

Σημειώστε ότι μόνο το παράδειγμα YUI (ες) στην οποία θα δεσμεύει σας node++ ενότητας θα έχουν πρόσβαση σε doAwesomeThing . Ένα χαρακτηριστικό αυτού του σχεδιασμού που θα σας αρέσει και σας τη δόμηση πολύπλοκων εφαρμογών είναι ότι η λογική η εφαρμογή σας δεν θα πρέπει να αλλάξει εάν η λίστα για την εξάρτηση από node++ εξελίσσεται - που θα πάρει για εσάς γίνεται αυτόματα σε use() χρόνο, και η εξάρτηση δήλωση διαμένει με τον κώδικα τα οποία αφορά.

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

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

YUI Θέατρο - Δημ Γυαλί: (. 36 λεπτά) «Η αξιοποίηση Node.js YUI και 3"

29 Σεπ, 2010 στις 11:34 π.μ. από τον Eric κατηγορουμένου | Σε YUI Θέατρο | 11 Σχόλια

Ryan έργο Dahl για Node.js - και η κοινότητα που αποτελεί περίπου το εν λόγω σχέδιο - έχει ενταχθεί το HTML5 ως μία από τις μεγάλες ιστορίες του 2010. YUI μηχανικός Dav γυαλί έχει εργαστεί για να κάνει 3 YUI ένας ισχυρός σύμμαχος για Node.js υλοποιητές, και σε αυτό το βίντεο που σας δείχνει τι έχει κάνει μέχρι τώρα - όπως επιδείξεις σταδιακά ενισχυμένη widgets τρέχει τον ίδιο κωδικό πελάτη και διακομιστή. Μην χάσετε αυτό το ένα.

Αν ενσωματώσετε το βίντεο παρακάτω δεν εμφανίζεται σωστά σε RSS reader σας, κάντε κλικ για να παρακολουθήσετε μέσω του ή να κατεβάσετε το υψηλής ανάλυσης εκδοχή του βίντεο YUI Θέατρο .

• Λήψη βίντεο HD (480p ~ 271MB)
• Λήψη βίντεο (m4v)
• Μια υψηλής ανάλυσης, μεταγραφή έκδοση αυτής της ομιλίας είναι διαθέσιμο στην ιστοσελίδα YUI Θέατρο

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

• Alois Reitbauer: dynaTrace Edition Αίας - dynaTrace παρέχει ένα από τα πιο ισχυρά εργαλεία για την ανάλυση της απόδοσης των εφαρμογών web στον Internet Explorer. Στην ομιλία αυτή, ο Alois dynaTrace μηχανικός Reitbauer περπατά με τέσσερις ειδικούς αναλυτικά σενάρια χρησιμοποιώντας τη διασύνδεση dynaTrace.
• Ryan Grove: Επίτευξη απόδοσης Ζεν με YUI 3 - Μετά την κωδικοποίηση οδηγίες μπορεί να σας βοηθήσει να οικοδομήσουμε γρήγορα ιστοσελίδες, αλλά και για οικοδομικές εφαρμογές που είναι καθαρό, γρήγορο και επεκτάσιμο περιλαμβάνει, επίσης, να υιοθετηθεί μια ισορροπημένη προσέγγιση για την απόδοση σε κάθε επίπεδο της F2E την εργασία σας. YUI 3 έχει σχεδιαστεί για να σας βοηθήσει σε αυτή τη διαδικασία, παρέχοντας το δικαίωμα μεγέθους στρώμα αφαίρεσης με ενσωματωμένο μαγεία απόδοση και μια ποικιλία εργαλείων που καθιστούν γρήγορη κωδικό frontend εύκολο και διασκεδαστικό να παράγουν. Σε αυτή τη συνεδρίαση, θα διερευνήσει το ζεν της αποδοτικοί JavaScript στο YUI 3 κόσμου και να σας παρουσιάσουμε μερικά από τα ισχυρά εργαλεία YUI 3 θέτει στη διάθεσή σας σε κάθε εφαρμογή που γράφετε.
• Douglas Crockford: Crockford τη JavaScript - Σκηνή 6: Loopage - ανάπτυξη λογισμικού εμποδίζεται από ένα συγκεκριμένο σύνολο σχεδιαστικά λάθη που έγιναν στο πρώτο γλώσσες προγραμματισμού και επαναλαμβάνεται σε κάθε τι που έχει γίνει από τότε. Και, κάπως σαν από θαύμα, η ενεργοποίηση της JavaScript θα είναι σωστό, αλλάζοντας ριζικά τον τρόπο που γράφουμε εφαρμογές. Πάλι. Στο Loop της Ιστορίας, που έχει όλα αυτά συνέβησαν πριν, αλλά ποτέ δεν έχει συμβεί σαν αυτό. Γι 'αυτό θα πρέπει να νοιάζονται για την εμφάνιση της JavaScript διακομιστή και τον ενθουσιασμό γύρω από σχέδια όπως Node.js - όχι επειδή είναι στη κόψη του ξυραφιού της τάσης, αλλά επειδή είναι ανοίγοντας το δρόμο προς την επόμενη μεγάλη επανάσταση στο λογισμικό.

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

• YUI Θέατρο RSS feed
• YUI Θέατρο στο iTunes

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

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

Εστίαση Εφαρμογή: Ενοικίαση αυτοκινήτου Express

28 Σεπ. 2010 στις 6:01 π.μ. από τον Stefan Klopp | Σε Στην άγρια ​​, Υλοποιήσεις YUI | 2 Σχόλια

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

Βάση χρηστών μας είναι σε μεγάλο βαθμό μη-τεχνική, πράγμα που σημαίνει ότι θέλουν να συγκρίνετε τις τιμές και την ενοικίαση αυτοκινήτων όσο το δυνατόν ευκολότερα. Με την επανέναρξη της ιστοσελίδας μας, τον Ιούνιο του 2010 έχουμε υλοποιήσει πολλές συνιστώσες της YUI 2 να βοηθήσει να παρέχει στους πελάτες μας μια διαισθητική εμπειρία.

Ποια στοιχεία YUI άραγε;

Τα στοιχεία που έχουμε χρησιμοποιήσει περιλαμβάνουν του Connection Manager , Αυτόματης , DataSource δεν , Ημερολόγιο , Κινούμενα Σχέδια , JSON , και εμπορευματοκιβωτίων .

Γιατί επέλεξε YUI

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

Πώς χρησιμοποιούμε YUI

Αξιοποιούμε την YUI σε μια σειρά από τρόπους. 4 πιο μεταχειρισμένων εξαρτημάτων μας είναι AutoComplete, Ημερολόγιο, εμπορευματοκιβωτίων, και Connection Manager. Εδώ είναι μερικοί από τους τρόπους που χρησιμοποιούμε για κάθε ένα από αυτά τα συστατικά.

Αυτόματης

Η Αυτόματη Καταχώρηση συστατικό χρησιμοποιείται ευρέως στην ιστοσελίδα μας για να βοηθήσει τους χρήστες να βρουν μια πόλη ή αεροδρόμιο στο οποίο να νοικιάσετε ένα αυτοκίνητο. Μας άρεσε πολύ το πόσο εύκολο ήταν να εφαρμόσουν αυτό το στοιχείο, και πόσο γρήγορα αντιδρά. Εμείς cache αποτελέσματα αναζήτησης διακομιστή για να βοηθήσουν στη βελτίωση των αποτελεσμάτων αναζήτησης? Ωστόσο, έχοντας την πλευρά του πελάτη προσωρινή αποθήκευση και βοήθησε πάρα πολύ στο να επιταχυνθεί η αντίδραση του στοιχείου. Ένα άλλο χαρακτηριστικό που πραγματικά πήρε το πόσο εύκολο ήταν τα αποτελέσματα ήταν στο στυλ. Όταν δείτε τις τοποθεσίες στο χρήστη αυτό ήταν ζωτικής σημασίας, καθώς έπρεπε να προσδιορίσει ποια σημεία όπου βρίσκονται σε πόλεις και οι οποίες βρέθηκαν στα αεροδρόμια.

Ημερολόγιο

Το στοιχείο Ημερολόγιο και χρησιμοποιείται σε όλη την περιοχή, όταν ένας ενοικιαστής συμπληρώνοντας τις ημερομηνίες για τη διεξαγωγή μιας αναζήτησης. Είμαστε χρησιμοποιώντας μια προσαρμοσμένη έκδοση του John Peloquin της επιλογής Ημερολόγιο Διάστημα και εμφάνιση σε ένα παράθυρο διαλόγου YUI . Ουσιαστικά αυτό που θέλαμε να κάνουμε ήταν να δώσει στον ενοικιαστή δύο μηνών προκειμένου όταν επιλέγουν τις ημερομηνίες τους, καθώς και οπτικά τους δείξουμε τι ημερομηνία κυμαίνεται επί του παρόντος έχουν επιλεγεί. Και πάλι, αυτό ήταν εξαιρετικά απλό να εφαρμόσουν με YUI Ημερολόγιο 2, και ουσιαστικά κατέβηκε στη δημιουργία ενός διαλόγου YUI, θέτοντας το σώμα για να περιέχουν ένα div για το Ημερολόγιο, στη συνέχεια, επισυνάπτοντας Ημερολόγιο Διάστημα YUI αυτή div.

Εμπορευματοκιβώτια

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

Τα πράγματα έγιναν λίγο πιο διασκεδαστικό με τις αξιολογήσεις Βαθμολογήθηκε με μισθωτή υπηρεσία. Όταν δείτε τις βαθμολογίες, θέλαμε πραγματικά να εστιάσει την προσοχή του χρήστη με τα αποτελέσματα ενός οργανισμού που λαμβάνονται και να εμφανίσει αυτές τις πληροφορίες σε ένα καθαρό, εύκολο τρόπο-σε-view. Με τη χρησιμοποίηση του διαλόγου Ελέγχου ήμασταν σε θέση να περιορίσουν την viewport και το κέντρο διαλόγου εύκολα να μας βοηθήσει να επιτύχουμε αυτόν τον στόχο. Θέτοντας μια κενή κεφαλίδα και υποσέλιδο έκανε απλό στυλ με απλά προσθέτοντας τα κατάλληλα στυλ στο CSS μας. Το τελικό αποτέλεσμα ήταν ένα καθαρό δοχείο αξιολογήσεις που παρέχει τον ενοικιαστή με τις πληροφορίες που θέλουν.

Διαχείριση σύνδεσης

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

Ένας ενδιαφέρων τρόπος με τον οποίο χρησιμοποιούμε Connection Manager δεν είναι με την ενοικίαση μπλοκ μας κέντρο που βρίσκεται στις περισσότερες σελίδες. Για να βοηθήσει με την απόδοση κάνουμε πολλά ολοσέλιδη προσωρινή αποθήκευση σε πολλές από τις σελίδες περιεχομένου μας. Ωστόσο, εξακολουθούμε να ήθελε να εμφανιστεί η δυναμική ενοικίασης μπλοκ κέντρο σε αυτές τις σελίδες. Αυτό μας παρουσίασε ένα πρόβλημα που ήταν σε θέση να επιλύσουμε με Connection Manager. Αντί να διαλύσει πλήρως Αποθηκευμένη σελίδα μας και μνήμη cache μόνο πτυχές της σελίδας που βρήκαμε ήταν πιο εύκολο να περιλαμβάνουν μόνο το ενοίκιο μπλοκ κέντρο μέσω μιας απλής αίτησης ασύγχρονη. Βρήκαμε ότι αυτό μας επέτρεψε να διατηρήσει την απόδοση από την ύπαρξη ενός πλήρως αποθηκευμένη σελίδα, αλλά εξακολουθεί να εμφανίζει δυναμικό περιεχόμενο στο πλαίσιο ενοικίασης κέντρο μας.

Τελικές Σκέψεις

Συνολικά είμαστε εξαιρετικά ευτυχείς με την επιλογή μας να χρησιμοποιήσουμε YUI. Μας προσφέρει μια αρθρωτή βιβλιοθήκη που είναι καλά τεκμηριωμένη, εύκολο στη χρήση και εφαρμογή.

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

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

Στο YUI Γκαλερί 3: Ενότητα Ματ Τέιλορ RaphaelJS

27 Σεπτέμβρη, 2010 στις 13:05 από τον Matthew Taylor | Σε Ανάπτυξης , YUI Γκαλερί 3 | 9 Σχόλια

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

Ενώ η βιβλιοθήκη είναι εντυπωσιακή, αλλά έχω διαπιστώσει ότι μπορώ να προσθέσω ορισμένα σημαντικά χαρακτηριστικά στοιχεία της βιβλιοθήκης RaphaelJS με YUI3. Έχω ξεκίνησε τις προσπάθειες αυτές με τη νέα ενότητα Γκαλερί RaphaelJS .

Lazy RaphaelJS Φόρτωση και Plug-

Το πρώτο χαρακτηριστικό είναι η τεμπέλης-φόρτωση όχι μόνο της RaphaelJS βιβλιοθήκη, αλλά κάθε RaphaelJS πρόσθετα μπορεί να χρειαστείτε. Η Ενότητα Γκαλερί RaphaelJS θα φορτώσει μόνο αυτά τα αρχεία όταν δηλώνετε θα μπορούν να το χρησιμοποιούν σε YUI sandbox. Για παράδειγμα:

 
 YUI ({gallery: «γκαλερί-2010.09.22-20-15 '}). Χρήση (« γκαλερί-Raphael », η λειτουργία (Y) {
 
	 Y.Raphael (). Χρήση (λειτουργία (Ραφαήλ) {
		
		 / / Χρήση Ραφαήλ εδώ ακριβώς όπως θα κάνατε έξω YUI
		 var χαρτί = Ραφαήλ («myPaper», 500, 500)?
 
	 })?
 
 })?

Εάν χρησιμοποιείτε RaphaelJS plugins, προσδιορίζει τους δρόμους σε μια σειρά και να στείλετε ότι η πρώτη παράμετρος της Y.Raphael () χρήση () συνάρτηση.:

 
 YUI ({gallery: «γκαλερί-2010.09.22-20-15 '}). Χρήση (« γκαλερί-Raphael », η λειτουργία (Y) {
 
	 var myPlugins = ['plugins / raphael.awesomePlugin.js »,« plugins / raphael.wickedPlugin.js']?
 
	 Y.Raphael (). Χρήση (myPlugins, λειτουργία (Ραφαήλ) {
 
		 / / Χρήση Ραφαήλ εδώ ακριβώς όπως θα κάνατε έξω YUI
		 var χαρτί = Ραφαήλ («myPaper», 500, 500)?
		 / / Το «χαρτί» θα έχει οποιεσδήποτε νέες λειτουργίες προστεθεί από plugins σας τώρα
	 })?
 
 })?

Η βιβλιοθήκη RaphaelJS φορτωθεί πρώτα, τότε οποιεσδήποτε συγκεκριμένες plugins φορτωθεί πριν από τη λειτουργία επανάκλησης σας εκτελείται με το αντικείμενο Ραφαήλ ως η μόνη παράμετρος.

Προσαρμοσμένη Εκδηλώσεις

Μόλις δημιουργήσαμε ένα χώρο σχεδίασης με το αντικείμενο Ραφαήλ, τότε μπορείτε αμέσως να πιάσουμε το σχέδιο. Όταν καλείτε μεθόδους όπως rect , circle , και path στο χώρο σχεδίασης, θα λάβετε πίσω τα αντικείμενα που αντιπροσωπεύουν SVG διανύσματα. Κανονικά, θα έχετε πρόσβαση στα αντίστοιχα στοιχεία τους DOM μέσω του node ιδιοκτησίας. Για παράδειγμα:

 
 var χαρτί = Ραφαήλ («myPaper», 500, 500)?
 var τετράγωνο = paper.rect (0, 0, 100, 100)?

Αυτό δημιουργεί ένα ορθογώνιο αντικείμενο διάνυσμα στις συντεταγμένες [0,0] με πλάτος και ύψος 100 pixel. Έχετε πρόσβαση στο υποκείμενο στοιχείο DOM (η οποία είναι SVG rect στοιχείο) όπως:

 
 var rectNode = square.node?
 rectNode.onclick = λειτουργία () {
	 προειδοποίησης («Συγχαρητήρια, κάνατε κλικ σε ένα τετράγωνο!")?
 }?

Εάν είστε ένας άπληστος YUI χρήστη, θα θέλατε ίσως κάτι περισσότερο από αυτό. Τι θα λέγατε για ένα ενσωματωμένο στο Y.Node καθώς; Ακριβώς όπως ο node ιδιοκτησία αναφέρεται στην HTMLElement πίσω από το αντικείμενο SVG, το $node ιδιοκτησίας αναφέρεται στο Y.Node περιτύλιγμα για το εν λόγω στοιχείο. Έτσι, μπορείτε να κάνετε πράγματα όπως αυτό:

 
 πλατεία. $ node.on («mouseover», η λειτουργία () {
	 προειδοποίησης («Συγχαρητήρια, μπορείτε να μετακινήσετε ένα ποντίκι!")?
 })?

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

 
 var χαρτί = Ραφαήλ («rcanvas», 600, 800)?
 
 . var Circ paper.circle = (350, 200, 100) attr ({συμπληρώστε: «ροζ», εγκεφαλικό επεισόδιο: «μαύρο»})?
 
 / / Πιέζοντας ένα μάτσο ορθογώνια σε μια σειρά
 var i = 0? τετράγωνα = []?
 για (? θ <10? i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({συμπληρώστε: «κόκκινο», εγκεφαλικό επεισόδιο: «κίτρινο»}.))?
 }
 
 / / Βρόχου μέσω των ορθογώνια, προσθέτοντας ειδικά χειριστές MouseMove κύκλο για κάθε
 Y.Array.each (ορθογώνια, λειτουργία (RECT, δείκτης) {
	 var i = δείκτης + 1?
	 Circ. $ node.on («MouseMove», η λειτουργία (EVT) {
		 / / Το χρώμα γεμίσματος είναι δυναμική, εξαρτάται από τη θέση του ορθογωνίου
		 / / Του πίνακα καθώς και η θέση του ποντικιού
		 Αν var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 = κορυφή circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r κορυφή,
			 y = evt.clientY - κορυφή?
			 κόκκινο = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 πράσινο = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * I / 6),
			 μπλε = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6?
		 rect.attr («γεμίζουν», «rgb (« ​​κόκκινο + + »,« πράσινο + + »,« μπλε + + »)»)?
	 })?
 })?

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

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

Έτσι μπορείτε να δείτε ότι $node είναι μια χρήσιμη συντόμευση, αλλά τίποτα θεαματικό. Θα ήταν πραγματικά φανταστικό αν κάθε SVG αντικείμενο που δημιουργείτε με RaphaelJS μπορούσε να βάλει φωτιά προσαρμοσμένων συμβάντων . Αυτό θα επιτρέψει σε επιμέρους στοιχεία σχέδιό σας στη φωτιά προσαρμοσμένων συμβάντων, και τίποτα στη σελίδα θα μπορούσε να ακούσει και να απαντήσει. Αυτό μπορεί να είναι χρήσιμη με πολλούς τρόπους. Για τους αρχάριους, παρέχει πλούσια αλληλεπίδραση μεταξύ των σχεδίων σας. Αλληλεπιδράσεις των χρηστών με έναν φορέα μπορεί να κοινοποιήσει οποιαδήποτε στιγμή άλλοι φορείς της αλληλεπίδρασης σε πρώτη ζήτηση. Αυτό σημαίνει ότι μπορείτε να φωτιά programatically γεγονότα από τα σχέδια σας, όταν πληρούνται ορισμένες προϋποθέσεις. Όχι μόνο αυτό επιτρέπει τα σχέδια σας για να ενημερώσει άλλους φορείς, αλλά τίποτα στη σελίδα μπορεί να ακούσει μέσα

 
 var χαρτί = Ραφαήλ («rcanvas», 600, 800)?
 
 . var Circ paper.circle = (350, 200, 100) attr ({συμπληρώστε: «ροζ», εγκεφαλικό επεισόδιο: «μαύρο»})?
 
 / / Αποφάσεων συστοιχίες ορθογώνια και κύκλους
 var i = 0, ορθογώνια = [], κύκλοι = []?
 για (? θ <10? i + +) {
	 rectangles.push (paper.rect (0, 40 * θ, ι * 40, 20) attr ({συμπληρώστε: «κόκκινο», εγκεφαλικό επεισόδιο: «κίτρινο»}.))?
	 circles.push (paper.circle (0,0,20) απόκρυψη ().)?
 }
 Y.Array.each (ορθογώνια, λειτουργία (RECT, δείκτης) {
	 var i = δείκτης + 1?
	 Circ. $ node.on («MouseMove», η λειτουργία (EVT) {
		 Αν var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 = κορυφή circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r κορυφή,
			 y = evt.clientY - κορυφή?
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 κόκκινο = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 πράσινο = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * I / 6),
			 μπλε = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6?
		 / / Αυτή τη φορά, δεν αλλάζει μόνο το χρώμα, αλλά και το πλάτος ορθογώνιο
		 rect.attr ({
			 πλάτος: newWidth,
			 συμπληρώστε: «rgb (« ​​κόκκινο + + »,« πράσινο + + »,« μπλε + + »)»
		 })?
		 / / Ψήσιμο έθιμο περίπτωση να γνωστοποιήσει ότι το πλάτος αυτό ορθογώνιο έχει αλλάξει
		 rect.fire («πλάτος-αλλάξει», {πλάτος: newWidth, πηγή: RECT, προκειμένου:} δείκτης)?
	 })?
	
	 / / Κάθε ορθογώνιο παίρνει έναν ακροατή που πυρκαγιές σε πλάτος-άλλαξε
	 rect.on («πλάτος-αλλάξει», η λειτουργία (EVT) {
		 var attrs = evt.source.attrs?
		 / / Πάρει τον αντίστοιχο κύκλο και να το μετακινήσετε το δεξιό άκρο του ορθογωνίου
		 κύκλους [evt.order]. attr ({
			 CX: attrs.x + attrs.width,
			 CY: attrs.y,
			 συμπληρώστε: «cornflowerblue»
		 .}) Δείχνουν ()?
		
	 })?
	
 })?

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

Αυτό ανοίγει μερικές ενδιαφέρουσες Οι δυνατότητες για RaphaelJS μέσα YUI3. Για παράδειγμα, τι θα γινόταν αν θα μπορούσαμε να δημιουργήσουμε μια ομάδα διανυσματικά σχήματα με τον ίδιο τον όμιλο που είναι ο φορέας που πυρκαγιές εκδηλώσεις για τον έξω κόσμο; Εσωτερικά, κάθε σχέδιο φορέα θα μπορούσε να επικοινωνήσει με τη συσκευασία του, μέσω προσαρμοσμένων εκδηλώσεων, καθώς και το δοχείο θα λάβει αποφάσεις σχετικά με τα δεδομένα που πυροβολεί στον έξω κόσμο. Αυτό ανοίγει την ιδέα της πλήρως έγκλειστα, διαδραστικά στοιχεία ελέγχου SVG.

Περίληψη

Με την άνοδο των HTML5 και δορυφορικών τεχνολογιών, υπάρχουν τόσες πολλές περισσότερες επιλογές άλλες πλην του Flash για την πλούσια αλληλεπίδραση. Στην ιδανική περίπτωση, τυχόν vectored στοιχεία της σελίδας θα πρέπει να είναι πλήρως προσβάσιμα και να τυποποιηθεί. Αυτό ανοίγει υπέροχα Οι δυνατότητες για να δημιουργήσουμε προσιτά, βασικά στοιχεία ελέγχου ιστοσελίδων χωρίς να καταφεύγουν σε Flash. SVG είναι μια ελκυστική επιλογή, διότι κάθε φορέα που στη σελίδα υποστηρίζεται από ένα κόμβο DOM ότι μπορούμε να τροποποιήσουμε με YUI ακριβώς όπως οποιοδήποτε άλλο κόμβο DOM. Αυτό είναι ό, τι επιτρέπει η RaphaelJS Ενότητα Πινακοθήκη για να αυξήσει όλα τα SVG αντικείμενα που δημιουργήθηκαν από RaphaelJS, και ότι είναι το κλειδί για μια έντονη αλληλεπίδραση με αυτές τις elments από αλλού στη σελίδα.

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

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

clearfix ξαναφορτώνεται + υπερχείλιση: κρυμμένο Απομυθοποίηση

27 Σεπτέμβρη, 2010 στις 6:27 π.μ. από τον Thierry Koblentz | Σε CSS 101 | 12 Σχόλια

clearfix και overflow : hidden μπορεί να είναι οι δύο πιο δημοφιλείς τεχνικές για να καθαρίσει επιπλέει χωρίς δομική σήμανση.

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

clearfix

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

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

Έτσι, για να δημιουργήσει την ίδια διάταξη σε όλους τους φυλλομετρητές κουτί μπορούμε να βελτιώσουμε την αρχική μέθοδο με την παραγωγή περιεχομένου με τη χρήση δύο ψευδο-στοιχεία :before και :after :

  . Clearfix: πριν,
 . Clearfix: {μετά
   περιεχόμενο:? "."    
   display: block?    
   Ύψος: 0?    
   υπερχείλιση: κρυμμένο?	
 }
 . Clearfix: μετά {σαφής: τόσο?}
 . Clearfix {ζουμ: 1?} / * IE <8 * / 

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

overflow

Στις περισσότερες συζητήσεις σχετικά με την εκκαθάριση επιπλέει overflow:hidden μέθοδος έρχεται, και είναι πάντα καταρρίφθηκε από μια " Εάν τοποθετείτε απολύτως τοποθετημένα στοιχεία μέσα στο div, θα πρέπει να κόψει αυτά τα στοιχεία ». Αλλά αυτό δεν είναι απαραίτητα αλήθεια. overflow:hidden θα περιορίσει πάντα σχετικά τοποθετημένα στοιχεία, αλλά δεν θα κρύψει πάντα απόλυτα τοποθετημένο αυτά. Αυτό οφείλεται στο γεγονός ότι όλα εξαρτώνται από το μπλοκ που περιέχει:

Ορισμός των 10,1 "που περιέχει μπλοκ»:

4. Εάν το στοιχείο έχει «θέση: απόλυτη», που περιέχει το μπλοκ είναι εγκατεστημένος από το πλησιέστερο πρόγονο με «θέση» της «απόλυτης», «σχέση» ή «σταθερό», ...

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

Μπορείτε να ελέγξετε αυτή την επίδειξη της σελίδας για να δείτε πώς λειτουργούν τα πράγματα.

Καλύτερες εναλλακτικές λύσεις

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

  απεικόνιση: inline-block?
 πλάτος: <any ρητή value>? 

Περαιτέρω ανάγνωση

• Περιέχεται πλωτήρες, επισυνάπτοντας τον πλωτό εξοπλισμό με καθαρά CSS γνωστή ως τεχνική clearfix
• Πώς να καθαρίσει Επιπλέει χωρίς διαρθρωτικές Σήμανσης
• Η νέα μέθοδος Clearfix
• Ορισμός των 10,1 "που περιέχει μπλοκ"

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

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

YUI: Ώρες Λειτουργίας Τετ 29 του Σεπτεμβρίου

24η του Σεπτεμβρίου 2010 στις 1:50 pm από Luke Smith | Σε Ανάπτυξη | 1 σχόλιο

Η επόμενη δόση του YUI: Ώρες λειτουργίας θα είναι την επόμενη Τετάρτη, το 29ο.

YUI 3 Διαγράμματα έρχονται στην επόμενη έκδοση, και μια προεπισκόπηση των κάποιο πρώιμο έργο βρίσκεται ήδη στην Γκαλερί . Tripp Γέφυρες θα είναι για την πρόσκληση, εισάγοντας τη νέα δομή και δείχνοντας πως οι διδαχές από διαγράμματα πακέτο YUI 2 ενημέρωσε τη νέα αρχιτεκτονική, που αναζητούν λεπτή ισορροπία ανάμεσα στην ευελιξία και την απλότητα. Ω, και εγώ αναφέρω καμία Flash;

Επίσης, στο κατάστρωμα θα είναι Άλεν Ραμπίνοβιτς δίνει μια ενημέρωση για την καταπληκτική δουλειά που έχει κάνει τον επανασχεδιασμό yuilibrary.com. Μιλάμε πάντα, εδώ: αρχική σελίδα, οδηγούς χρήστη, επιδείξεις, σεμινάρια, API Docs. Τα έργα. Με πολλούς τρόπους αυτό είναι μια εντελώς νέα ιστορία, και πολύ καλύτερο.

Θα είμαστε σε απευθείας σύνδεση από δέκα εως δώδεκα το βράδυ PDT. Οι λεπτομέρειες της σύνδεσης είναι η ίδια όπως πάντα.

1. Κλήση για να 1-888-371-8922 (Skype λειτουργεί μεγάλο για μη αμερικανούς συμμετέχοντες *)
2. Εισάγετε τον κωδικό συμμετέχοντα 47188953 #
3. Ενώστε την κοινή προβολή οθόνης (αυτό θα σας ζητήσει να εγκαταστήσετε το Adobe Connect plugin αν αυτή είναι η πρώτη φορά χρήση του)

Και τέλος, το θέμα του φόρουμ yuilibrary.com για αυτό το ανοικτό Ώρες είναι εδώ . Κοιτάξτε εκεί για σημειώσεις, ενδιαφέρουσα takeaways, και την καταγραφή της κλήσης μετά το κάνει. Ή να ξεκινήσουμε τη συζήτηση από νωρίς με την ταχυδρόμηση ερωτήσεις, προτάσεις για θέματα, ή κώδικα που θέλετε κριτική.

Μην ξεχάσετε να εγγραφείτε στο Ημερολόγιο YUI και ακολουθήστε @ yuilibrary στο Twitter για τις πιο πρόσφατες ενημερώσεις για την Ανοικτή και άλλα Ώρες interestingness YUI.

Ελπίζουμε να σας δούμε εκεί!

* - Εάν το Skype δεν είναι μια επιλογή, με ηλεκτρονικό ταχυδρομείο για ένα τοπικό αριθμό.

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

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

Στην άγρια ​​για 24, Σεπτεμβρίου, 2010

24η του Σεπτεμβρίου 2010 στις 1:00 μ.μ. από τον Eric κατηγορουμένου | Σε Στην Άγρια | Comments Off

Όπως έχουμε έτοιμο για YUIConf 2010 και πολύ περισσότερο τους επόμενους μήνες, εδώ είναι μερικά από τα άλλα πράγματα που έχουμε λάβει υπόψη της στο μεγαλύτερο κόσμο YUI:

• YUI Θέατρο Μπλουζάκια Κατάλογος NetTuts της-πρέπει να δούμε F2E Podcasts : Andrew Burgess γράφει για YUI Θέατρο : "Φαίνεται ότι όσο πιο συχνά μερικές φορές το μήνα, το Yahoo! φέρνει σε προγραμματιστές σχετικά με την αιχμή της τεχνολογίας Web, για να κρατήσουν τους εργαζόμενούς τους μέχρι ημερομηνία. Προς όφελος της υπόλοιπης μας, αυτές οι συνομιλίες καταγράφονται και δημοσιεύονται. Θα βρείτε γνωστά προγραμματιστές, όπως ο Douglas Crockford και Nicholas Ζάκα, και οι συνομιλίες για τα πάντα, από την απόδοση και τη δυνατότητα πρόσβασης σε JavaScript και το DOM. " #
  
• DigitalInsurance.com (έναν @ apipkin ιστοχώρου) Powered by YUI 3 : Παραγωγικός γκαλερί Anthony παδέλα συνεισφέρων έχει βοηθήσει στη δημιουργία της νέας δικτυακής πύλης DigitalInsurance.com ., που τροφοδοτείται από YUI 3 #
  
• Προοδευτική Ενίσχυση Χρησιμοποιώντας αλλά τίποτα δεν JS (@ @ codepo8 για davglass) : Christian Χέιλμαν γράφει για Ajaxian: "Προοδευτική ενίσχυση εξακολουθεί να είναι μια σύγχυση θέμα για πολλούς ανθρώπους που είναι πολύ ενθουσιασμένοι για τις δυνατότητες της JavaScript στο πρόγραμμα περιήγησης στο σύγχρονο περιβάλλον. Μπορεί να φανεί αναχρονιστικό να γράψει λύσεις σας για μια μη-JS περιβάλλον και στη συνέχεια για άλλη μια φορά ενισχύει το JavaScript. Μεγάλωσα σαν ότι τόσο για μένα είναι ένα απλό θέμα να κάνουμε το σωστό, αλλά με σημερινό κόσμο της JavaScript βιβλιοθήκες και out-of-the-box widgets μπορεί να φαίνεται μια έλξη. Εισάγετε Γυαλί Dav της ομάδας YUI. Έχει γίνει μετατρέποντας την έννοια της προοδευτικής ενίσχυσης γύρω από το κεφάλι του και ως εραστής JS και backend κώδικα "endurer" βάλθηκε να λύσει αυτό το ζήτημα μια για πάντα με ένα καθαρό τρόπο το JavaScript. " Δείτε το πλήρες άρθρο για περισσότερες λεπτομέρειες . #
  
• Περισσότερα Πρόσθετα επικάλυψης για YUI 3 από Oliver Andrich : Από GitHub σελίδα του Oliver: "Επικάλυψη Plug-είναι μια συλλογή από πέντε πρόσθετα έγραψα για να μάθουν YUI 3 developement plugin γενικά. Τρεις από τις πέντε plugins περισσότερο ή λιγότερο μιμούνται τις Πρόσθετα επικάλυψης που δημιουργήθηκε από τον Eric Ferraiuolo .... Οι πέντε plugins είναι:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( αρχική πηγή. ) #
• YUI Reid του Burke Διαφάνειες για HackU στο Carnegie Mellon : YUI μηχανικός (και Yeti, συγγραφέας) Reid Burke υποκίνησε κάποιες διαφάνειες και ένα 3-YUI βάση slideshow κινητήρα για την πρόσφατη ομιλία του στο Carnegie Mellon. #
  
• Devcurry στη Μάθηση από τον JS Crockford και άλλων γκουρού YUI Θέατρο : Suprotim Agarwal γράφει devcurry σήμερα το πρωί: «Σε αυτό το post, θα μοιραστώ δεσμούς μερικά πολύ χρήσιμα βίντεο JavaScript και διαλέξεων που παραδίδονται από τον Γκουρού το JavaScript, γεμάτο πληροφορίες, διασκέδαση και παρακολουθώντας εντελώς δωρεάν! Παρά το γεγονός ότι το Διαδίκτυο είναι γεμάτο από δωρεάν βίντεο, έχω επιλέξει μόνο ένα ζευγάρι από αυτά, που βρήκα το πιο χρήσιμο. Ετοιμαστείτε να πάρετε τις σημειώσεις όπως μπορείτε να μάθετε .. διαλέξεις Crockford βίντεο για το JavaScript - Douglas Crockford είναι αρχιτέκτονας JavaScript και παίζει σημαντικό ρόλο και στο σχεδιασμό νέων χαρακτηριστικών της γλώσσας. Του βίντεο είναι ένα «must-have" για κάθε προγραμματιστή το JavaScript. YUI Θέατρο -.. Παρέχει πρόσβαση σε δωρεάν συνομιλίες προγραμματισμού από γκουρού σε JavaScript και ανάπτυξη ιστοσελίδων "Suprotim πηγαίνει για να απαριθμήσω μερικές άλλες πηγές περιεχομένου, συμπεριλαμβανομένων και των άλλων τίτλων Θέατρο YUI #
  

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

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