Generare il menu di goccia giù usando la biblioteca di YUI (interfaccia di utente di Yahoo)

Sembrate usare una versione dell'Internet Explorer. Per un'esperienza più sicuro di lettura rapida, considerare pregoe

Se siete nuovi qui, potete desiderare abbonarti alla nostra alimentazione di RSS come pure al nostro bollettino (sul menu destro superiore) per non ottenere gli articoli altamente informativi settimanale… e NO, noi mai Spam!

Pubblicare - sto avendo problema serio nell'effettuare la formattazione di tutto il codice così che cosa ho fatto sono io ho messo l'articolo originale completo in una lima di testo qui. Ritenere libero guardarla e consumare esso e le mie scuse per questo mess

---------------
Il fotoricettore sta evolvendosi. Non è come era poco di anni prima. Sono andati quei giorni in cui i Web site hanno significato un insieme delle pagine statiche che hanno avute priorità bassa bianca, immagini di one-two. Ora la gente desidera l'esperienza desktop in loro browser; e che cosa è un tavolo con fuori un menubar con il menu a discesa. Il menu di goccia giù può essere effettuato in molti sensi. Ma anziché codificazione della mano da zero, useremo la biblioteca dell'interfaccia di utente di Yahoo o di YUI. È un nuovo tuttavia uno la biblioteca di JS migliore fuori là.

Diritti accessori ed installazione
Trasferire YUI dal sistema centrale verso i satelliti di qui, decomprimerlo e mettere in un indice adatto che è accessibile dal vostro luogo. YUI è diviso nei pacchetti tali DOM, menu ecc. Alcuni pacchetti dipende da altri pacchetti. Il nostro pacchetto del menu dipende dall'evento, da DOM e dal contenitore. Dovremo includerli anche.

L'inizio

In primo luogo includeremo le lime importanti.

  beni/menu.css del href= del <link di/> " del testo/css " del type= " " dello stylesheet " " rel= delle serie complete di caratteri/fonts.css del href= " del <link di/> del testo/css " " del type= " " dello stylesheet " del rel= si ripristinano/reset.css del href= " del <link yui/configurazione/yui/configurazione/yui/configurazione/di yui/yahoo/yahoo.js dello src= del <script di/> " del testo/css " del type= " " dello stylesheet " " rel= di configurazione/menu/type= " testo/Javascript " ></script> "Javascript " type= " di evento/event.js dello src= " del <script yui/configurazione/configurazione/di yui/dom/dom.js " dello src= " del <script " di ></script>/del testo " Javascript " del type= menu/menu.js dello src= del <script di ></script> "/del testo type= " testo/Javascript " ></script> di yui/configurazione/"

Queste lime includono tre lime di CSS che è usato per designare le lime del contenitore e del menu per ogni pacchetto. Potete anche cambiare lo sguardo ed il tatto del menu modificando il css. Ora sviluppiamo il margine di profitto. Il margine di profitto per il menu sarà una lista unordered. Quella è la modifica “dell'UL„. Lascia lo sguardo al codice.

  class= " yuimenu " " di basicmenu " del id= del <div del >Show Menu</button> " del menutoggle " del id= del <button > class= " bd " del <div > class= " primo-de-tipo " del <ul > href= " http://mail.yahoo.com " di ><a " del yuimenuitem " del class= di <li>Yahoo! >Yahoo " di http://addressbook.yahoo.com " del href= di ><a " del yuimenuitem " del class= di <li di Mail</a></li>! Richiamare il >Yahoo " di http://calendar.yahoo.com " del href= di ><a " del yuimenuitem " del class= di <li di Book</a></li>! >Yahoo " di http://notepad.yahoo.com " del href= di ><a " del yuimenuitem " del class= di <li di Calendar</a></li>! Notepad</a></li> </ul></div> </div>

Ciò può sembrare molto complessa. Ma relativo non realmente. Il menu sarà tenuto in una divisione del contenitore che avrà identificazione “prova„ ed il codice categoria “yuimenu„. Questo codice categoria dice a questo è un menu. Ora un'altra divisione del contenitore ha chiamato “il bd„. L'inizio del menu sarà
modifica del <ul>. Le modifiche del <li> all'interno della volontà del <ul> hanno tenuto ciascuna delle voci di menu. Così avrà un codice categoria “di yuimenuitem„. Ci sono alcune voci di menu di esempio. Ma tranquillo non vedrete effetto a meno che il menu completamente sia inizializzato. Per farlo, mettere questo codice sulla sezione capa dopo che la lima includa.

  type= " testo/Javascript " del <script> YAHOO.example.onMenuReady = funzione (p_oEvent) {oMenu di varietà = nuovo YAHOO.widget.Menu (“basicmenu„, {fixedcenter: allineare}); oMenu.render (); ow di oMenu.sh (); onMenuToggleMouseDown di funzione (p_oEvent) {YAHOO.util.Event.stopPropagation (p_oEvent); ow di oMenu.sh (); } YAHOO.util.Event.addListener (“menutoggle„, “mousedown„, onMenuToggleMouseDown); } YAHOO.util.Event.onContentReady (“basicmenu„, YAHOO.example.onMenuReady); </script>

Come potete vedere il menu è inizializzato “dal nuovo YAHOO.widget.Menu (“basicmenu„, {fixedcenter: allineare}); „ Questo prende parecchie discussioni. Primo essere l'identificazione della divisione del menu, mentre il secondo è una lista delle opzioni. Scoprirete circa tutte le opzioni nella documentazione di api.

Quando osservate la pagina vedrete un menu appena come “il menu di inizio„. Il cambiamento giusto il css per abbinare i vostri luoghi osserva e ritiene. Potete anche aggiungere multi il menu della fila. Aggiungendo un altro <ul> etichettare all'interno di una modifica del <li>. Così spero che aggiungiate alcuni menu freddi nel vostro luogo.

Ripartir e godere: Queste icone si collegano ai luoghi bookmarking sociali in cui i lettori possono ripartire e scoprire i nuovi Web pagi.

(Nessun valutazioni ancora)

Caricamento…

Abbonar in un lettore |

Collegamenti potete trovare interessare -

Questa entrata è stata pubblicata domenica il 12 agosto 2007 a 3:07 pm ed è categorizzata sotto gli scritti, lezioni private. Potete seguire tutte le risposte a questa entrata con la magia di RSS 2.0. Potete anche lasciare una risposta, o il trackback dal vostro proprio luogo.

Sì! Le osservazioni sono SEGUONO in modo da ritenere libero collegarsi di nuovo agli alberini relativi ed espressivi.