it-swarm.com.de

Wie füge ich einem standardmäßigen jQuery-UI-Design ein eigenes Symbol hinzu

Es ist einfach, eines der Symbole zu verwenden, die im Standardsymbolsatz verfügbar sind:

$("#myButton").button({icons: {primary: "ui-icon-locked"}});

Was aber, wenn ich eines meiner eigenen Symbole hinzufügen möchte, das nicht Teil des Rahmensymbolsatzes ist?

Ich dachte, es wäre so einfach wie eine eigene CSS-Klasse mit einem Hintergrundbild, aber das funktioniert nicht:

.fw-button-edit {
    background-image: url(edit.png);
}

Irgendwelche Vorschläge?

43
Brett

Ich könnte auch empfehlen:

.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

geben Sie dann einfach den JS-Code ein:

        jQuery('selector-to-your-button').button({
        text: false,
        icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

Es hat für mich funktioniert und ich hoffe, es funktioniert auch für Sie!

62
Panayiotis

Ich glaube, der Grund, warum er nicht funktioniert, liegt darin, dass die background-image -Eigenschaft des Symbols vom jQuery UI-Standard-Hintergrundbild des Sprite-Symbols überschrieben wird. Der fragliche Stil ist: 

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}

Dies hat eine höhere Spezifität als Ihr .fw-button-edit-Selektor, wodurch die Hintergrundbild-Eigenschaft überschrieben wird. Da sie Sprites verwenden, enthält der Regelsatz .ui-icon-locked nur den background-position, der zum Abrufen der Position des Sprite-Bildes erforderlich ist. Ich glaube, dass dies funktionieren würde: 

.ui-button .ui-icon.fw-button-edit {
    background-image: url(edit.png);
}

Oder etwas anderes mit ausreichender Spezifität. Weitere Informationen zur CSS-Spezifität finden Sie hier: http://reference.sitepoint.com/css/specificity

14
Yi Jiang

Dies basiert auf den oben von Yi Jiang und Panayiotis bereitgestellten Informationen und dem Beispielcode der jquery ui-Schaltfläche :

Bei der Migration einer früheren JSP-Anwendung, die über eine Symbolleiste mit Bildern pro Schaltfläche verfügte, wollte ich, dass das Bild in der Deklaration der Schaltfläche enthalten war, anstatt für jede Symbolleistenschaltfläche eine eigene Klasse zu erstellen.

<div id="toolbarDocs" class="tableCaptionBox">
    <strong>Checked Item Actions: </strong>

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>

Natürlich gab es viel mehr Knöpfe als nur die beiden oben. Das s-Tag oben ist ein struts2-Tag. Sie können es jedoch auch durch eine beliebige URL ersetzen

        <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>

Das folgende Skript sucht nach dem Attribut data-img anhand des Schaltflächen-Tags und legt es dann als Hintergrundbild für die Schaltfläche fest. 

Es setzt vorübergehend das ui-icon-bullet (jeden beliebigen vorhandenen Stil), das später geändert wird.

Diese Klasse definiert den temporären Stil (es empfiehlt sich, weitere Selektoren für die jeweilige Symbolleiste hinzuzufügen, wenn Sie diese verwenden möchten, sodass der Rest Ihrer Seite nicht betroffen ist). Das tatsächliche Bild wird durch das folgende Javascript ersetzt:

button.ui-button .ui-icon {
    background-image: url(blank.png);
    width: 0;
    height: 0; 
}

und das folgende Javascript:

 $(document).ready(function () {
    $("#toolbarDocs button").each(
          function() { 
            $(this).button(
              { text: $(this).attr('data-img').length === 0? true: false, // display label for no image
               icons: { primary: "ui-icon-bullet"  }
              }).css('background-image', "url(" + $(this).attr('data-img') +")")
               .css('background-repeat', 'no-repeat');
            });
  });
3
msanjay

Die Lösung unter diesem Link hat für mich gut funktioniert: http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

$(document).ready(function() {
    $("#btnClose")
    .text("")
    .append("<img height="100" src="logo.png" width="100" />")
    .button();
});​
2
Amber

Aufbauend auf der msanjay-Antwort habe ich diese Funktion erweitert, um für benutzerdefinierte Icons sowohl für die Jquery-Ui-Schaltflächen als auch für die Radioknöpfe zu funktionieren:

<div id="toolbar">
    <button id="btn1" data-img="/images/bla1.png">X</button>
    <span id="radioBtns">
      <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
      <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
    </span>
</div>    

$('#btn1').button();
$('#radioBtns').buttonset();

loadIconsOnButtons('toolbar');

function loadIconsOnButtons(divName) {
    $("#" + divName + " input,#" + divName + "  button").each(function() {
      var iconUrl = $(this).attr('data-img');
      if (iconUrl) {
        $(this).button({
          text: false,
          icons: {
            primary: "ui-icon-blank"
          }
        });
        var imageElem, htmlType = $(this).prop('tagName');
        if (htmlType==='BUTTON') imageElem=$(this);
        if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
        if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
      }
    });
}
0
kofifus

in css

.ui-button .ui-icon.custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

in HTML

<button type="button" class="ui-button ui-widget ui-corner-all">
    <span class="custom-class"></span> CAPTION TEXT
</button>

in JavaScript

$("selector").button({
    icons: { primary: "custom-class" }
});
0
Wagne Medrado
// HTML

<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
      <input type="radio" id="Apple" name="radioSet"  value="1"><label for="Apple">Apple</label>
      <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>


// JQUERY

// Function to remove the old default Jquery UI Span and add our custom image tag

    function AddIconToJQueryUIButton(controlForId)
    {
        $("label[for='"+ controlForId + "'] > span:first").remove();
        $("label[for='"+ controlForId + "']")
        .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");

    }

// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place

   // Set icons on buttons. pass ids of radio buttons
   $(document).ready(function () {
                 AddIconToJQueryUIButton('Apple');   
                 AddIconToJQueryUIButton('mango');   
    });

   // call Jquery UI api to set the default icon and later you can change it        
    $( "#Apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
    $( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
0
Vin

Meine Lösung zum Hinzufügen benutzerdefinierter Symbole zur JQuery-Benutzeroberfläche (mithilfe von Sprites):

CSS:

.icon-example {
    background-position: 0 0;
}

.ui-state-default .ui-icon.custom {
    background-image: url(icons.png);
}

.icon-example definiert die Position des Symbols in der Datei mit benutzerdefinierten Symbolen. .ui-icon.custom definiert die Datei mit benutzerdefinierten Symbolen.

Hinweis: Möglicherweise müssen Sie auch andere JQuery-UI-Klassen (wie .ui-state-hover) definieren.

JavaScript:

$("selector").button({
    icons: { primary: "custom icon-example" }
});
0
Hubo