Un menu di scelta rapida personalizzato viene utilizzato raramente nell'interfaccia di una pagina Web. Dopotutto, non è affatto ovvio per l'utente che su qualche elemento sia necessario fare clic non con il tasto sinistro, ma con il tasto destro del mouse e selezionare un elemento dall'elenco. Inoltre, non tutti i visitatori del sito amano usare il tasto destro del mouse e gli smartphone non lo hanno affatto, solo l'imitazione. Nonostante queste caratteristiche in HTML5 è possibile creare i propri menu contestuali, questo è finora implementato solo in Firefox, e questo è molto particolare.
Innanzitutto, vediamo come vengono creati in generale. diversi menu... Per questo, viene utilizzata una combinazione di tag
Esempio 1. Menu contestuale
HTML5 IE Cr Op Sa Fx
L'attributo contextmenu ci dice che il nostro menu è contestuale e allo stesso tempo punta al tag
Esempio 2. Menu in Firefox
Il codice si è rivelato non valido, ma quando si fa clic sull'immagine in Firefox, appare bellissimo menu(Fig. 1).
Riso. 1. Menu contestuale
Anche se questo menu non funziona il modo giusto quindi ripetiamolo. Per prima cosa, aggiungiamo un'icona accanto alla voce di menu utilizzando l'attributo icon, in modo che il menu abbia un aspetto migliore. Il valore specifica il percorso relativo o assoluto del file grafico. Quindi è necessario assicurarsi che quando si fa clic su una voce di menu, si verifichi qualche azione. Per fare ciò, utilizzeremo l'evento onclick e con il suo aiuto chiameremo funzione desiderata... L'esempio 3 mostra la creazione menù contestuale per il testo, se selezioni "Modifica" al suo interno, il testo può essere modificato. Viene infatti utilizzato un campo di testo nascosto, che diventa visibile quando viene chiamata la funzione edit(), mentre il testo stesso rimane nascosto per tutta la durata della modifica. Dopo aver premuto Invio, il testo del modulo viene inserito al suo posto paragrafo di testo, dando l'impressione che fosse lui a governare. Il modulo, dopo il completamento della modifica, si nasconde nuovamente.
Esempio 3. Modifica del testo
Testo di esempio
Il nuovo menu è mostrato in Fig. 2.
Riso. 2. Menu con icona
Come puoi vedere dall'esempio, la creazione di un menu di scelta rapida non è diversa dalla creazione di altri elementi interattivi. Quando facciamo clic su una voce di menu, la nostra funzione viene chiamata utilizzando il gestore onclick, quindi questa funzione farà ciò che vogliamo. Firefox 8 è stato il primo browser a supportare i menu contestuali HTML5, ma è sorprendente il motivo Sviluppatori di Firefox ha introdotto il proprio tag personalizzato per il menu ... Esistono diversi scenari possibili per lo sviluppo degli eventi:
Non resta che attendere una risposta da altri browser in cui il tag sarà finalmente implementato, così come diversi menu basati su di esso.
Istruzioni
Se il browser non viene visualizzato menù e vedi sullo schermo solo la pagina Internet selezionata, il che significa che il tuo browser sta funzionando in modalità schermo intero... Ci sono diversi modi per uscirne.
Se nel menu a discesa menù non c'è un comando dato, usa la combinazione di tasti Alt e Invio, che ti permette di andare avanti e indietro in molti programmi. Anche in vari browser il cambio di modalità si effettua con il tasto F11.
Quando il pannello smette di nascondersi dietro il bordo superiore dello schermo, sposta il cursore su di esso e fai clic con il pulsante destro del mouse. Imposta in contesto menù marcatore di fronte alla voce "Pannello menù Stringa "O" menù»(La dicitura dipende dal browser installato).
A seguito di questa azione la finestra del browser dovrebbe visualizzare lo standard per menù punti. La voce "File" permette di gestire la finestra del programma, aprire e chiudere nuove finestre e schede, inviare pagine web per la stampa.
La voce "Modifica" contiene i comandi standard "Copia", "Taglia", "Incolla", "Trova" e non è molto diverso da paragrafo simile in qualsiasi altro programma. Per aspetto esteriore la finestra del browser corrisponde alla voce "Visualizza".
L'accesso alle risorse salvate dall'utente avviene tramite la voce "Preferiti" o "Segnalibri", menù"Servizio" o "Strumenti" consente di personalizzare il browser in base alle proprie esigenze.
Anche sul pannello menù potrebbero esserci altri strumenti, come la barra di stato, la barra dei preferiti, la barra di navigazione. Per personalizzare la loro visualizzazione, sposta anche il cursore sul pannello, fai clic destro su di esso e seleziona nel contesto menù gli elementi desiderati, contrassegnandoli con un pennarello.
Fonti:
Il numero di band che suonano musica di tutte le direzioni, dal jazz al rap-core, può essere valutato visitando un club. Fino a due dozzine escono sul palco a sera. Per risaltare sullo sfondo di questa moltitudine, non è sufficiente suonare buona musica: è necessario investire denaro nella tua promozione. Se la squadra non è pronta a separarsi con una grossa somma, deve cercare un aiuto dalla parte.
Gli sponsor tendono a collaborare con gruppi che hanno già successo. Pertanto, prima di te, vinci un pubblico abbastanza ampio e stabile. Per questo, oltre alla musica, cura la scenografia, gli effetti speciali, l'interazione dei musicisti sul palco, rendono ogni esibizione un po' nuova.
Elenca le organizzazioni situate nella tua zona o area le cui attività sono direttamente o indirettamente correlate alla musica. In un altro elenco, elenca il resto delle organizzazioni che non hanno alcun legame con te. L'aiuto può venire da qualsiasi direzione, ma inizia dal primo elenco.
Studia possibili opzioni... Prima di contattare qualsiasi organizzazione, verifica se è sponsorizzata e in quale area; se altri musicisti l'hanno contattata e se è stata rifiutata. Anche se sei te stesso, studia i suoi affari prima di prendere qualsiasi decisione.
Per un po' diventerai il volto dell'organizzazione. Pertanto, quando si considera la tua candidatura, lo sponsor sarà molto esigente riguardo al tuo aspetto. Se non sei pronto a cambiare la tua immagine per motivi di conformità, non contare sul consenso. Di norma, un potenziale sponsor non insiste su tale cambiamento, ma semplicemente rifiuta. Se non prendi in considerazione il criterio dell'aspetto, perderai tempo e, possibilmente, la possibilità di incontrare un vero sponsor.
Non negoziare su nulla. Tutte le condizioni devono essere specificate nel contratto. Discutere ogni punto con un avvocato. Se qualcosa non ti soddisfa, non essere timido. È meglio scoprire tutti i punti controversi ora che mordersi i gomiti in seguito a causa della propria disattenzione.
Video collegati
La rivista Preferiti è necessaria per non cercare quelle risorse a cui l'utente fa spesso riferimento in lavoro quotidiano... Fornisce accesso veloce ai materiali richiesti. Ci sono diversi passaggi che devi compiere per trovare i tuoi Preferiti.
I "Preferiti" esistono non solo nei browser, ma anche forniti nel menu di qualsiasi cartella memorizzata sul computer. Poiché la barra dei menu è sempre presente nelle cartelle, non è necessario configurare altro. Aprire la cartella, selezionare nel menu la voce "Preferiti", cliccandoci sopra con il tasto sinistro del mouse si aprirà il menu contestuale. Per inserire una qualsiasi cartella nell'elenco, selezionare il comando "Aggiungi ai preferiti" facendo clic su di essa con il tasto sinistro del mouse. La cartella selezionata apparirà nel menu.
Quando si lavora con i browser Internet, potrebbe essere necessario personalizzare la visualizzazione della barra dei menu, oppure pulsante dedicato, con il quale avrai accesso alla rivista "Preferiti". Per fare ciò, in Internet Explorer, fare clic con il tasto destro del mouse sul pannello, nel menu contestuale, selezionare uno dei Opzioni disponibili... Posiziona l'indicatore di fronte all'elemento "Barra dei menu" - in questo modo puoi aprire "Preferiti" nello stesso modo descritto nel primo passaggio.
Se vuoi che i segnalibri vengano visualizzati nel pannello del browser, seleziona la voce "Barra dei preferiti" nel menu contestuale, contrassegnandola anche con un pennarello. Un'altra barra degli strumenti viene aggiunta alla finestra del browser. Se pensi che occupi troppo spazio, puoi accedere rapidamente le risorse giuste e in un altro modo. Fare clic sull'icona a forma di stella nella barra degli strumenti, il registro si espanderà. Seleziona la scheda "Preferiti" al suo interno per visualizzare l'elenco degli indirizzi dei siti memorizzati nella cronologia.
Nel browser Mozilla Firefox la rivista con l'elenco delle risorse si chiama "Segnalibri". Puoi chiamarlo attraverso l'elemento con lo stesso nome in linea superiore menu personalizzando la visualizzazione dei Preferiti nella barra degli strumenti oppure aprendo il magazine della Biblioteca. Questo registro può essere richiamato in diversi modi: selezionare "Segnalibri" nella barra dei menu e il comando "Mostra tutti i segnalibri" o premere la combinazione Tasti Ctrl, Shift e B. Il diario si aprirà alle finestra separata.
Una finestra del browser è una forma di interfaccia grafica utilizzata quando un utente utilizza Internet. Allo stesso tempo, la finestra del browser ha ricevuto questo nome perché, come una normale finestra, ha una forma rettangolare.
Oggi questo segmento di mercato è in continua espansione, quindi gli utenti hanno la possibilità di scegliere tra diversi più o meno browser popolari a seconda delle funzioni e delle capacità disponibili in ciascuno dei programmi, sembrano essere più convenienti. Quindi, uno dei browser più utilizzati da molto tempo è "Internet Explorer", che per lungo tempo è stato il leader in popolarità tra gli utenti, ma molti altri stanno rivendicando la sua posizione oggi. programmi convenienti, ad esempio "Mozilla Firefox", "Opera", " Google Chrome" e altri.
Uno di questi parametri è la forma di fornitura di informazioni dalla pagina Internet. In tutti i browser esistenti oggi, viene presentato sotto forma di una cosiddetta finestra, un campo rettangolare in cui vengono visualizzati testo, immagini, video o altre informazioni. La finestra del browser può essere espansa per A schermo intero, ovvero riempire con esso l'intero spazio del monitor, oppure utilizzare la forma condensata della rappresentazione della finestra cliccando sul simbolo a forma di due quadrati a destra angolo in alto schermo. Inoltre, una finestra che non ti serve più può essere chiusa facendo clic sul simbolo a forma di croce, o ridotta a icona, cioè rimossa temporaneamente dal campo visivo facendo clic sul simbolo a forma di trattino.
Ogni finestra del browser può aprirne una o più schede aggiuntive per accedere a più pagine Internet contemporaneamente. Questo può essere fatto spostando il cursore del mouse su parte superiore schermo. In alcuni browser questa funzionalità viene mostrata come un simbolo più, mentre in altri viene mostrata come un piccolo campo libero accanto al nome di un sito già aperto. Chiudere scheda separata, devi anche fare clic sul simbolo della croce, quello sul lato destro della scheda.
Gli elementi principali della finestra in qualsiasi browser sono la barra degli indirizzi e il campo principale per la visualizzazione delle informazioni. Barra degli indirizzi viene visualizzato nella parte superiore della finestra del browser. Di solito inizia con i caratteri "www" o "http: //" ed è un codice alfabetico che ti porterà alla pagina che desideri. Attualmente, gli indirizzi delle pagine in Internet in lingua russa può essere digitato sia in caratteri latini che cirillici. Nel campo principale, puoi vedere di più testi diversi, immagini, video e altre informazioni, la cui composizione dipende dal contenuto del sito che stai visualizzando.
In questo tutorial, daremo un'occhiata più da vicino alle funzioni in modo molto chiave utile che è disponibile su qualsiasi tastiera. Questo tasto è chiamato "tasto del menu contestuale". Si trova nella parte inferiore destra della tastiera tra Tasti ALT e CTRL
Premendo questo tasto viene visualizzato il MENU CONTESTO, esattamente come se si premesse il pulsante DESTRO del mouse.Il trucco di questo pulsante è che il menu richiamato quando lo si preme visualizzerà funzioni (voci di menu) che possono essere applicate in programma attuale, v finestra attiva, sul desktop, ecc. Quelli. questo menu si adatta al processo in cui stai lavorando direttamente ed è molto conveniente.Diamo ora uno sguardo più da vicino alle principali opzioni per la visualizzazione del menu contestuale nei diversi ambienti e alle funzioni che possono essere eseguite utilizzando questo menu.Quando premi il tasto DESTRO del mouse o il tasto "Menu contestuale" sul desktop Desktop di Windows 7 appare un menu come segue:
1. Nella parte superiore del menu - impostazione dei parametri della tua scheda video.2. Visualizza: personalizza la visualizzazione delle icone sul desktop
3. Ordinamento - impostazione dell'ordinamento visualizzando le icone sul desktop
4. Aggiorna - Aggiorna la visualizzazione del contenuto sul desktop.5. Incolla: se hai copiato qualcosa, puoi incollarlo sul desktop.6. Crea. Qui puoi creare sul Desktop: cartella, collegamento, documento di testo, archivio, documenti MS Office - Word, Excel, PowerPoint, ecc. (se installato)
7. Risoluzione dello schermo. Qui è possibile impostare le impostazioni dello schermo richieste: selezionare uno schermo (potrebbero essercene diversi), scoprire o impostare la risoluzione dello schermo, determinare l'orientamento dello schermo e anche configurare altri parametri per lavorare con lo schermo, ad esempio collegare un proiettore.
8. Gadget - selezione e installazione Gadget di Windows 7. Windows XP non ha questa funzione.
9. Personalizzazione. Qui puoi personalizzare l'aspetto del desktop, cambiare lo sfondo, la schermata iniziale, i suoni, il tema, il colore della finestra, ecc.
Quando premi il tasto DESTRO del mouse o il tasto "Menu contestuale" su un file in Explorer o in qualsiasi altro file manager il menu si adatta anche al file di un certo tipo... Ad esempio, ho fatto clic su un file video. Si è aperto il seguente menu:
In questo caso, il menu offre funzioni che corrispondono esattamente al file video, ovvero: riproduci, aggiungi alla lista del player che è selezionato di default per di questo tipo file. E una serie di funzioni standard: apri con, aggiungi all'archivio (se l'archiviatore è installato), invia, taglia, copia, elimina, rinomina e proprietà del file.Se clicchi il tasto DESTRO del mouse o il tasto "Menu contestuale" su file grafico, si aprirà un menu, che corrisponderà al tipo di file grafico:
Qui puoi immediatamente aprire, modificare o stampare il file selezionato nel programma di immagini predefinito. Nel mio caso, questo è il programma ACDSee.Qui puoi creare immediatamente il file selezionato immagine di sfondo per il desktop, è molto comodo quando si sceglie da grande lista... E poi ci sono ancora le funzioni standard per lavorare con i file.Mi soffermerò più in dettaglio sulle voci "Apri con" e "Invia".Perché la funzione "Apri con" è utile
Qui puoi selezionare o assegnare qualcuno per lavorare con il file selezionato programma installato che comprende il formato di file selezionato. In questo caso, ho cliccato sul file video e diversi programmi possono funzionare con questo formato sul mio computer: Light Allow, WinAmp e ovviamente Windows Media Giocatore.Se il programma richiesto non è nell'elenco, ma sai per certo che è installato, seleziona la voce di menu "Seleziona programma". Windows ti chiederà di selezionare i programmi da un elenco di programmi consigliati o di altro tipo. In Windows XP, questa finestra ha un aspetto leggermente diverso, ma il significato è lo stesso.
Se desideri che il formato di file selezionato venga sempre aperto dal programma selezionato, seleziona la casella "Utilizza il programma selezionato per tutti i file di questo tipo".Se il programma richiesto non è nell'elenco dei programmi consigliati, o in altri, ma sai per certo che il programma è installato, fai clic sul pulsante "Sfoglia ..." e selezionalo dalla cartella in cui è installato il programma.Perché è utile la funzione "Invia"?Con questa funzione è possibile inviare (trasferire, trasferire) il file selezionato tramite BlueTooth (bluetooth), Skype, posta, al Desktop, all'archivio, per scrivere su un disco CD/DVD, su una chiavetta USB, così da parlare ecc.
E anche qui il menù si adegua a diverse situazioni, a seconda di dove si fa clic sulla pagina web. Ad esempio, se si fa clic sul collegamento, si aprirà il seguente menu:
Utilizzando questo menu, è possibile aprire il contenuto del collegamento in una nuova scheda o in una nuova finestra, aggiungere il collegamento ai segnalibri, inviare il collegamento, copiare il collegamento, se il collegamento è un file, è possibile salvarlo utilizzando " Salva l'obiettivo come ...". Se hai installato programmi per il download, puoi scaricare i contenuti del collegamento con il loro aiuto.Se si fa clic con il tasto DESTRO del mouse o il tasto "Menu contestuale" sull'immagine nella pagina Web, si aprirà un menu con altre funzioni:
Qui puoi copiare l'immagine negli appunti e incollarla, ad esempio, in Documento Word, puoi salvare l'immagine sul tuo computer usando "Salva immagine con nome ...", inviare l'immagine per posta, creare l'immagine selezionata motivo di sfondo desktop, trovare informazioni sull'immagine (tipo, dimensione, nome file), ecc.Permettetemi di riassumere. In questa lezione abbiamo esaminato le opzioni più popolari per l'utilizzo del menu contestuale, che viene richiamato facendo clic con il pulsante DESTRO del mouse o premendo il tasto "Menu contestuale" sulla tastiera.Vale a dire: 1. Premendo il tasto DESTRO del mouse o il tasto "Menu contestuale" sul desktop di Windows2. Premendo il tasto DESTRO del mouse o il tasto "Menu contestuale" su un file o una cartella in Explorer o in qualsiasi altro file manager.3. Premendo il tasto DESTRO del mouse o il tasto "Menu contestuale" in qualsiasi browser Internet.L'essenza questa lezione in modo che impari a utilizzare le funzioni utili dello specifico ambiente attivo del tuo computer. In qualsiasi ambiente, cliccando il tasto DESTRO del mouse o cliccando sul tasto "Menu contestuale", riceverai un elenco funzioni utili disponibili in questo momento tempo relativo all'oggetto selezionato.
Le applicazioni web oggi stanno diventando un nuovo passo nello sviluppo del web. Questi sono lontani dai normali siti di informazione. Gmail e Dropbox sono esempi di applicazioni web avanzate. Al crescere della funzionalità, della disponibilità e dell'utilità delle applicazioni web, cresce anche la necessità di aumentare l'efficienza del loro utilizzo. Questo tutorial riguarderà la creazione di una cosa così utile come il tuo menu contestuale, e in particolare:
Sul tuo computer, facendo clic con il pulsante destro del mouse sul desktop verrà visualizzato un menu di scelta rapida sistema operativo... Da qui probabilmente puoi creare nuova cartella, ottenere alcune informazioni e fare qualcos'altro. Il menu contestuale nel browser consente, ad esempio, di ottenere informazioni sulla pagina, visualizzarne le fonti, salvare un'immagine, aprire un collegamento in una nuova scheda, lavorare con gli appunti e così via. Inoltre, il set Azioni Disponibili dipende da dove hai cliccato, cioè dal contesto. Questo è il comportamento predefinito impostato dagli sviluppatori del browser [ E le sue estensioni].
Le applicazioni Web stanno lentamente iniziando a sostituire i menu contestuali standard con i propri. Gmail e Dropbox sono ottimi esempi. L'unica domanda è come creare il proprio menu contestuale? Nel browser, facendo clic con il pulsante destro del mouse si attiva l'evento del menu di scelta rapida. Dovremo sovrascrivere il comportamento predefinito e farlo in modo che invece di menu standard dedotto il nostro. Non è così difficile, ma lo capiremo passo dopo passo, quindi uscirà abbastanza voluminoso. Per cominciare, creiamo la struttura di base dell'applicazione in modo che l'esempio sviluppato non sia completamente fuori dalla realtà.
Un esempio del risultato è disponibile su CodePen. Puoi guardare lì subito se sei troppo pigro per leggere o vuoi assicurarti di essere davvero interessato a ulteriori letture. Nel frattempo, passiamo a sviluppo passo dopo passo concepito. Userò alcuni trucchi CSS moderni e creerò un elenco di attività di base basato sugli attributi dei dati. Userò anche il ripristino dello stile di Eric Meyer e ripristinerò la proprietà di ridimensionamento della casella per tutti gli elementi nel riquadro del bordo: *, * :: prima, * :: dopo (riquadro: bordo-riquadro;) Non userò i prefissi CSS, ma la demo di CodePen include un prefisso automatico.
Ma prima, aggiungiamo un ID al menu per facilitare l'accesso a JS. Aggiungi anche variabile di stato il menuState e e la variabile con la classe attiva. Abbiamo tre variabili: var menu = document.querySelector ("# menu contestuale"); var menuStato = 0; var active = "menu contestuale - attivo"; Andiamo oltre. Rivediamo la funzione contextMenuListener e aggiungiamo un toggleMenuOn che visualizza il menu: function contextMenuListener (el) (el.addEventListener ("contextmenu", function (e) (e.preventDefault (); toggleMenuOn ();));) funzione toggleMenuOn () (if (menuState! == 1) (menuState = 1 ; menu.classList.add (attivo);)) Al momento, puoi già chiamare il nostro menu contestuale con il tasto destro del mouse. Ma non si può dire che funzioni correttamente. In primo luogo, non è affatto dove vorremmo che fosse. Ci vuole un po' di matematica per risolvere il problema. In secondo luogo, non è ancora possibile chiudere questo menu. Tenendo conto del funzionamento dei normali menu contestuali, vorremmo che la nostra implementazione si chiudesse quando clicchiamo su un non menu e quando premiamo Esc. Inoltre, quando fai clic con il pulsante destro del mouse al di fuori del nostro menu, dovrebbe chiudersi e, invece, è necessario aprire il menu predefinito. Proviamo a risolvere tutto questo.
Un sacco di codice
(funzione () ("usa rigoroso"; //////////////////////////////////// / // ///////////////////////////////// // // FUNZIONI DI AIUTO // FUNZIONI AUSILIARIE // / //// //////////////////////////////////////////// ////// ///////////////////// / ** * Alcune funzioni di supporto qui. * Queste sono le funzioni di supporto stesse. * / ////// //// ///////////////////////////// ///////////////// //// ////////////////// // // FUNZIONI PRINCIPALI // FUNZIONI PRINCIPALI // ///////////////// //// ////////////////// //////////////////////////// //// /////// / ** * Variabili. * Variabili. * / Var taskItemClassName = "task"; var menu = document.querySelector ("# context-menu"); var menuState = 0; var activeClassName = "context -menu - active"; / ** * Inizializza il codice della nostra applicazione. * Inizializza il codice della nostra applicazione. * / function init () (contextListener (); clickListener (); keyupListener ();) / * * * Ascolta il menu di scelta rapida eventi. * Gestire gli eventi del menu contestuale. * / Fun ction contextListener () () / ** * Ascolta gli eventi di clic. * Trattamento clicca su eventi... * / funzione clickListener () () / ** * Ascolta gli eventi keyup. * Gestire l'evento keyup. * / function keyupListener () () / ** * Attiva il menu contestuale personalizzato. * Visualizza il menu di scelta rapida. * / function toggleMenuOn () (if (menuState! == 1) (menuState = 1; menu.classList.add (activeClassName);)) / ** * Esegui l'app. * Lancio dell'applicazione. * / dentro (); )) ();
La funzione di inizializzazione rimane la stessa. La prima modifica riguarda il contextListener, perché vogliamo memorizzare l'elemento su cui l'utente ha fatto clic in taskItemInContext e la funzione clickInsideElement lo restituisce: function contextListener () (document.addEventListener ("contextmenu", function (e) (taskItemInContext = clickInsideElement (e, taskItemClassName); if (taskItemInContext) (e.preventDefault (); toggleMenuOn (); positionMenu (e);) else taskItemInContext = null; toggleMenuOff ();)));) Lo reimpostiamo su null se il clic destro non era su un elemento dell'elenco. Bene, passiamo a clickListener. Come ho detto prima, per semplicità, forniremo solo informazioni alla console. Ora, quando si rileva l'evento click, vengono effettuati diversi controlli e il menu viene chiuso. Eseguiamo le regolazioni e iniziamo a elaborare il clic all'interno del menu di scelta rapida eseguendo alcune azioni e solo successivamente chiudendo il menu: function clickListener () (document.addEventListener ("click", function (e) (var clickeElIsLink = clickInsideElement (e, contextMenuLinkClassName); if (clickeElIsLink) (e.preventDefault (); else menuItemListener (clickeElIsLink) e.which || e .pulsante; if (pulsante === 1) (toggleMenuOff ();))));) Potresti aver notato che viene chiamata la funzione menuItemListener. Lo definiremo un po' più avanti. Le funzioni keyupListener, resizeListener e positionMenu rimangono invariate. Modificheremo leggermente le funzioni toggleMenuOn e toggleMenuOff, cambiando i nomi delle variabili per una migliore leggibilità del codice: funzione toggleMenuOn () (if (menuState! == 1) (menuState = 1; menu.classList.add (contextMenuActive);)) funzione toggleMenuOff () (if (menuState! == 0) (menuState = 0; menu.classList .remove (contextMenuActive);)) Infine, implementiamo il menuItemListener: funzione menuItemListener (link) (console.log ("ID attività -" + taskItemInContext.getAttribute ("id-dati") + ", Azione attività -" + link.getAttribute ("azione dati")); toggleMenuOff (); ) Questo completa lo sviluppo della funzionalità.
La base di codice per questo tutorial
