Share
Aujourd'hui, je vais vous présenter deux éléments HTML5: et , partie de la spécification Interactive Elements. Le Web a évolué pour devenir quelque chose de plus que des documents liés. les pages se comportent de plus en plus comme des applications. En tant que tel, le moment est opportun pour créer des fonctionnalités d'interactivité Web standard..
Ces deux éléments sont parmi les moins discutés par les développeurs, probablement en raison de leur manque de support dans les principaux navigateurs. Firefox est le seul navigateur à avoir implémenté cet élément au moment de la rédaction de cet article..
Quand on parle de menu il est important de ne pas confondre avec . La spécification définit bien la différence entre ces deux éléments distincts..
le est le Elément de navigation HTML. C'est l'élément qui représente le bloc de navigation de la page Web. Il contient généralement un ensemble de liens qui permettent aux utilisateurs de naviguer ou de parcourir des sections de la page ou vers une autre page du site Web..
le , D'autre part, représente un ensemble de commandes de menu. L'idée est similaire aux applications de bureau ou mobiles. Les applications de bureau utilisent généralement des menus de barre d’outils et de menus contextuels pour effectuer diverses tâches. Prendre le Brouiller menu dans Photoshop, par exemple. Ceci effectue une tâche qui rend le calque sélectionné flou.
Menu Flou dans PhotoshopC'est la différence sous-jacente entre ces deux éléments. devrait contenir des liens pour aider les utilisateurs à naviguer dans les pages Web, alors que le élément devrait aider les utilisateurs à effectuer certaines tâches.
En un mot, le L'élément est conçu pour la création de menus contextuels, de barres d'outils et de menus contextuels. Cependant, ces deux derniers n'ont encore été implémentés dans aucun navigateur, y compris dans Firefox. Pour le moment, il est difficile de deviner comment (si?) Les navigateurs les implémenteront et à quoi ils vont ressembler. Il y a également de bonnes chances que les spécifications de la barre d'outils et du menu contextuel changent légèrement à la prochaine itération..
Pour le moment, nous concentrerons notre attention sur le Menu contextuel fonctionnalité.
Un menu contextuel (ou menu contextuel) apparaît lorsque vous cliquez avec le bouton droit sur une application. Les options révélées sont spécifiques à l'endroit où l'utilisateur a cliqué, d'où le contexte.
Menu contextuel natif sous OS X et UbuntuIl est possible d'ajouter des menus contextuels sur des pages Web via JavaScript ou un plugin jQuery. Le problème avec cette méthode est qu’elle nécessite souvent des balises lourdes et que, de manière critique, le script supprime le menu contextuel natif du navigateur, ce qui peut perturber les attentes des utilisateurs ordinaires s’il n’est pas effectué correctement.
Menu contextuel personnalisé dans Google Drive avec le element incorporera les nouveaux éléments de menu dans le menu contextuel natif. Dans l'exemple ci-dessous, nous allons ajouter à notre un nouvel élément de menu contextuel nommé "Hello World".
Les parties essentielles de l'extrait ci-dessus sont les attributs - identifiant, type et menu contextuel - qui spécifient le type de menu en tant que le contexte menu ainsi que la portée où le nouveau menu devrait être affiché.
Dans notre cas, le nouveau menu apparaîtra n’importe où sur le document lorsque vous effectuerez un clic droit, comme nous l’avons attribué à l’aide de la commande menu contextuel attribuer à la corps.
Vous pouvez également limiter la portée d’une section donnée de la page en attribuant le Lorsque nous le visionnons dans le navigateur (pour le moment, uniquement dans Firefox), vous devriez voir que le Les sous-menus comprennent un groupe d'éléments comportant des actions associées ou similaires. Le Photoshop Rotation de l'image Le menu en est un exemple parfait. le Rotation de l'image Le menu contient plusieurs éléments de sous-menu pour permettre aux utilisateurs de choisir le degré de rotation ( En utilisant le Lorsque nous exécutons ceci dans un navigateur prenant en charge, nous trouvons un nouveau menu avec quatre sous-menus: De plus, un nouvel attribut appelé Et là c'est l'icône, comme vous pouvez le voir ci-dessous. Nous avons créé quelque chose qui ressemble à un menu contextuel, mais il ne fonctionne pas encore comme tel. Les utilisateurs s'attendent à ce que quelque chose se passe lorsqu'ils cliquent dessus; en cliquant sur Copie devrait copier le texte ou le lien, en cliquant sur un Nouveau dossier élément de menu devrait créer un nouveau dossier. Nous pouvons le faire en utilisant JavaScript. Remarque: avant de poursuivre, je vous recommande de jeter un coup d'œil sur le cours de Jeremy McPeak sur les fondamentaux de JavaScript; un excellent point de départ pour ceux qui apprennent JavaScript. Prenons l'exemple de «Rotation d'image» ci-dessus, ajoutons une fonction qui fera pivoter l'image sur laquelle nous avons cliqué. CSS3 Transform and Transition peut effectuer la rotation réelle dans le navigateur pour nous; voici le style qui fera pivoter l'image de 90 degrés: Avec la règle de style spécifiée, nous devons écrire une fonction pour l'appliquer à l'image: Ajouter cette fonction dans le respectif Pour terminer, créez les règles de style qui feront pivoter l’image de 180 degrés et la retournent. Et ajoutez chaque fonction dans l'élément respectif avec le paramètre. Voir cet exemple en action dans la page de démonstration. le Espérons que Safari, Chrome, Opera et Internet Explorer seront bientôt compris et implémenteront également les autres types de menus ( menu contextuel attribuer aux éléments - , , et etc. - à la place dans le corps.
élément du menu nous avons déclaré est ajouté tout en haut de la liste.
Le nouvel élément de menu, "Hello World", est chargé dans le menu contextuel natif..Ajout de sous-menu et d'icône
900 et 1800 ) ils veulent, ainsi que la direction pour l'appliquer. élément, l’ajout de sous-menus est simple et intuitif. Allez-y et nid un autre avec un étiquette pour déclarer le nom du menu, comme suit:
Les icônes
icône a été introduit permettant d’ajouter une icône à côté du menu. Il est à noter que cet attribut est uniquement applicable dans le élément. Spécifiez le chemin de l'icône vers le icône, ainsi.
Chaque sous-menu a maintenant une icône illustrative. Icône Icônes par Fugue.Ajouter une fonction dans le menu
.rotation-90 transformation: rotation (90 degrés);
fonction imageRotation (name) document.getElementById ('image'). className = name; à travers le sur clic attribue et passe le paramètre avec le nom de la classe, rotation-90:Conclusion
Cet élément pourrait être très utile aussi bien dans les applications Web que dans les sites Web classiques. Malheureusement, le soutien est toujours très faible.
apparaitre et barre d'outils ). Je suis vraiment impatient de voir comment cet élément évoluera au cours de la prochaine année..Références supplémentaires
Accentsconagua