Ich muss eine einfache Schaltfläche erstellen, die nur aus einem Bild besteht und die ein JQuery-Dialogfeld öffnet, wenn der Benutzer darauf klickt.
Ich tue etwas zu lesen und feststellen, viele Lösungen: <button> , <image> mit einer <a> , CSS mit Hilfe einer Schaltfläche Hintergrund ändern, etc ...
Das ist verwirrend, wie kann ich meine Bildschaltfläche richtig implementieren?
Danke.
S. S.: Die Schaltfläche / das Bild sollte fokussierbar sein. Ein funktionierendes JSFiddle-Beispiel ist willkommen.
Der richtige Weg hängt weitgehend davon ab, was die Schaltfläche tun wird, wenn JavaScript nicht verfügbar ist.
Wenn Sie ein Formular abschicken, dann:
%Vor%Wenn du zu einer URL gehst, dann:
%Vor%Wenn Sie absolut nichts tun (im Allgemeinen keine gute Idee, sollten Sie die Prinzipien von Progressive Enhancement befolgen und Unaufdringliches JavaScript , aber akzeptabel, wenn Sie die Schaltfläche nur mit JavaScript generieren und der Verlust für den Benutzer bequem ist eher dann wesentliche Funktionalität):
%Vor%Sie binden das JavaScript dann entweder an das Sendeereignis des Formulars oder an das click-Ereignis der Schaltfläche / des Ankers und an prevent das Standardverhalten , damit das Formular nicht gesendet wird / der Link wird nicht ausgeführt, wenn das JavaScript erfolgreich ausgeführt wird.
Es hängt davon ab, was Sie in jedem Fall tun wollen. Es gibt keine Richtlinie, die sagt "Du solltest es so machen", aber es gibt Situationen, in denen einige Fälle besser geeignet sind als andere.
Nach dieser Überprüfung zum Beispiel haben IE-Versionen von 8 und darunter ein fehlerhaftes Verhalten bezüglich <button> Tag, wenn Sie versuchen, es als Senden-Schaltfläche zu verwenden.
Das <button> hat jedoch einige neue Attribute in HTML5 hinzugefügt, die Sie hier sehen können autofocus und andere nützliche, die von den meisten modernen Hauptbrowsern unterstützt werden.
In Ihrem Fall, dass Sie den "Fokus" beibehalten möchten (ich gehe davon aus, dass Tab-Unterstützung besteht), wenn Sie eine einzelne <image> als Schaltfläche verwenden (mit oder ohne <a> ), müssen Sie einige JS hinzufügen Code, um das Bild fokussierbar zu machen, wenn die entsprechende Registerkarte gedrückt wird. Sie müssen also etwas mehr Code schreiben, um das Gleiche zu tun.
Es gibt eine weitere Lösung, die für Sie geeignet sein könnte, da Sie das Formular nicht an die Serverseite senden müssen. Die Verwendung des Typs <input type="image" und das Definieren des Attributs src innerhalb dieses Objekts ist fokussierbar und erfordert weder die Ausführung eines JS-Codes noch eines schwierigen CSS. Sie können mehr über die Syntax hier
Also, es liegt an Ihnen zu entscheiden, welche von allen zu verwenden. Ich würde den verwenden, den ich flexibler finde, den ich einfacher programmieren kann, der leicht wiederverwendbar ist und von den meisten meiner Zielbrowser unterstützt wird.
Wie ich weiß Sie können das Aussehen der Safari-Buttons nicht ändern, deshalb empfehle ich, a für die Lösung zu verwenden. Hier ist mein einfacher Code: Ссылка
Die Basis ist:
Nimm ein a -Element, setze den Link-Inhalt nach links,
Ersetzen Sie es dann durch ein Bild, das tatsächlich der Hintergrund ist. Da es a element ist, kann der Benutzer es nur über die Schaltfläche TAB auswählen.
Wenn Sie a elemet verwenden, können Sie title eingeben, das nach dem Schweben / Eingeben über die Schaltfläche angezeigt wird.
Tags und Links javascript html image button