Δημιουργήστε την πτώση κάτω από τις επιλογές χρησιμοποιώντας (ενδιάμεσο με τον χρήστη Yahoo) τη βιβλιοθήκη YUI

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

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

Ο Ιστός εξελίσσεται. Δεν είναι πώς ήταν πλάτη λίγων ετών. Πηγαίνουν εκείνες τις ημέρες όταν σήμαναν οι ιστοχώροι ένα σύνολο στατικών σελίδων που είχαν το άσπρο υπόβαθρο, ένας-δύο εικόνες. Τώρα οι άνθρωποι θέλουν την εμπειρία υπολογιστών γραφείου στον ξεφυλλιστή τους και τι είναι ένας υπολογιστής γραφείου με έξω έναν menubar με τις εξελισσόμενες επιλογές. Η πτώση κάτω από τις επιλογές μπορεί να εφαρμοστεί από πολλές απόψεις. Αλλά αντί της κωδικοποίησης χεριών από την αρχή, θα χρησιμοποιήσουμε τη βιβλιοθήκη YUI ή ενδιάμεσων με τον χρήστη Yahoo. Είναι νέο ακόμα η καλύτερη βιβλιοθήκη JS έξω εκεί.

Perquisites και εγκατάσταση
Μεταφορτώστε YUI από εδώ, το αποσυμπιέστε και βάλτε σε έναν κατάλληλο κατάλογο που είναι προσιτός από την περιοχή σας. YUI διαιρείται σε συσκευασίες τέτοιες DOM, επιλογές κ.λπ.... Μερικές συσκευασίες εξαρτώνται από άλλες συσκευασίες. Η συσκευασία επιλογών μας εξαρτάται από το γεγονός, τα DOM και το εμπορευματοκιβώτιο. Θα πρέπει να τους περιλάβουμε επίσης.

Η αρχή

Πρώτα θα περιλάβουμε τα σημαντικά αρχεία.

 
< η σύνδεση href="yui/build/reset/reset.css" rel="stylesheet" τύπος="" 
κειμένων/css />
< σύνδεση href="yui/build/fonts/fonts.css" rel="stylesheet" τύπος="" κειμένων/css />
< συνδέει href="τύποσyui/build/menu/assets/menu.css "rel= "stylesheet "τύπος= "" κειμένων 
/ css/
> < χειρόγραφοsrc= 
"yui/build/yahoo/yahoo.js "="κείμενο/javascript"></χειρόγραφο >
< χειρόγραφο src=τύπος 
"yui/build/event/event.js "="κείμενο/javascript"></χειρόγραφο >
< χειρόγραφο src=τύπος 
"yui/build/dom/dom.js "="κείμενο/javascript"></χειρόγραφο >
< χειρόγραφο src=τύπος 
"yui/build/menu/menu.js "="κείμενο/javascript"></χειρόγραφο >
 

Αυτά τα αρχεία περιλαμβάνουν τρία css αρχεία που χρησιμοποιείται για να ορίσει τα αρχεία επιλογών και εμπορευματοκιβωτίων για κάθε συσκευασία. Μπορείτε επίσης να αλλάξετε το βλέμμα και την αίσθηση των επιλογών με την τροποποίηση css. Τώρα ενισχύστε τη σήμανση. Η σήμανση για τις επιλογές θα είναι ένας άτακτος κατάλογος. Αυτή είναι η ετικέττα "ul". Αφήνει να εξετάσει τον κώδικα.

 
< το κουμπί ταυτότητα="menutoggle">παρουσιάζει <επιλογών / κουμπί >
< div ταυτότητα=κατηγορία "basicmenu "="yuimenu">
< div κατηγορία="BD">
< 
ul κατηγορία="πρώτος-$$$-ΤΎΠΟΣ">
< κατηγορία λι="yuimenuitem">< ένα href="http://mail.yahoo.com">Yahoo! <Ταχυδρομείου 
/ α ></λι >
< 
κατηγορία λι="yuimenuitem">< ένα href="http://addressbook.yahoo.com">Yahoo! < 
Βιβλίωνδιευθύνσεων / α ></λι >
< κατηγορία λι="yuimenuitem">< ένα href="http://calendar.yahoo.com">Yahoo! 
Ημερολογιακό</α ></λι >
< κατηγορία λι="yuimenuitem">< ένα href="http://notepad.yahoo.com">Yahoo! <Σημειωματάριων / α ></λι >
</ul ></div >
</div >
 

Αυτό μπορεί να φανεί πολύ σύνθετο. Αλλά του όχι πραγματικά. Οι επιλογές θα κρατηθούν σε ένα εμπορευματοκιβώτιο div που θα έχει την ταυτότητα "δοκιμή" και κατηγορία "yuimenu". Αυτή η κατηγορία λέει αυτό είναι επιλογές. Τώρα ένα άλλο εμπορευματοκιβώτιο div αποκαλούμενο "BD". Η έναρξη των επιλογών θα είναι
< ul > ετικέττα. < Λι > εσωτερικό ετικεττών < ul > κράτησε κάθε ενός από τα στοιχεία επιλογών. Έτσι θα έχει μια κατηγορία "yuimenuitem". Υπάρχουν μερικά στοιχεία επιλογών παραδείγματος. Αλλά δεν θα δείτε ακόμα καμία επίδραση εκτός αν οι επιλογές μονογράφονται πλήρως. Για να το κάνετε, βάλτε αυτόν τον κώδικα στο επικεφαλής τμήμα αφότου περιλαμβάνει το αρχείο.

 
< ο τύπος χειρογράφων="κείμενο/javascript">
            YAHOO.example.onMenuReady
= λειτουργεί (p_oEvent) {*VAR oMenu = νέο 
YAHOO.widget.Menu("basicmenu", {$l*fixedcenter: αληθινός }) 
oMenu.render ()  oMenu.show ()  λειτουργία 
onMenuToggleMouseDown (p_oEvent) 
{$l*YAHOO.util.Event.stopPropagation (p_oEvent)  oMenu.show ()  } 
YAHOO.util.Event.addListener("menutoggle", "mousedown", 
onMenuToggleMouseDown)  } 
YAHOO.util.Event.onContentReady("basicmenu", 
YAHOO.example.onMenuReady)
        </χειρόγραφο >
 

Όπως μπορείτε να δει τις επιλογές μονογράφεται από το "νέο YAHOO.widget.Menu("basicmenu ", {$l*fixedcenter: αληθινός })" Αυτό παίρνει διάφορα επιχειρήματα. Η πρώτη ύπαρξη η ταυτότητα των επιλογών div, ενώ η δεύτερη είναι ένας κατάλογος επιλογών. Θα ανακαλύψετε για όλες τις επιλογές στην τεκμηρίωση API.

Όταν βλέπετε τη σελίδα θα δείτε επιλογές ακριβώς όπως τις "επιλογές έναρξησ". Ακριβώς αλλάξτε css για να ταιριάξετε με τις περιοχές σας κοιτάζει και αισθάνεται. Μπορείτε επίσης να προσθέσετε τις πολυ επιλογές σειρών. Με την προσθήκη άλλου < ul > η ετικέττα μέσα α < το λι > κολλούν. Έτσι ελπίζω ότι θα προσθέσετε μερικές δροσερές επιλογές στην περιοχή σας.

(Καμία εκτίμηση ακόμα)

  Φόρτωση...

• Χρησιμοποίηση της βιβλιοθήκης ενδιάμεσων με τον χρήστη Yahoo (YUI) με τα πέσος Φιλιππίνων
• Προγραμματισμός με wxWidgets
• Κύλισμα ενός ικανοποιημένου συστήματος διαχείρισης από την αρχή με τα πέσος Φιλιππίνων, MySQL, TinyButStrong και FCKEditor
• Υποβάλτε τον ιστοχώρο σας V7n στον κατάλογο
• Κοινωνικός δημιουργός Wordpress Plugin σελιδοδεικτών - δημιουργήστε την κοινωνική εικόνα Boormaking στο Blog σας

Ταχυδρομήστε ένα σχόλιο