Я изучаю использование спрайтов CSS, но не хотел бы изобретать велосипед. Существует ли поддержка в jQuery или пользовательском интерфейсе jQuery? Или, как вариант, хорошо отлаженный плагин jQuery.
Есть ли поддержка спрайтов CSS в пользовательском интерфейсе jQuery?
Ответы (4)
Использование спрайтов зависит от величины смещения той части позиции, которую вы хотите - javascript не может получить доступ к данным изображения, так как же может быть такая вещь?
Однако есть несколько инструментов, которые помогут вам создавать спрайты и предоставить вам базовый CSS. Вот мой любимый:
Есть несколько хороших демонстраций jquery-tool, которые вы можете скопировать, а затем изменить. У них хорошие практики. Я бы начал с демонстрации привязки вкладок, их таблица стилей написана хорошо.
@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/
ctr-k
, чтобы сделать это быстро.
- person Peter Ajtai; 17.09.2010