Есть ли поддержка CSS спрайтов в jQuery UI

Question

Я изучаю использование спрайтов CSS, но не хотел бы изобретать колесо. Есть ли поддержка в jQuery или jQuery UI? Или, в качестве альтернативы, хорошо отлаженный плагин jQuery

Answer 1

Использование спрайтов зависит от величины смещения той части позиции, которую вы хотите - javascript не может получить доступ к данным изображения, так как бы это могло быть?

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

http://csssprites.com/

Answer 2

Есть несколько хороших демонстрационных примеров jquery-инструментов , которые вы можете скопировать, а затем изменить.У них есть хорошие практики.Я бы начал с демонстрации tab * , их таблица стилей написана хорошо.

@ Mark: В демонстрационной вкладке используется одно изображение

Answer 3

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

Возможный способ использования спрайтов с jQuery - создать отдельныйclass для каждого состояния спрайта, а затем используйте 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; }

Answer 4

Почему бы не сделать все это в 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 /