Grafisches Tutorial zur Gestaltung von Knöpfen mit Schiebetürtechnik_Erfahrungsaustausch

Dieser Artikel ist ein übersetzter Artikel, Volltextadresse: http://diger.cn/article.asp?id=351
Ursprüngliche Adresse: http://www. filamentgroup.com /lab/buttonElement/

Particle Tree hat kürzlich einen Artikel veröffentlicht, in dem eine Technik beschrieben wird, die sie zum Entwerfen von Schaltflächenelementen entwickelt haben. Für diejenigen unter Ihnen, die keine Ahnung haben: Tabellenschaltflächen lässt sich nur schwer anpassen. Typische Lösungen sind die Verwendung der vom Browser bereitgestellten Standardschaltflächen oder die Verwendung einer grafischen Eingabe. Wenn die Grafikeingabe das gewünschte Ergebnis erzielt, fordert sie die Erstellung einer neuen Grafik für jede Schaltfläche mit dem Text „Eingebacken“ an (keine Erwähnung, ihn mit Hovern auszutauschen).

Obwohl die Technologie von Particle Tree eine zuverlässige Lösung bietet, kann sie unsere Anforderungen nicht erfüllen. Wir benötigen eine Schaltfläche mit Schiebetürtechnologie, einen echten HTML-Text, der kein JavaScript zum Scrollen oder Absenden eines Formulars erfordert. Wenn diese Bedingungen erfüllt sind, werden Eingabe- und Ankerelemente ausgeschlossen. Offensichtlich ist das Knopfelement unsere einzige Wahl. Die folgende Technik demonstriert eine browserübergreifende Tastentechnik unter Verwendung der Schiebetürtechnologie.


Demo ansehen 🎜>
CSS:
Der Programmcode lautet wie folgt:

CSS für IE6 und IE7 (manchmal erforderlich)

<button value="submit" class="submitBtn"><span>Submit</span></button>

Der Code lautet wie folgt:

Wie Sie sehen können, werden für jeden Zustand 2 Bilder verwendet (Insgesamt 4 Bilder). Vereinfacht lässt sich sagen, dass diese Zustände in zwei umgewandelt werden können. Doch erste Tests der Idee ergaben inkonsistente Ergebnisse. Browserunterstützung:

IE6, IE7, Firefox (Mac/PC), Safari, Opera, Camino usw.

button {   
  border:0;   
  cursor:pointer;   
  font-weight:bold;   
  padding:0 20px 0 0;   
  text-align:center;   
}  
button span {   
  position:relative;   
  display:block;   
  white-space:nowrap;   
  padding:0 0 0 20px;   
}  
/*blue buttons*/  
button.submitBtn {   
  background:url(images/btn_blue_right.gif) right no-repeat;   
  font-size:1.3em;   
}  
button.submitBtn span {   
  height:50px;   
  line-height:50px;  
  background:url(images/btn_blue_left.gif) left no-repeat;  
  color:#fff;   
}  
button.submitBtn:hover {  
    background:url(images/btn_blue_right_hover.gif) right no-repeat;   
}  
button.submitBtn:hover span {  
    background:url(images/btn_blue_left_hover.gif) left no-repeat;   
}

Warnung: Damit Hover in IE6 funktioniert, müssen Sie einen Klassentrigger schreiben. Allerdings ist es nicht so schlimm wie das Tauschen von Bildern.
Das Obige ist das grafische Tutorial zum Entwerfen von Schaltflächen mithilfe der Schiebetürtechnologie. Der Inhalt des Erfahrungsaustauschs. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

button {   
  width:auto;   
  overflow:visible;   
}  
button span {   
  margin-top:1px;   
}