recherche

Maison >interface Web >Tutoriel H5 >Introduction à 5 interfaces HTML5 que vous ne connaissez pas_compétences du didacticiel HTML5

Introduction à 5 interfaces HTML5 que vous ne connaissez pas_compétences du didacticiel HTML5

WBOY
WBOYoriginal
2016-05-16 15:48:581961parcourir

Adresse d'origine : 5 API HTML5 dont vous ignoriez l'existence
Date d'origine : 27 septembre 2010
Date de traduction : 7 août 2013
Quand les gens voient ou Quand le mot « HTML5 ", on estime qu'au moins la moitié des gens la considéreront comme une beauté sexy et charmante, mais aussi comme une licorne qui peut vous rendre malheureux. Pas étonnant que nous, les développeurs ?
Nous avons remarqué que les API de base stagnent depuis si longtemps (probablement entre 1999 et 2009) que même une fonction supplémentaire de base comme "placeholder" nous prendra beaucoup de temps à traiter.
Bien que les navigateurs grand public actuels aient implémenté de nombreuses nouvelles fonctionnalités HTML5, de nombreux développeurs n'ont tout simplement pas remarqué ces API plus simples et plus utiles.
Cette série d'articles présente ces API d'interface et espère également encourager davantage de développeurs à explorer des API qui ne sont pas encore largement connues.
Element.classList
Cet attribut est publié depuis plusieurs années. Grâce à classList, nous pouvons manipuler l'attribut class du CSS sous-jacent via JavaScript.
Le code est le suivant :
🎜>

Copier le code
Le code est le suivant :

// Utiliser l'attribut classList ( Élément Dom, nom de la classe CSS)
function toggleClassList(element,cName){
// 1. API classList
// Changez de classe, supprimez-la si elle existe, ajoutez-la si ce n'est pas le cas
if(element.classList.toggle){
element .classList.toggle(cName);
return true
}
// !!! ,
// alors le code suivant ne sera pas exécuté. Ceci est juste à titre de démonstration, veuillez l'utiliser de manière flexible
// 2. API classList
// Si l'attribut de classe de l'élément contient masquer cette classe CSS.
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. API classList
// Supprimer la classe masquée
élément. classList.remove(cName);
} else {
// 4. API classList
// Ajouter une classe masquée
element.classList.add(cName); true;
};


API ContextMenu
Après le test, chrome28 ne fonctionne pas. . .
La nouvelle API, ContextMenu, est une excellente interface : cette interface vous permet d'ajouter facilement des éléments de menu au menu contextuel du navigateur (menu contextuel), au lieu de remplacer le menu contextuel par défaut du navigateur. Il est à noter qu'il est préférable d'utiliser le script js pour créer dynamiquement le menu contextuel du menu, afin d'éviter le code HTML redondant lorsque la page désactive le script JS.
Le code est le suivant :



Copiez le codeLe code est le suivant :



Cliquez sur cette zone pour voir le menu







/menuitem>

Element.dataset
L'API Dataset (dataset) permet aux développeurs de définir (définir) et d'obtenir (obtenir) des valeurs d'attribut commençant par le préfixe data- sur les éléments DOM.
Le code est le suivant :

Copiez le code
Le code est le suivant :




Copier le code
Le code est le suivant :
function testDataset(){
//
var intro = document.getElementById("intro"); attribut, mais la valeur de data-id
var id = intro.dataset.id
// data-website
var website = intro.dataset.website; url, cas de chameau..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName; = "qq:" id
",website:" website
",blogUrl:" blogUrl
",myName:" myName
//
warn(msg);
};


Rien à dire, tout comme classList, simple mais pratique. (Pensez-y, est-ce que cela a modifié certaines interactions et le découplage du JS d'arrière-plan et du front-end ?)

API window.postMessage

IE8 prend en charge l'API postMessage depuis plusieurs années, cette API permet window et des éléments iframe pour communiquer entre eux.
Support inter-domaines. Le code est le suivant :



Copier le code

Le code est le suivant :
// Depuis la fenêtre ou le frame du domaine 1, envoyez un message à l'iframe qui héberge un autre domaine var iframeWindow = document.getElementById("iframe").contentWindow; iframeWindow.postMessage("Bonjour depuis la première fenêtre); !");
// Depuis l'intérieur de l'iframe sur un hôte différent, recevez le message
window.addEventListener("message", function(event) {
// Assurez-vous que nous faisons confiance au domaine d'envoi
if(event.origin = = "http://davidwalsh.name") {
// Déconnectez-vous du message
console.log(event.data)
// Renvoyez un message
event.source.postMessage ("Bonjour!");
}
]);
// le message autorise uniquement les données de type chaîne, mais vous pouvez utiliser JSON.stringify et JSON.parse pour en transmettre davantage. messages significatifs.



Attribut autofocus

L'attribut autofocus garantit qu'un élément BUTTON, INPUT ou TEXTAREA donné obtient automatiquement le focus lors du chargement de la page.


Copier le code

Le code est le suivant :
Salut !
Les attributs autofocus sont principalement utilisés dans les pages de saisie simples. Pour plus de détails, veuillez vous référer à : attribut autofocus
Chaque fabricant de navigateur a un support différent pour ces API, il est donc préférable de vérifier la compatibilité avant de l'utiliser et de passer un peu de temps à lire. les API répertoriées ci-dessus, vous en apprendrez plus sur elles et les maîtriserez. Le code de test pour la partie
est le suivant :




Copiez le code

Le code est le suivant :




5 démonstrations d'interface API HTML5 que vous ne connaissez pas