hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Ajouter un menu contextuel sur votre site Web avec HTML5

Le menu contextuel est le menu répertorié lorsque vous cliquez avec le bouton droit sur l'écran de votre ordinateur. Le menu comprend généralement des raccourcis pour certaines de nos actions répétées favorites, comme la création ou le tri de dossiers / fichiers, l'ouverture d'une nouvelle fenêtre d'application ou l'accès aux Préférences Système pour modifier une option.

Pendant des années, le "menu contextuel" réside dans les applications natives. De nos jours, le menu contextuel apporte des tonnes d'avantages pour les applications Web, par exemple dans le Gestionnaire de fichiers de cPanel et Gmail . Ces menus sont construits avec un script JavaScript lourd.

À l'avenir, nous serons peut-être en mesure de créer des menus contextuels à utiliser sur notre site Web via HTML5 . Venez le vérifier avec moi.

Construire un menu contextuel

HTML5 a introduit deux nouveaux éléments, menu et menuitem, pour vous permettre de construire un menu contextuel. Pour que le navigateur traite l'élément de menu comme "menu contextuel", nous devons définir le type de menu comme context et lui attribuer un identifiant unique.

Voici un exemple où nous avons créé un menu contextuel avec deux éléments.

 Modifier le contenu  Sélection de courrier électronique 

Il est également possible d'ajouter un sous-menu en imbriquant l'élément de menu cette façon:

 Modifier le contenu  Sélection de courrier électronique  Facebook  Gazouillement 

Maintenant, pour que le menu contextuel apparaisse à l'écran lorsque nous effectuons un clic droit, nous utilisons un nouvel attribut HTML nommé contextmenu . Cet attribut est utilisé pour sélectionner le menu avec l'ID spécifié; compte tenu de notre exemple ci-dessus, nous pouvons cibler notre menu contextuel avec contextmenu=context-menu-id .

Nous pouvons assigner l'attribut dans une balise body si nous voulons utiliser le menu contextuel sur toute la page. Nous pouvons également l'ajouter dans un élément HTML pour utiliser le menu exclusivement dans cet élément.

Le nouveau menu contextuel apparaîtra dans le menu Système d'exploitation comme indiqué ci-dessous.

Ajouter une icône

Je suis sûr que beaucoup d'entre vous ont vu apparaître un menu contextuel avec une icône à côté. Dans certains cas, une icône peut être une aide visuelle importante qui pourrait aider les utilisateurs à se connecter et à comprendre le but du menu rapidement . De plus, cela donne également aux utilisateurs une idée de l'application associée aux nouveaux menus.

Nous pouvons également ajouter facilement une icône à notre menu contextuel basé sur HTML5 en utilisant l'attribut d' icon, par exemple:

 Modifier le contenu  Sélection de courrier électronique  Facebook  Gazouillement 

Voici ce que nous voyons dans le navigateur.

Rendre le menu fonctionnel

À ce stade, notre nouveau menu contextuel ne fait rien encore lorsque nous cliquons dessus. Mais il est très facile de le faire fonctionner avec JavaScript. Dans notre exemple, nous avons un menu nommé "Email Selection". Ce menu permet aux utilisateurs d'envoyer du texte en surbrillance avec leur application de messagerie .

Pour que cette idée se réalise, ajoutons la fonction pour récupérer le texte en surbrillance de l'utilisateur.

 function getSelectedText () {var text = ""; if (window.getSelection) {text = window.getSelection (). toString (); } else if (document.selection && document.selection.type! = 'Contrôle') {text = document.selection.createRange (). text; } return text; } 

Ensuite, nous créons une autre fonction, par exemple sendEmail (), qui va ouvrir l'application de messagerie. Le sujet de l'e-mail sera pré-rempli avec le titre du document, tandis que le contenu de l'e-mail sera rempli avec le texte sélectionné de l'utilisateur.

 fonction sendEmail () {var bodyText = getSelectedText (); window.location.href = 'mailto:? sujet =' + document.title + '& body =' + bodyText + ''; } 

Enfin, nous l'ajoutons dans notre menu avec l'attribut onclick pour le faire fonctionner en cliquant.

 Sélection de courrier électronique 

Par le passé, nous avons expliqué comment utiliser HTML5 EditableContent, ce qui nous permet d'éditer le contenu Web directement depuis le front-end. Nous pouvons utiliser cette fonction, en l'ajoutant dans notre menu appelé "Modifier le contenu".

Sidenote

Je suis très excité avec cette nouvelle fonctionnalité. Je peux voir beaucoup de possibilités de choses que nous pouvons construire avec le menu contextuel HTML5. Malheureusement, au moment d'écrire ces lignes, seul Firefox a implémenté cette fonctionnalité. J'espère que les autres navigateurs se rattraperont bientôt.

Vous pouvez voir la démo ci-dessous (cela ne fonctionne que sur Firefox) .

  • Voir la démo
  • Source de téléchargement

Comment choisir les écouteurs parfaits (2017)

Comment choisir les écouteurs parfaits (2017)

Que nous l'admettions ou non, certains d'entre nous achètent toujours de nouveaux écouteurs. D'autres sont simplement frustrés avec une paire d'écouteurs qui sont simplement faux pour eux . Cependant, les écouteurs peuvent vraiment être des investissements ponctuels, en particulier avec les étiquettes de prix qui entrent en jeu.Connaî

(Conseils techniques et de conception)

Derrière les signatures des 25 plus grands noms de Tech

Derrière les signatures des 25 plus grands noms de Tech

Vous êtes-vous déjà demandé combien vous pouviez dire de l'écriture ou de la signature de quelqu'un? Qu'une signature soit un nom complet, un surnom, juste les initiales ou un gribouillis, chaque type dit quelque chose sur la personnalité de la personne, comme les «i» non marqués, les majuscules prononcées, la lisibilité du nom et du prénom ou même l'usage d'une période dans la signature.Myprint247 a

(Conseils techniques et de conception)