it-swarm.com.de

Ändern Sie das Symbol einer jQuery-UI-Schaltfläche mit einem eigenen Bild

Derzeit habe ich die folgende Schaltfläche für die jQuery-Benutzeroberfläche:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

Ich möchte ein eigenes Bild für die Schaltfläche "custom.png" verwenden.

Wie kann ich das erreichen?

24
Ivelin Nikolaev

Definieren Sie einen Stil wie folgt:

.ui-icon-custom { background-image: url(images/custom.png); }

Dann benutze es einfach beim Aufruf von .button(), wie folgt:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

Dies setzt voraus, dass sich Ihr benutzerdefiniertes Symbol im Bilderordner unter Ihrem CSS befindet. Dies ist der Ort, an dem sich die jQuery-UI-Symbolzuordnung normalerweise befindet. Wenn das Symbol erstellt wurde, erhält es eine Klasse wie folgt: class="ui-icon ui-icon-custom", und diese ui-icon-Klasse sieht folgendermaßen aus (möglicherweise ein anderes Bild, je nach Thema):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

In Ihrem Stil überschreiben Sie also einfach background-image, ändern Sie bei Bedarf die Breite, Höhe usw.

32
Nick Craver

Sehen Sie sich Nick Cravers Kommentar an. Ich habe es genau so ausprobiert, aber es hat mir trotzdem nicht geholfen. Das Problem (ich gehe davon aus) war, dass sich die Klasse ui-icon-custom am Ende der Klassenliste befand und sie nicht mit dem ursprünglichen Hintergrundbild der Klasse ui-icon überschrieben wurde.

Was ich getan habe, um es zum Laufen zu bringen, war wie folgt: wichtig am Ende des Symbols css

.ui-icon-custom { background-image: url(images/custom.png) !important; }

Möglicherweise müssen Sie die Eigenschaften für Höhe und Breite ändern, dies hat jedoch für mich funktioniert. 

34
Jim Gilmartin

Vielleicht fehlt mir etwas im OP, aber das funktioniert für mich ohne viel Problem. Sie können die Schaltfläche als DIV definieren und eine Tabelle darin einfügen. Kein Überschreiben von css und Sie können immer noch die von Jquery definierten Symbole und Ihr eigenes Symbol mit benutzerdefinierten Größen verwenden. Sie können das Symbol auch an beliebiger Stelle im Text platzieren (oben, links, rechts usw.).

$(document).ready(function()
{
    $('#btn').button();
});

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>
5
tschlarm

Wenn nur ein Bild auf der Schaltfläche angezeigt werden soll, ohne Beschriftung oder Text, mache ich Folgendes:

$('#button').button();

um dieses Bildelement zu ersetzen, um eine Schaltfläche zu werden:

<img src="images/custom.png" width="28" height="28" id="button">

Wenn Sie jedoch lieber mit Beschriftung oder Text folgen, ist die obige Erklärung besser.

1
PutihTua

durchsuchen Sie die Datei jquery ui css nach der Klasse ui-icon-circle-plus und kopieren Sie sie für Ihr eigenes Bild.

1
Paul Creasey

Überprüfen Sie diesen Link:

http://www.andymatthews.net/read/2011/02/13/Erstellen-und-nutzen-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}
<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

In "data-icon" geben Sie einfach das ein, was Sie möchten, und Jquery erstellt die Klasse für Sie.

0
jftremblay