Für jeden Programmierer ist es eine unveränderliche Anforderung, Benutzern eine einheitliche Stiloberfläche zu bieten. Es ist jedoch besonders schwierig, diese Stileinigung auf Webseiten zu erreichen, da es Unterschiede in der Art und Weise gibt, wie unterschiedliche Betriebssysteme und Browser aus dem Webseiteninhalt ausdrücken, und dieser Unterschied ist nahezu unregelmäßig. Dieses Problem ist im Prozess der Verarbeitungsformelemente besonders herausragend. Was viele Menschen hilflos macht, ist das Problem der einheitlichen Leistungsstandards der Einreichungsschaltflächen.
Zum Beispiel sieht das Eingabe -Tag mit Type = Submit Attribut in verschiedenen Browsern (in Firefox) entweder sehr hässlich aus oder hat eine Art Fehler (im Internet -Explorer) oder wirkt sogar sehr starr (in Safari). Die Lösung für dieses Problem besteht in der Regel darin, die Eingabemission auf das Bild einzustellen und dann ein Schaltflächenbild selbst zu entwerfen. Aber wir müssen jedes Mal, wenn wir die Tasten verwenden müssen, eine Menge zusätzlicher nerviger Arbeit hinzufügen. Daher brauchen wir eine bessere Lösung, einen flexibleren und aussagekräftigeren Ansatz für Designer. Glücklicherweise existiert diese Methode bereits in der Realität, und wir müssen ein wenig mehr Arbeit leisten. Freunde, bitte erlauben Sie uns, Ihnen unseren süßen kleinen Freund, Klassenkameraden <Button> vorzustellen!
Eingabe -VS -Taste
Hier ist die Einsendetaste, die Sie verwenden:
<Eingabe type = Senden Wert = Senden />
Ihre Leistungsstile in verschiedenen Browsern sind wie folgt:
Und wenn wir <button> verwenden, um die Schaltfläche wie oben zu erstellen:
<Schaltfläche Typ = Senden> Senden </button>
Sie werden im folgenden Stil ausgedrückt:
Diese Schaltflächen unterscheiden sich nicht von den Schaltflächen, die wir oben in ihrem Auslauf- und Präsentationsverhalten erstellt haben. Zusätzlich zur Verwendung des Formulars können Sie nicht mehr verfügbar sein, Abkürzungen hinzufügen oder einen Tabindex usw. festlegen. Zum Glück fehlt Safari diese Funktionen. Die coolste Funktion des <tastetags> -Tag ist, dass wir einige nützliche HTML -Elemente darin platzieren können, z. B. das Hinzufügen von Bildern mit dem folgenden Code:
<Schaltfläche Typ = Senden> <img Src = Alt = /> Senden < /button>
Ihr Aussehen im Browser ist wie folgt:
Nicht schlecht. Tatsächlich entstand nach der Definition von W3C das Element <Stasten>, um diese Leistungsunterschiede zu lösen.
Die mit der Schaltflächenelement erstellten Schaltflächen wie Schaltflächen, die mit dem Eingangselement erstellt wurden, bieten jedoch reichhaltigere Rendering -Möglichkeiten: Das Taste -Element kann Inhalte haben. Zum Beispiel ein Tasteelement, das eine Bildfunktion enthält, wie ein Eingabelement, dessen Typ auf das Bild eingestellt ist. Der Schaltflächenelementtyp ermöglicht jedoch Inhalt.
Das Taste Element - W3C
Daher müssen wir dafür eine Designlösung finden, und zum Glück kann das Internet mit massiven Daten nützliche Hilfe zur Lösung dieses Problems bieten. Dies ist in der Tat sehr bequem, aber leider kennen Designer und Website -Entwickler die Existenz dieses Elements nicht einmal. Bevor ich mich entschied, WUFOO durch das Button -Element (ein Netzwerkprodukt dieses Artikels, Dudo Note) zu ersetzen, muss ich sicher sein, dass dieses Tag und CSS die folgenden Anforderungen erfüllen können:
Anforderungen:
1. Sie müssen das Aussehen von Knöpfen haben
2. In verschiedenen Browsern gibt es die gleichen Ausdrucksstile
3..
4.. Das Tag kann unter verschiedenen Umständen flexibel und leicht zu ändern sein
5. Für Ereignisse, die während der Informationsübertragung auftreten, können Sie sie effektiv durch Ikonen und Farben unterscheiden.
Angesichts der oben genannten Probleme schrieb ich zuerst einige CSS und löste dann das Cross-Browser-Problem. Als nächstes werden wir sehen:
EndergebnisEs gibt nichts zu tun, es ist sehr einfach, aber es ist sehr effektiv. Der Grund, warum ich diese Methode gerne verwende und die Schaltflächen handhaben, ist, dass ich die Photoshop -Erstellung nicht nacheinander starten muss, um 10.000 Symbole zu erstellen. Wenn wir uns den Code sorgfältig ansehen, werden Sie feststellen, dass die beiden Buttons dahinter tatsächlich zwei Links sind.
<div class = buttons>
<Schaltfläche Typ = Sendenklasse = positiv>
<img Src =/Images/icons/tick.png Alt =/>
Speichern
</button>
<a href =/password/reset/
<img Src =/Images/icons/textfield_key.png Alt =/>
Kennwort ändern
</a>
<a href =# class = negativ>
<img Src =/Images/icons/cross.png Alt =/>
Stornieren
</a>
</div>
Dies ist darauf zurückzuführen, dass viele Aktionen in Webanwendungen Ereignisse (REST) gestaltet sind. Daher kann das Senden von Benutzeranforderungen über eine bestimmte URL diese Aktionen initialisieren. Durch die Verwendung von Stilen, die auf beiden Elementen angewendet werden können, wird unsere Style -Vereinigung bei der Aufrechterhaltung der durch AJAX- und Standard -Einreichungs -Schaltflächen verursachten Interaktionen flexibler.
Jetzt könnten Sie fragen, warum ich das Alt -Attribut des Bildelements leer lasse? ALT ist ein notwendiges Attribut des IMG -Elements. Es wird verwendet, um den Inhalt des Bildes zu erklären, aber es gibt hier keine relevante Beschreibung des Bildes, was in der Tat etwas verwirrend ist. Im Gegensatz zu fehlenden Attributen steht der leere Attributwert jedoch vollständig mit dem Standard überein. Er teilte dem Browser mit, dass diese Bilder einige völlig vernachlässigbare Informationen darstellen, was auch verhindert, dass der Browser die nächste Schaltfläche nicht finden kann, da die Eingabeaufforderung über die Eingabeaufforderung übernommen werden kann. Da die Symbole hier vollständig überflüssig sind, würden wir lieber nicht Zeit für die Ansicht dieses Symbols von Abwängeln, das ausschließlich verwendet wird, um einen einheitlichen Schnittstellenstil zu erreichen.
CSS StylesheetDie meisten CSS -Inhalte, die zur Steuerung dieser Tastenstile verwendet werden, sind sehr intuitiv. Ein geringfügiger Unterschied in verschiedenen Browsern führt zur Anwendung verschiedener Polsterwerte für sie im folgenden Code. Glücklicherweise ist all dies völlig möglich.
/ * Buttons */
.buttons a, .buttons button {
Anzeige: Block;
float: links;
Rand: 0 7px 0 0;
Hintergrundfarbe:#f5f5f5;
Grenze: 1PX Solid #dedede;
Border-Top: 1PX Solid #eee;
Border-Links: 1PX Solid #eee;
Schriftfamilie: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
Schriftgröße: 100%;
Linienhöhe: 130%;
Textdekoration: Keine;
Schriftgewicht: fett;
Farbe:#565656;
Cursor: Zeiger;
Polsterung: 5px 10px 6px 7px; / * Links */
}
.buttons button {
Breite: Auto;
Überlauf: sichtbar;
Polsterung: 4px 10px 3px 7px; / * Ie6 */
}
.buttons Schaltfläche [Typ] {
Polsterung: 5px 10px 5px 7px; / * Firefox */
Zeilenhöhe: 17px; / * Safari */
}
*: Erstkind-HTML-Taste [Typ] {
Polsterung: 4px 10px 3px 7px; / * Ie7 */
}
.buttons button img, .buttons a img {
Rand: 0 3px -3px 0! Wichtig;
Polsterung: 0;
Grenze: Keine;
Breite: 16px;
Höhe: 16px;
}
Ein weiteres Problem ist, dass es im Internet Explorer einige Fehler gibt, wenn sie lange Schaltflächen rendern. Sie finden diese Informationen zu Jehiah.cz, aber im obigen CSS -Code werden wir das Problem bis zu einem gewissen Grad vermeiden, indem wir die Werte von Breite und Überlauf deklarieren.
Fügen Sie der Taste ein wenig Farbe hinzuIn Wufoo setzen wir den Schwebewert der neutralen Aktion (hier ruft der Autor das Änderungskennwort und andere Aktionen als neutrale Aktion, den Bestätigungs- und Einreichungstyp als positive Aktion sowie die Abgabe- und Stornierungstyp als negative Aktion) auf Blau und die positive Aktion und die negative Aktion auf grün und rot fest. Der folgende Stilcode verwendet verschiedene Farben, um zwischen Hinzufügen, Speichern und Abbrechen und Löschen einer Art negative Aktionen zu unterscheiden. Es fühlt sich ziemlich gut an, natürlich können Sie auch die Farbe auswählen, die Sie gerne verwenden.
/ * Standard */
Taste: Hover, .buttons a: hover {
Hintergrundfarbe:#dff4ff;
Rand: 1PX Solid #C2E1EF;
Farbe:#336699;
}
.buttons a: aktiv {
Hintergrundfarbe:#6299c5;
Grenze: 1PX Solid #6299c5;
Farbe: #ffff;
}
/ * Positiv */
button.positiv, .buttons a.positiv {
Farbe:#529214;
}
.buttons a.positiv: schwebe, button.positiv: hover {
Hintergrundfarbe:#e6efc2;
Grenze: 1PX Solid #C6D880;
Farbe:#529214;
}
.buttons a.positiv: aktiv {
Hintergrundfarbe:#529214;
Grenze: 1PX Solid #529214;
Farbe: #ffff;
}
/ * Negativ */
.buttons A.Negative, button.negative {
Farbe:#D12F19;
}
.Buttons A.Negative: Hover, Button.negative: Hover {
Hintergrund:#fbe3e4;
Rand: 1PX Solid #FBC2C4;
Farbe:#D12F19;
}
.Buttons A.Negative: Active {
Hintergrundfarbe:#D12F19;
Rand: 1PX Solid #D12F19;
Farbe: #ffff;
}
ZusammenfassenSchließlich ist dies nur eine Lösung, die wir mit den Bedürfnissen in Wufoo entworfen haben, aber es hat sich gut mit unseren Bemühungen entwickelt. Aber das ist nicht der einzige Weg, Sie können interessantere Möglichkeiten finden, um Knöpfe in abgerundete Ecken oder noch farbenfroser umzuwandeln. Da fast jedes andere Element zwischen den <button> -Tags platziert werden kann, können Sie auch eine wirklich gut aussehende, abgerundete dreidimensionale Taste erstellen, indem Sie das <Pan> -T-Tag einfügen und die neuesten Methoden von Alex Griffioen befolgen. Um ehrlich zu sein, hoffe ich, dass dies nur der Anfang für alle Designer ist, die an der Wiederverwendung der Benutzeroberfläche des Programms arbeiten. Wie auch immer, ich hoffe, Sie können mehr darüber nachdenken, bevor Sie den Eingabetaste von Photoshop öffnen und sich dieses fast vergessene <button> -Tag ansehen, vielleicht überrascht es Sie.
Anhang:<taste> Element in html4.0/xhmtl1.0
Definition und VerwendungDefinieren Sie einen Knopf. Im Schaltflächenelement können Sie Inhalte wie Text oder Bilder platzieren. Dies ist der Unterschied zwischen diesem Element und den mit dem Eingabeelement erstellten Schaltflächen.
Die <taststeuerung <taste> bietet leistungsstärkere Funktionen und reichhaltigere Inhalte als <Eingabetyp = Taste>. Alle Inhalte zwischen der <button> und </button> tags sind der Inhalt der Schaltfläche, die den akzeptablen Körperinhalt wie Text oder Multimedia -Inhalt enthält. Zum Beispiel können wir ein Bild und einen verwandten Text in die Schaltfläche aufnehmen und in der Schaltfläche ein attraktives Markup -Bild erstellen.
Das einzige Element, das verboten ist, ist die Bildzuordnung, da seine Maus- und Tastaturempfindungsaktionen das Verhalten von Formschaltflächen beeinträchtigen können.
Wählbare Eigenschaften Attributwertbeschreibung DTDDeaktivierte deaktivierte deaktivierte deaktivierte deaktivierte Deaktivierte diese Schaltfläche. Stf
nameButton_name gibt den eindeutigen Namen dieser Schaltfläche an. Stf
Geben Sie* Taste ein
* Reset Definiert die Tastentyp. Stf
* einreichen
Wert SOLE_VALUE gibt den Anfangswert der Taste an. Dieser Wert kann durch das Skript geändert werden. Stf
Standardattribute:ID, Klasse, Titel, Stil, Dir, Lang, XML: Lang, AccessKey, Tabindex
Ereigniseigenschaften:Onfocus, Onblur, Onclick, Ondblcick, Onmousedown, OnmouseUp, Onmouseover, Onmousemove, Onmouseout, Onkeypress, Onkeydown, OnkeyUp