Има ли поддръжка на CSS спрайтове в jQuery UI

Използването на спрайтове зависи от размера на отместването на частта от позицията, която искате - javascript няма достъп до данни за изображение, така че как би имало такова нещо?

Въпреки това има някои инструменти, които да ви помогнат да направите спрайтове и да ви предоставят основния CSS. Ето моя любим:

http://csssprites.com/

Има някои добри демонстрации на jquery-tool, които можете да копирате и след това да променяте. Имат добри практики. Бих започнал с демонстрацията на tab anchor, тяхната stylesheet е добре написан.

@Mark: Демонстрацията на разделите използва едно изображение

В зависимост от конкретните задачи, които искате да изпълните, които не сте посочили в OP, може изобщо да не се нуждаете от приставка.

Възможен начин за използване на спрайтове с jQuery е да създадете отделен клас за всяко състояние на спрайт и след това да използвате jQuery, за да промените атрибута на класа на елемента, показващ спрайта с .attr():

  // Change the sprite state of an element
$(elementSelector).attr("class", spriteClassOfChoie);

Ето например супер проста галерия с изображения, използваща спрайтове и jQuery:

пример за jsFiddle

Скрипт:

$(function() {

      // The sprite classes
    var sprites = ["home", "next", "prev"];

      // Which image is showing
    var showing = 0;

      // Show the first image
    $("#gallery").addClass(sprites[showing]);

      // Add a click handler to change sprite states
    $("input").click(function() { 

          // Cycle through images by making use of sprites
        $("#gallery").attr("class", sprites[(++showing % sprites.length)]);
    });
});​

HTML:

<input type="button" value="Show Next Image" />
<br/><br/>
<div id="gallery"></div>

CSS:

.home {
width:46px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') -91px 0; }

Защо не направите всичко в CSS? а ла:

btn
{
width:50px;
height:50px;
background:url(images/btnspite.png) -30px 100px;
}
btn:hover
{
background-position:-30px -150px;
}
btn:active
{
background-position:-30px -200px;
}

Това ще ви помогне да започнете реалното му внедряване: http://css-tricks.com/css-sprites/