Il menu non viene cliccato con il mouse nel browser. Gestione del clic con il tasto destro del mouse (sul menu contestuale). Cos'è il menu contestuale

Menù contestualeè il menu che appare quando si fa clic con il pulsante destro del mouse sullo schermo. In genere, tali menu vengono utilizzati per semplificare l'esecuzione delle azioni preferite, come l'ordinamento di cartelle e file, l'apertura di una nuova finestra dell'applicazione o l'accesso alle impostazioni di sistema.

Per molti anni, il termine "menu contestuale" si riferisce principalmente alle applicazioni native. Tuttavia, ora abbiamo l'opportunità di sfruttarlo anche nelle applicazioni web. Un esempio è il file manager in Gmil. Questo menu è implementato utilizzando il codice javascript:

In futuro, saremo in grado di creare menu contestuali per siti basati su HTML5. Vi invitiamo a familiarizzare con questo approccio.

Sviluppo del menu contestuale

HTML5 ci ha introdotto a 2 nuovi elementi: menu e menuitem, e ti permettono di creare menu contestuali. Affinché il browser tratti l'elemento di menu come un "menu contestuale", dobbiamo impostare il tipo di menu su contesto e assegnargli anche un ID univoco.

Di seguito è riportato un esempio in cui creiamo un menu contestuale con queste proprietà.

Abbiamo anche la possibilità di aggiungere sottomenu ramificando l'elemento del menu in questo modo:

Ora, affinché il menu contestuale appaia sullo schermo quando si fa clic con il pulsante destro del mouse, utilizziamo un nuovo attributo HTML chiamato menu contestuale. Questo attributo viene utilizzato per identificare il menu con l'ID specificato. Dato il nostro esempio sopra, possiamo definire il nostro menu contestuale con contextmenu=context-menu-id.

Possiamo impostare un attributo sul tag body se vogliamo utilizzare il menu contestuale in tutta la pagina. Possiamo anche aggiungerlo all'elemento HTML in modo che questo menù utilizzato esclusivamente all'interno di questo elemento.

Ora un nuovo menu contestuale apparirà all'interno del menu del sistema operativo, come mostrato nell'esempio seguente.

Aggiunta di un'icona

Siamo sicuri che molti di voi avranno visto menu contestuali che utilizzano icone. In alcuni casi, un'icona può essere un ottimo aiuto visivo per aiutare gli utenti a trovare il menu. Inoltre, consente anche agli utenti di capire a cosa serve il menu.

Possiamo anche aggiungere un'icona al nostro menu contestuale HTML5 usando l'attributo icon:

Ecco cosa vedremo nella finestra del browser.

Far funzionare il menu

A questo punto, il nostro nuovo menu contestuale non funzionerà al clic. Tuttavia, possiamo facilmente riportarlo in sé per mezzo di piccolo codice javascript. Nel nostro esempio, il menu si chiama Selezione email. Questo menu consente agli utenti di inviare il testo selezionato tramite e-mail.

Per farlo funzionare, aggiungiamo una funzionalità che consentirà agli utenti di utilizzare il codice evidenziato.

Funzione getSelectedText() (
var testo = "";
if(window.getSelection) (
testo = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Controllo") (
testo = documento.selezione.createRange().testo;
}
testo di ritorno;
};
Quindi creiamo un'altra funzione, diciamo sendEmail() , che apre il client di posta elettronica. L'oggetto della lettera sarà il testo inserito dall'intestazione del documento e il corpo della lettera sarà riempito con il testo selezionato.

funzione inviaEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Infine, aggiungiamo questa funzionalità al nostro menu tramite l'attributo onclick.

Selezione e-mail
In precedenza ti abbiamo spiegato come utilizzare HTML5 EditableContent che ci consente di modificare i contenuti web direttamente sulla pagina. Possiamo usare questa funzione, aggiungendolo al nostro menu chiamato "Modifica contenuto".

Insomma

Personalmente, ne siamo rimasti molto contenti nuova caratteristica. Vediamo molte possibilità in esso. Sfortunatamente, al momento della stesura di questo articolo, solo Firefox supporta questa funzione. Speriamo che altri browser si colleghino presto ad esso.

È possibile visualizzare una demo di seguito (funziona solo in Firefox).

In questo tutorial, daremo un'occhiata a una funzionalità HTML5 menzionata raramente, il menu contestuale. Forse non hai mai sentito parlare di un menu del genere prima, ma in alcune situazioni può essere estremamente utile.

Per cosa può essere utilizzato l'attributo contextmenu? Ti consente di aggiungere varie opzioni al menu contestuale del browser che fai clic con il pulsante destro del mouse con poche righe di HTML, anche quando Javascript è disabilitato. Anche se al momento questo strumento utile disponibile solo in Firefox.

Ecco come funziona:

Usare il menu contestuale è molto più semplice di quanto possa sembrare a prima vista. Devi aggiungere l'attributo contextmenu:

Quindi creiamo il menu:

L'attributo id deve corrispondere all'attributo contextmenu. Pertanto, è possibile utilizzare diversi menu contestuali per diverse parti della pagina.

Quindi aggiungiamo voci di menu. Per prima cosa inseriamo una voce di menu con testo e un'icona, poi aggiungiamo un collegamento per trasmettere la pagina corrente a Facebook e infine inseriamo un collegamento per aggiornare la pagina. Si scopre un menu contestuale con tre elementi:

Puoi anche creare sottomenu:

Una proprietà molto interessante e utile di HTML5. Ma la sua applicazione è limitata solo al browser Firefox.

Le prestazioni di tutti i dispositivi. In caso di guasti, guasti, non è sempre necessario chiamare specialisti, a volte pagando i loro servizi a prezzi piuttosto alti. Molte carenze, gli errori possono essere corretti indipendentemente. Questi tipi di guasti, gli errori includono quando il pulsante destro del mouse non apre il menu di scelta rapida. Come agire in questi casi?

Innanzitutto, dovresti scoprire perché l'operazione fallisce, perché il menu contestuale non funziona. menù di finestre 10. Ci sono diverse possibili ragioni per questo:

disordine del registro con file obsoleti;
mancanza di programmi inclusi nel menu contestuale, il loro funzionamento instabile.

Consideriamo cosa fare in questi casi, come modificare la situazione quando il menu contestuale del tasto destro non si apre.

Se il menu contestuale del tasto destro non viene visualizzato a causa del fatto che il registro è ingombro di file obsoleti, si consiglia di utilizzare un'utilità per la pulizia, ad esempio Glary Utilities. Glary Utilities è un insieme di tweaker di sistema, utilità che aiutano a proteggere, ritocchi, migliorare le prestazioni del PC. Utilizzando il set è possibile rimuovere file non necessari che intasano il sistema, voci di registro obsolete da tempo, ottimizzare la RAM, gestire l'avvio, ottimizzare la memoria e altre funzioni utili per il buon funzionamento del computer. Glary Utilities può essere scaricato gratuitamente.

Dopo aver impostato le impostazioni, pulisci il tuo dispositivo da file spazzatura tramite la stessa utility, pulisci il registro, aumentando così la velocità del computer.

Blocca la correzione del bug

Se quando fai clic su RMB su un file o una cartella, il menu contestuale sul desktop non funziona, il computer si blocca, la chiave non risponde ai comandi, puoi risolvere questo blocco in due modi, ti consigliamo di eseguire entrambi in sequenza . Prima di procedere con uno di essi, è necessario disporre dei diritti di amministratore. Dovrai lavorare con il registro, qui devi stare attento, se lo fai in modo errato, il sistema potrebbe non funzionare. Pertanto, quando si avvia il processo di correzione degli errori, assicurarsi di creare un punto di ripristino del sistema prima di eliminare qualsiasi cosa.

Un blocco "silenzioso" è solitamente causato da un programma instabile, un programma bloccato o quando un collegamento nel menu contestuale punta a una risorsa inesistente.

Metodo uno

Segui i passaggi in sequenza:

Controlla l'elenco che appare per i programmi che hai già disinstallato.
Se c'è un programma che hai rimosso nell'elenco, rimuovilo dal registro. Prima di eliminare qualsiasi chiave di registro, ti consigliamo di crearne una copia di backup da salvare nel caso in cui sia necessario ripristinarla.

Metodo due

L'algoritmo per il secondo metodo, quando il menu contestuale di Windows 10 non si apre, sarà il seguente.

Apri l'editor del registro come descritto nei passaggi 1-2 del metodo precedente.
Apri la sottochiave HKEY_CLASSES_ROOT,
In esso vedrai diverse sottosezioni con nomi come "nome_programma.exe", "nome_programma.dll". Controlla ognuno a turno facendo clic su LMB, fino alla sottosezione "comando". Tutte le sottosezioni devono essere aperte. Se non si apre, nella parte destra della finestra, vedi la presenza del parametro "NoOpenWith". Non esiste un tale parametro: crealo. Per cosa segui i passaggi:

Dopo aver trovato la sottosezione "comando", fare clic su LMB, verificare la presenza del parametro "(Default)" sul lato destro. Il parametro deve essere impostato sull'applicazione o risorsa di rete esistenti sul computer.

Se il parametro si riferisce ad una risorsa non più presente, l'intera sezione che inizia con il nome di questa risorsa, il programma, va cancellata. Non dimenticare di creare una copia di backup prima di eliminare per il ripristino, se necessario. Elimina facendo clic sul nome della sezione con RMB, quindi facendo clic su "Elimina" - "Sì".

Dopo aver completato i due metodi, dovrebbe aprirsi il menu contestuale, il PC smetterà di bloccarsi quando RMB fa clic sul file.

Non è difficile far funzionare il menu contestuale, ricorda solo che qualsiasi tentativo di modificare il registro può portare a un funzionamento instabile del PC, quindi non dimenticare di creare punti di ripristino, copie di archivio dei programmi da rimuovere. Quando il tasto destro del mouse non apre il menu contestuale, segui le istruzioni sopra in sequenza, applica tutti i metodi, l'errore verrà corretto.

Hai notato che fare clic con il pulsante destro del mouse sulle immagini su alcuni siti non fa nulla. Sembra che il pulsante sia inattivo e il browser non se ne preoccupi: "si blocca e pensa". In realtà, il browser blocca semplicemente i clic ricevendo tale comando dallo script JavaScript della pagina caricata.

Come sbloccare il pulsante destro fare clic su un'immagine per salvarla per la visualizzazione offline? Nella maggior parte dei browser Internet, questo è sufficiente per "scavare" nelle impostazioni avanzate javascript.. COSÌ…

Se hai " musica lirica»:
1. Seguire il percorso "Strumenti" -> "Impostazioni generali";
2. Nella finestra che appare, fermati alla voce "Contenuto" e trova il pulsante "Configura JavaScript" (vedi Fig. 1).

3. Facendo clic su di esso, richiama la finestra per le impostazioni dettagliate di JavaScript e deseleziona la casella accanto alla riga "Blocca pulsante destro".
Dopo la conferma (cliccando su "Ok"), questo pulsante diventerà "libero" per le chiamate al menu contestuale. Per inciso, dentro firefox» Per sbloccare il pulsante destro, è necessario deselezionare la casella accanto a tale elemento (vedere Fig. 2).

In altri browser avanzati, il blocco del pulsante destro viene rimosso allo stesso modo, tramite le stesse impostazioni avanzate di JavaScript.

Le applicazioni web oggi stanno diventando un nuovo passo nello sviluppo del web. Questi sono tutt'altro che normali siti di informazione. Gmail e Dropbox sono esempi di applicazioni web avanzate. Con l'aumentare della funzionalità, dell'accessibilità e dell'utilità delle applicazioni web, cresce anche la necessità di aumentare l'efficienza del loro utilizzo. Questa guida esaminerà la creazione di una cosa così utile come il tuo menu contestuale, e in particolare:

Scopriamo cos'è un menu contestuale e perché è necessario.
Implementiamo il nostro menu contestuale utilizzando JS e CSS.
Tocchiamo le carenze e i limiti dell'approccio utilizzato per sapere quali problemi possono metterci in guardia durante il lancio di tutto questo in produzione.

Cos'è un menu contestuale?

Secondo Wikipedia, il menu contestuale è un menu che appare quando l'utente interagisce con GUI(premendo il tasto destro del mouse). Il menu contestuale contiene un set limitato azioni possibili, che di solito è associato all'oggetto selezionato.

Sul tuo computer, facendo clic con il pulsante destro del mouse sul desktop verrà visualizzato un menu contestuale sistema operativo. Da qui, probabilmente puoi creare una nuova cartella, ottenere alcune informazioni e fare qualcos'altro. Il menu contestuale nel browser consente, ad esempio, di ottenere informazioni sulla pagina, visualizzarne il codice sorgente, salvare un'immagine, aprire un collegamento in una nuova scheda, lavorare con gli appunti e così via. Inoltre, l'insieme delle azioni disponibili dipende da dove esattamente hai cliccato, cioè dal contesto. Questo è il comportamento standard stabilito dagli sviluppatori di browser [ Ed estensioni ad esso].

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 tuo menu contestuale? Nel browser, facendo clic con il pulsante destro del mouse viene attivato l'evento menu contestuale. Dovremo sovrascrivere il comportamento predefinito e fare in modo che venga visualizzato il nostro menu invece del menu standard. Non è così difficile, ma lo capiremo passo dopo passo, quindi risulterà piuttosto voluminoso. Per iniziare, creiamo Struttura basilare applicazioni in modo che l'esempio in fase di sviluppo non sia completamente fuori dal contatto con la realtà.

Elenco delle attività

Immaginiamo di creare un'applicazione che ci consenta di mantenere un elenco di attività. Capisco che probabilmente sei già incredibilmente stanco di tutti questi elenchi di attività, ma così sia. La pagina dell'applicazione contiene un elenco di attività in sospeso. Per ogni attività è disponibile un insieme tipico di azioni CRUD: ottenere informazioni sull'attività, aggiungerne una nuova, modificare, eliminare.

Dal traduttore
La traduzione in alcuni punti è abbastanza gratuita, ma non a scapito del significato o del contenuto. Tutto ciò che non è direttamente correlato all'originale è incluso nelle note.
Con suggerimenti, auguri e commenti, come di consueto, in LAN.

Materiali tematici: