Commentaire: Lorsque vous parlez de "HTML5" dans la foule, vous pouvez vous sentir comme une danseuse exotique ou une licorne venant au milieu de la maison avec une signification claire de "Je suis cool, je le sais"
On ne peut pas dire que nous sommes vains. L'API HTML de base ne s'est pas développée au cours des dernières années, de sorte que lorsqu'une petite nouvelle fonctionnalité apparaît, comme l'espace réservé, il nous donnera un aspect nouveau. Bien que de nombreuses fonctionnalités HTML5 soient implémentées dans de nouveaux navigateurs, la plupart des programmeurs ne savent toujours pas ou n'ont jamais entendu parler de petites API très utiles. Dans cet article, je présenterai des API de telles et accueillerai tout le monde pour découvrir des API HTML5 plus inconnues!
Element.classlist
L'API ClassList offre une fonction de base du contrôle des CS que nous avons implémentées au fil des ans à l'aide de la bibliothèque d'outils JavaScript:
// Ajouter une classe CSS
myElement.classList.add ("newClass");
// Supprimer une classe CSS
MyElement.classList.Remove ("EXISTERCLASS");
// Vérifiez si vous avez un cours CSS
myElement.classList.Contains ("OneClass");
// inverser l'existence ou non d'une classe CSS
myElement.classList.toggle ("AnotherClass");
La valeur principale de cette nouvelle API émergente est: simple et pratique.
API ContextMenu
Cette nouvelle API ContextMenu est très utile: elle ne remplace pas le menu d'origine du clic droit, mais ajoute votre menu de clic droit personnalisé au menu avec le bouton droit dans le navigateur:
<section contextMenu = "mymenu">
<! - Ajouter le menu ->
<menu type = "context">
<MenuItem Label = "Refresh Post" icon = "/ Images / Refresh-icon.png"> </ Menuitem>
<menu label = "partager sur ..." icon = "/ images / share_icon.gif">
<MenuItem Label = "Twitter" icon = "/ Images / Twitter_Icon.gif"> </ Menuitem>
<MenuItem Label = "Facebook" icon = "/ images / Facebook_Icon16x16.gif"> </ Menuitem>
</ menu>
</ menu>
</ section>
Il convient de noter qu'il est préférable d'utiliser JavaScript pour créer ces codes de menu dynamiquement, car l'événement de menu appellera éventuellement JavaScript pour exécuter des tâches. Si l'utilisateur interdit JavaScript, le menu clic droit ne sera pas généré et il ne verra pas le menu en même temps.
Élément.dataset
À l'aide de l'API de l'ensemble de données, les programmeurs peuvent facilement obtenir ou définir des données - * Propriétés personnalisées:
/ * Le code suivant est un exemple
<div data-name = "mydiv" data-id = "myid" data-my-custom-key = "Ceci est la valeur"> </div>
* /
// Obtenez des éléments
var element = document.getElementById ("myDiv");
// Obtenez un identifiant
var id = element.dataset.id;
// Lire la valeur de "Data-My-Custom-Key"
var customKey = element.dataset.mycomyKey;
// Modifier à d'autres valeurs
element.dataset.mycomykey = "une autre valeur";
// s'avérer:
// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "une autre valeur"> </div>
Inutile de dire que c'est aussi simple et pratique que la liste de classe
API Window.PostMessage
Même IE8 a soutenu l'API postmessage depuis de nombreuses années. La fonction de l'API PostMessage est qu'elle vous permet de transmettre des données d'information entre deux fenêtres de navigateur ou IFRAMES:
// à partir d'une fenêtre ou d'un iframe sur le domaine A, envoyez un message à une fenêtre ou ifame dans le domaine B.
var iframewindow = document.getElementById ("iframe"). ContentWindow;
iframewindow.possage ("salutations de la première fenêtre!"); </p> <p> // Recevoir des messages dans une fenêtre ou iframe sur un deuxième domaine différent
window.addeventListener ("message", fonction (événement) {
// tester la légalité du domaine
if (event.origin == "http://www.vevb.com") {
// Informations sur le journal de sortie
console.log (event.data);
// Message de rétroaction
event.source.postMessage ("Comment ça va!");
}
]));
Le corps du message ne peut être qu'une chaîne, mais vous pouvez utiliser JSON.Strification et JSON.Parse pour convertir les messages en corps de données plus significatifs!
Attribut automatique
L'attribut Autofocus peut créer des éléments de bouton, d'entrée ou de textarea devient automatiquement le centre de la page lorsque la page est chargée:
<entrée autofocus = "autofocus" />
<Button autofocus = "Autofocus"> Salut! </fut Button>
<TextArea AutofOCUS = "Autofocus"> </ TextArea>
Dans des endroits tels que Google Search Pages avec des modèles fixes, la propriété Autofocus est la caractéristique idéale.
Le navigateur prend en charge chaque API légèrement différemment, alors vérifiez la prise en charge de ces fonctionnalités avant de les utiliser. Prenez le temps de lire la description détaillée de chaque API, et je crois que vous en trouverez plus.