Yahoo! Blog διασύνδεση χρήστη (YUIBlog)

Ερχόμενοι σε YUI 3.2.0: SimpleYUI

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

SimpleYUI είναι ένας νέος τρόπος φόρτωση και instantiating YUI 3 . Το αρχείο SimpleYUI περιέχει μια συλλογή των βασικών λειτουργιών της βιβλιοθήκης Αίας: καθήκοντα DOM, άντληση περιπτώσει, UI εφέ και Ajax. Σε αντίθεση με άλλους τρόπους φόρτωσης YUI, SimpleYUI δημιουργεί ένα παράδειγμα YUI αμέσως μετά την φόρτωση και δεσμεύει όλα τα συστατικά που περιλαμβάνονται σε ένα παγκόσμιο Y μεταβλητή. Χρησιμοποιώντας SimpleYUI είναι εύκολη:

 <Script type = "text / javascript"
  src = "http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js" <>> / script

 <script>
  / / Y είναι έτοιμο προς χρήση? Δεν χρειάζεται συγκεκριμενοποίηση:
  Y.one ("# foo") addClass ("highlight").?
 </ Script>

Αυτό isn'ta "lite" ή de-ευχαριστημένος έκδοση του YUI - εξακολουθείτε να έχετε πρόσβαση σε όλες τη δύναμη και τα χαρακτηριστικά ολόκληρης της βιβλιοθήκης, όταν ξεκινάτε με το αρχείο SimpleYUI. Ωστόσο, SimpleYUI παρέχει μια ωραία ευκολία από τροχαίο κάποια κοινή λειτουργικότητα και την δημιουργία ενός παγκόσμιου παράδειγμα ( Y ) που είναι έτοιμο για χρήση αμέσως.

Εργασία με το DOM

SimpleYUI σας δίνει όλες τις συνήθεις αλληλεπιδράσεις DOM στην YUI 3 API:

 / / Να πάρετε μια αναφορά στοιχείου, προσθέστε ένα handler κλικ
 Y.one ('# demo »). Στις (" κλικ ", λειτουργία (e) {/ * λαβή κλικ */});

 / / Προσθέσετε περιεχόμενο σε ένα στοιχείο
 . Y.one ('# demo) append («Συμπληρωματικό περιεχόμενο προστίθεται στο # demo.')?

 / / Ακούσετε για κάθε κλικ σε οποιοδήποτε <li> που κατεβαίνει από # demo:
 . Y.one ('# demo ") αναθέτουν (" κλικ ", λειτουργία (e) {/ * * λαβή κλικ /},« li »)?

 / / Μετακίνηση # demo με τη θέση του κάθε κλικ στο έγγραφο
 Y.one («έγγραφο»). Στις ("κλικ", λειτουργία (ε) {
    	 Y.one ('# demo ») setXY ([e.pageX, e.pageY]).?
	 }
 )?

Δημιουργία UI Επιδράσεις

Όλα τα αποτελέσματα UI που αποτελούν μέρος του (νέο-για-3.2.0) ενότητα Μεταβατική YUI είναι διαθέσιμα σε SimpleYUI:

 / / Fade # demo, στη συνέχεια αφαιρέστε το από το DOM:
 Y.one ('# demo »). Μετάβασης ({
     χαλάρωση: «ευκολία-out»,
     Διάρκεια: 2, / / δευτερόλεπτα
     αδιαφάνεια: 0
 }, Λειτουργία () {
     this.remove ()?
 })?

Αίας

SimpleYUI παρέχει τις βασικές λειτουργίες της μονάδας IO του Άγιαξ:

 / / Κάντε μια αίτηση HTTP για την «get.php»:
 Y.io («get.php», {
     σχετικά με: {
         πλήρης: λειτουργία (id, απάντηση) {
             var δεδομένων = response.responseText? / / δεδομένων απάντηση.
             / / ...  λαβή της απάντησης ...
         }
     }
 })?

Το υπόλοιπο της YUI είναι μόνο χρήση () μακριά

Εσείς δεν περιορίζονται σε αυτό που έρχεται πακέτο με SimpleYUI. Μπορείτε να φέρετε σε οποιοδήποτε άλλο YUI 3 στοιχείο, YUI 3 Gallery ενότητα, ή YUI 2 συσκευή με απλή use() δήλωση ανά πάσα στιγμή.

 / / Χρήση drag and drop, η οποία δεν περιλαμβάνεται στη συλλογή SimpleYUI:
 «Dd-drag» Y.use (, λειτουργία (Y) {
     var dd = νέα Y.DD.Drag ({
         Κόμβος: «# foo '
     })?
 })?

YUI 3 είναι καλό για τη φόρτωση ό, τι χρειάζεστε όταν τη χρειάζεστε? Ακριβώς πλοίαρχος του use() δήλωση και να είστε πάντα μόνο μία γραμμή κώδικα μακριά από οτιδήποτε στη βιβλιοθήκη που χρειάζεστε.

Χρησιμοποιήστε SimpleYUI όταν ...

• ... Θέλετε να ξεκινήσετε γρήγορα και να μάθετε τα σχοινιά του YUI?
• ... Θέλετε να έχετε τις βασικές λειτουργίες της βιβλιοθήκης Ajax διαθέσιμες ανά πάσα στιγμή στη ζωή της σελίδας χωρίς τη δημιουργία ενός νέου παράδειγμα YUI.

Μην χρησιμοποιείτε SimpleYUI όταν ...

• ... Θέματα επιδόσεων άνω ευκολία?
• ... Θέλετε να μερίδες sandbox της εφαρμογής σας σε ξεχωριστές περιπτώσεις?
• ... Που θέλετε να είναι εσκεμμένη σχετικά με το πότε διάφορες συνιστώσες του φορτίου και ποιο είναι το ακριβές ενότητα / submodule μακιγιάζ είναι στη σελίδα.

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

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