Включите все классы CSS-спрайтов на странице

Я сделал набор значков FamFamFam Silk в спрайт, и я хочу отображать все значки на странице HTML. Проблема в том, что 1000 значков разделены на 2 изображения .png, каждое изображение со своим классом. Например, первый значок будет class="silk1 ad-accept", а последний значок, который находится во втором изображении .png, будет class="silk2 ad-zoom-in". Во всяком случае, было бы безумным попытаться сделать все это вручную, не говоря уже о потраченном времени и возможных ошибках.Включите все классы CSS-спрайтов на странице

Мой вопрос: может ли это быть сделано автоматически с помощью jQuery? В принципе, мне нужен скрипт, который возьмет каждый класс спрайтов CSS и применит его к элементу типа li. Было бы очень полезно, если бы он также применил заголовок с классом, который он использовал, поэтому я знаю, какой значок есть.

источник

2012-02-19 Alex N

Не могли бы вы перечитываю вас вопрос, исправить опечатки и сделать его более ясным. «Например, первый значок будет ???, а последний значок ???, который находится во втором .png изображении, будет ???». –

Если у вас есть имена классов в формате, который вы можете прочитать/разбор (т. Е. Текст с разделителями-запятыми, массив в формате JSON и т. Д.), Таким образом, чтобы они были связаны с 'silk1' или' silk2' Конечно, я не понимаю, почему вы не могли этого сделать. –

@Adam Lynch, извините, я удалил разметку HTML, он показывал мне ОК. –

Вы можете добавить классы к любому набору элементов, которые вы хотите, используя метод jQuery addClass.

$(function(){ 
    $(#ads li).addClass('silk1 ad-accept'); 
});

ОДНАКО, вы действительно используете все 1000 значков на своем сайте? Это кажется большим количеством накладных расходов, если все ваше использование - это множество икон. В теории спрайты работают лучше, потому что запросов меньше, но 5 запросов для 8kb-значков намного быстрее, чем 1 запрос для спрайта 800k. Что-то, что вы, возможно, захотите рассмотреть ...

источник

2012-02-19 18:32:26

Ну, сайт, над которым я работаю, предназначен как шаблон, поэтому мне нужно предоставить покупателям как можно больше вариантов, которые включают в себя столько значков, сколько возможно. Но изображения сжаты, поэтому оба они составляют до 312 КБ, что не так уж плохо ИМХО. –

Это то, что вам нужно?

for (var i = 0; i < document.styleSheets.length; i++) { 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) { 
     var rule = styleSheet.cssRules[j]; 
     if (/^\.silk\d+\./.test(rule.selectorText)) { 
      var classNameParts = /\.(silk\d+)\.(.*)$/.exec(rule.selectorText); 
      var element = document.createElement('DIV'); 
      element.className = classNameParts[1] + ' ' + classNameParts[2]; 
      element.appendChild(document.createTextNode(element.className)); 
      document.body.appendChild(element); 
     } 
    } 
}

Пример: http://jsfiddle.net/ddAcY/

источник

2012-02-19 18:41:48

Это не работает, когда я реализую его на веб-сайте. –

Не могли бы вы определить «не работает» немного больше? Не могли бы вы привести пример того, как выглядит ваш CSS-файл. и, возможно, как вы реализовали код? –

css выглядит так: .silk1 {background: url (../ img/silk1.png); }, и для каждого значка .ad-i-accept {background-position: xxx xxx; }. То, что я имею в виду, не работает, я помещаю его в файл сценариев jQuery, который запускается в $ (document) .ready(), и ничего не происходит. Ничего в консоли ... –

Включите все классы CSS-спрайтов на странице

ответ

Смежные вопросы