¿Cómo agrego un icono personalizado a un tema jQuery UI estándar?

Question

Es fácil de usar uno de los iconos disponibles en el conjunto de iconos estándar:

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

Pero lo que si quiero agregar uno de mis propios iconos que no forma parte del conjunto de iconos marco?

pensé que sería tan fácil como lo que le da su propia clase CSS con una imagen de fondo, pero eso no funciona:

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

¿Alguna sugerencia?

Answer 1

También podría recomendar:

.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; 
} 

continuación, sólo tiene que escribir el código JS:

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

Se trabajó para mí y espero que funcione para usted ¡también!

Answer 2

Creo que la razón por la que no funcionará es porque su icono background-image está siendo anulado por la imagen de fondo del icono de sprite de jQuery UI. El estilo en cuestión es:

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

Esto tiene mayor especificidad que el selector de .fw-button-edit, anulando así el proerty Imagen de fondo. Dado que utilizan sprites, el conjunto de reglas .ui-icon-locked solo contiene el background-position necesario para obtener la posición de la imagen del sprite. Creo que usar esto funcionaría:

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

O algo más con suficiente especificidad. Para saber más acerca de la especificidad de CSS aquí: http://reference.sitepoint.com/css/specificity

Answer 3

Esto se basa en la información proporcionada por Yi Jiang y Panayiotis anteriormente, y el jquery ui button sample code:

Como estaba migrando una solicitud anterior JSP que tenía una barra de herramientas con imágenes por botón, que quería tener la imagen en el interior la declaración del botón en sí misma en lugar de crear una clase separada para cada botón de la barra de herramientas.

<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> 

Por supuesto, había muchos más botones que solo los dos anteriores. La etiqueta s anterior es una etiqueta struts2, pero sólo podía reemplazarlo con cualquier URL

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

El siguiente script busca el atributo de datos-img de la etiqueta de botón, y luego establece que a medida que la imagen de fondo para el botón.

Establece temporalmente ui-icon-bullet (cualquier estilo existente arbitrario) que luego se cambia posteriormente.

Esta clase define el estilo temporal (es mejor agregar otros selectores para la barra de herramientas específica si planea usar esto, para que el resto de su página no se vea afectado).La imagen real será sustituido por el siguiente Javascript:

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

y la siguiente 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'); 
      }); 
    }); 

Answer 4

Mi solución para agregar iconos personalizados a jQuery UI (usando sprites):

CSS:

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

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

.icon-example define la posición del icono en el archivo de iconos personalizados. .ui-icon.custom define el archivo con iconos personalizados.

Nota: Es posible que deba definir otras clases de UQ de JQuery (como .ui-state-hover) también.

JavaScript:

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

Answer 5

Basándose en respuesta msanjay me extendió esta trabajando para los iconos personalizados para los dos botones jQuery UI y botones de radio, así:

<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'); 
     } 
    }); 
} 

Answer 6

// 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 } }); 

Answer 7

La solución en este enlace funcionó muy bien para mí: 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(); 
});​ 

Answer 8

en 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; 
} 

en HTML

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

en JavaScript

$("selector").button({ 
    icons: { primary: "custom-class" } 
});