Pour chaque programmeur, fournir aux utilisateurs une interface de style unifié est une exigence immuable. Cependant, il est particulièrement difficile de réaliser cette unification de style sur les pages Web, car il existe des différences dans la façon dont différents systèmes d'exploitation et navigateurs expriment le contenu de la page Web, et cette différence est presque irrégulière. Ce problème est particulièrement important dans le processus de traitement des éléments de forme. Ce qui rend de nombreuses personnes impuissantes, c'est la question des normes de performance unifiées des boutons de soumission.
Par exemple, la balise d'entrée avec l'attribut de type = semble très laide dans différents navigateurs (dans Firefox), ou a un type de défaut (dans Internet Explorer), ou même agit très rigide (en safari). La solution à ce problème consiste généralement à définir la propriété d'entrée sur l'image, puis à concevoir une image de bouton par vous-même. Mais nous devons ajouter beaucoup de travail très ennuyeux chaque fois que nous devons utiliser les boutons. Par conséquent, nous avons besoin d'une meilleure solution, une approche plus flexible et significative pour les concepteurs. Heureusement, cette méthode existe déjà en réalité, et ce dont nous avons besoin, c'est de faire un peu plus de travail. Amis, s'il vous plaît, permettez-nous de vous présenter notre mignon petit ami, camarade de classe <button>!
Bouton d'entrée vs
Voici l'étiquette du bouton de soumission que vous utilisez:
<Type d'entrée = soumettre Value = Soumider />
Leurs styles de performance dans différents navigateurs sont les suivants:
Et lorsque nous utilisons <frush> pour créer le bouton comme ci-dessus:
<Button Type = Soumider> Soumider </ Button>
Ils sont exprimés dans le style suivant:
Ces boutons ne sont pas différents des boutons que nous avons créés ci-dessus dans leur comportement de course et de présentation. En plus de les utiliser pour soumettre le formulaire comme, vous pouvez également les définir pour être indisponibles, ajouter des raccourcis ou définir un tabindex, etc. Heureusement, en plus des différents styles d'expression, Safari prend en charge ces fonctions (par rapport aux boutons d'entrée, le bouton de Safari n'a pas l'effet liquide sur la surface). La fonction la plus cool de la balise <Fut-bouton> est que nous pouvons placer des éléments HTML utiles à l'intérieur, comme l'ajout d'images en utilisant le code suivant:
<Button Type = Soumis> <img src = alt = /> soumettre </ bouton>
Leur apparition dans le navigateur est la suivante:
Pas mal. En fait, selon la définition de W3C, l'élément <button> a vu le jour pour résoudre ces différences de performances.
Les boutons créés avec la fonction de l'élément de bouton comme les boutons créés avec l'élément d'entrée, mais ils offrent des possibilités de rendu plus riches: l'élément de bouton peut avoir du contenu. Par exemple, un élément de bouton qui contient une image de fonctions comme et peut ressembler à un élément d'entrée dont le type est défini sur l'image, mais le type d'élément de bouton permet le contenu.
L'élément bouton - W3C
Par conséquent, nous devons trouver une solution de conception pour cela, et heureusement, Internet avec des données massives peut nous fournir une aide utile pour résoudre ce problème. C'est en effet très pratique, mais malheureusement, les concepteurs et les développeurs de sites Web ne connaissent même pas l'existence de cet élément. Avant de décider de remplacer Wufoo par l'élément bouton (un produit réseau de cet article, Dudo Note), je dois être sûr que cette balise et CSS peuvent répondre aux besoins suivants:
Exigences:
1. Ils doivent avoir l'apparence de boutons
2. Il existe les mêmes styles d'expression dans différents navigateurs
3. Les styles appliqués dans le bouton peuvent également être utilisés sur les hyperliens (car les interactions dans WUFOO utilisent toujours la méthode de soumission de formulaire et le contact de liaison pour envoyer la méthode Ajax, ils peuvent souvent être proches les uns des autres, donc j'ai besoin d'eux pour avoir le même style d'expression)
4. La balise peut être flexible et facile à modifier dans différentes circonstances
5. Pour les événements qui se produisent lors de la transmission d'informations, vous pouvez les distinguer efficacement par les icônes et les couleurs.
Face aux problèmes ci-dessus, j'ai d'abord écrit des CSS, puis j'ai résolu le problème du croisement. Ensuite, nous verrons:
Résultat finalIl n'y a rien pour faire des histoires à ce sujet, c'est très simple, mais c'est très efficace. La raison pour laquelle j'aime utiliser cette méthode et gérer les boutons est parce que je n'ai pas à démarrer la création de Photoshop un par un pour créer 10 000 icônes. Si nous regardons attentivement le code, vous constaterez que les deux boutons derrière sont en fait deux liens.
<div class = boutons>
<Button Type = soumettre class = positif>
<img src = / images / icons / tick.png alt = />
Sauvegarder
</ bouton>
<a href = / mot de passe / reset /
<img src = / images / icons / textfield_key.png alt = />
Changer le mot de passe
</a>
<a href = # class = négatif>
<img src = / images / icons / cross.png alt = />
Annuler
</a>
</div>
Le but de cela est dû au fait que de nombreuses actions dans les applications Web sont motivées par l'événement (REST), donc l'envoi de demandes d'utilisateurs via une URL spécifique peut initialiser ces actions. L'utilisation de styles qui peuvent être appliqués sur les deux éléments rend notre unification de style plus flexible lors du maintien de l'interaction causée par l'AJAX et les boutons de soumission standard.
Maintenant, vous pourriez demander, pourquoi dois-je quitter l'attribut alt de l'élément d'image vide? Alt est un attribut nécessaire de l'élément IMG. Il est utilisé pour expliquer le contenu de l'image, mais il n'y a pas de description pertinente de l'image ici, ce qui est en effet un peu déroutant. Cependant, contrairement aux attributs manquants, la valeur d'attribut vide est complètement conforme à la norme. Il a déclaré au navigateur que ces images représentent des informations complètement négligeables, ce qui empêche également le navigateur de ne pas pouvoir trouver le bouton suivant en raison de l'occlusion des informations rapides. Étant donné que les icônes ici sont complètement redondantes, nous préférons ne pas perdre le temps aux utilisateurs à afficher cette icône qui est entièrement utilisée pour réaliser un style d'interface unifié.
Feuille de style CSSLa plupart du contenu CSS utilisé pour contrôler ces styles de bouton est très intuitif. Une légère différence dans différents navigateurs conduira à l'application de différentes valeurs de rembourrage pour eux dans le code suivant. Heureusement, tout cela est complètement possible.
/ * Boutons * /
.Buttons A,. Buttons Button {
Affichage: bloc;
flottant: à gauche;
marge: 0 7px 0 0;
Color d'arrière-plan: # f5f5f5;
Border: 1px solide #dedede;
Border-top: 1px solide #eee;
Border-Left: 1px solide #eee;
Font-Family: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
taille de police: 100%;
hauteur de ligne: 130%;
Décoration du texte: aucune;
Police-poids: Bold;
Couleur: # 565656;
curseur: pointeur;
rembourrage: 5px 10px 6px 7px; / * Liens * /
}
. Buttons bouton {
Largeur: Auto;
débordement: visible;
rembourrage: 4px 10px 3px 7px; / * Ie6 * /
}
bouton .buttons [type] {
rembourrage: 5px 10px 5px 7px; / * Firefox * /
hauteur de ligne: 17px; / * Safari * /
}
*: Bouton html de premier enfant [type] {
rembourrage: 4px 10px 3px 7px; / * Ie7 * /
}
.
marge: 0 3px -3px 0! IMPORTANT;
rembourrage: 0;
Border: aucun;
Largeur: 16px;
hauteur: 16px;
}
Un autre problème est qu'il y a des bogues dans Internet Explorer lors de l'intention de boutons longs. Vous pouvez trouver ces informations sur Jehiah.cz, mais dans le code CSS ci-dessus, nous éviterons le problème dans une certaine mesure en déclarant les valeurs de largeur et de débordement.
Ajoutez un peu de couleur au boutonDans Wufoo, nous définissons la valeur de survol de l'action neutre (ici, l'auteur appelle le mot de passe de changement et d'autres actions comme une action neutre, le type de confirmation et de soumission comme une action positive, et l'abandon et le type d'annulation comme une action négative) en bleu, et l'action positive et l'action négative sont définies respectivement vertes et rouges. Le code de style suivant utilise différentes couleurs pour distinguer l'ajout, l'enregistrement et l'annulation et la suppression d'un type d'actions négatives. Cela fait du bien, bien sûr, vous pouvez également choisir la couleur que vous aimez utiliser.
/* STANDARD */
Bouton: Hover, .Buttons A: Hover {
Color d'arrière-plan: # dff4ff;
Border: 1px solide # C2E1EF;
Couleur: # 336699;
}
.Buttons A: actif {
Color d'arrière-plan: # 6299C5;
Border: 1px solide # 6299C5;
Couleur: #ffff;
}
/* POSITIF */
Button.Positive, .Buttons A.Positive {
Couleur: # 529214;
}
.Buttons A.Positive: Hover, Button.Positive: Hover {
Color d'arrière-plan: # E6EFC2;
Border: 1px solide # C6D880;
Couleur: # 529214;
}
.Buttons a. positif: actif {
Color d'arrière-plan: # 529214;
Border: 1px solide # 529214;
Couleur: #ffff;
}
/* NÉGATIF */
.Buttons A.Négatif, Button.Négatif {
Couleur: # D12F19;
}
.Buttons A.Négatif: Hover, Button.Négatif: Hover {
Contexte: # FBE3E4;
Border: 1px solide # fbc2c4;
Couleur: # D12F19;
}
.Buttons A.Négatif: actif {
Color d'arrière-plan: # D12F19;
Border: 1px solide # d12f19;
Couleur: #ffff;
}
RésumerEnfin, ce n'est qu'une solution que nous avons conçue pour répondre aux besoins de Wufoo, mais cela a bien fonctionné avec nos efforts. Mais ce n'est pas le seul moyen, vous pouvez trouver des moyens plus intéressants de transformer les boutons en coins arrondis ou encore plus colorés. Étant donné que presque tous les autres éléments peuvent être placés entre les balises <fontières>, vous pouvez également créer un bouton tridimensionnel arrondi vraiment beau en insérant la balise <Span> et en suivant les dernières méthodes fournies par Alex Griffioen. Pour être honnête, j'espère que ce n'est que le début pour tous les concepteurs qui travaillent sur la réutilisation de l'interface du programme. Quoi qu'il en soit, j'espère que vous pourrez y réfléchir plus avant d'ouvrir le bouton d'entrée de Photoshop et de jeter un œil à cette balise <fontière presque oubliée, peut-être que cela vous surprendra.
APPENDICE:élément <button> dans html4.0 / xhmtl1.0
Définition et utilisationDéfinissez un bouton. À l'intérieur de l'élément bouton, vous pouvez placer du contenu, tel que du texte ou des images. C'est la différence entre cet élément et les boutons créés avec l'élément d'entrée.
Le Control <Fut-Button> fournit des fonctionnalités plus puissantes et un contenu plus riche que <entrée type = bouton>. Tous les contenus entre les balises <fontières> et </futton> sont le contenu du bouton, qui comprend tout contenu corporel acceptable, tel que le contenu de texte ou multimédia. Par exemple, nous pouvons inclure une image et un texte connexe dans le bouton et les utiliser pour créer une image de balisage attrayante dans le bouton.
Le seul élément interdit est le mappage d'images, car ses actions sensibles à la souris et au clavier peuvent interférer avec le comportement des boutons de forme.
Propriétés sélectionnables Valeur d'attribut Description DTDDésactivés désactivés désactivés Désactiver ce bouton. STF
NameButton_name Spécifie le nom unique de ce bouton. STF
Tapez * bouton
* Réinitialiser définit le type de bouton. STF
* soumettre
Valeur Some_value Spécifie la valeur initiale du bouton. Cette valeur peut être modifiée par le script. STF
Attributs standard:ID, classe, titre, style, dir, lang, XML: Lang, AccessKey, Tabindex
Propriétés de l'événement:Onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup