Как использовать CSS-спрайты в заголовках сортировки таблиц? - PullRequest
Новая
       12

Как использовать CSS-спрайты в заголовках сортировки таблиц?

2 голосов
/ 15 августа 2011

У меня есть таблица, которая сортируется. Заголовки имеют фоновые изображения (стрелки), чтобы показать направление сортировки.

В текущем CSS используются 3 разных изображения, например: 

th {
    padding-right: 21px;
}
th.sorting {
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
    background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
    background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}

Рабочий пример в JSfiddle здесь .

Есть ли способ уменьшить их до одного изображения и использовать спрайты CSS? Проблема заключается в том, что объединенное изображение нельзя просто использовать в качестве фона для ячейки заголовка , поскольку несколько изображений могут стать видимыми одновременно , как здесь .

Я бы хотел избежать использования дополнительных элементов, если это возможно. Поддержка IE7 была бы отличной, но я, вероятно, мог бы жить без нее.

Могут работать псевдоэлементы, такие как :after, но я не могу найти способ позиционирования значков таким же образом. JSfiddle пример .

Ответы [ 3 ]

2 голосов
/ 26 сентября 2011

Я выяснил способ работы псевдоэлементов. Установите заголовки таблицы как position: relative, а затем примерно так: 

.sorting:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 9px;
    margin-top:-4px;
    background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}

Значок располагается на 50% сверху, затем перемещается вверх на несколько пикселей, чтобы быть вертикально отцентрированным.

0 голосов
/ 15 августа 2011

Быстрый поиск в Google для генератора спрайтов CSS предлагает несколько вариантов.Хотя я никогда не использовал ни один из этих сервисов сам, я обычно делал одно изображение PNG с прозрачностью.Тогда вы бы ссылались на свой CSS следующим образом: 

th {
    padding-right: 21px;
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
    background-position: -100px -100px;
}
th.sorting_asc {
    background-position: -200px -200px;
}
th.sorting_desc {
    background-position: -300px -300px;
}

Замените значения свойства background-position соответствующими координатами.Я думаю, что сервисы спрайтов CSS могут создавать эти значения для вас на основе их сжатия, как только это будет сделано, но для координат CSS могут потребоваться некоторые настройки, чтобы получить именно то, что вы хотите.

0 голосов
/ 15 августа 2011

Вы можете использовать SpriteMe для создания спрайт-изображений на вашем сайте.

sort sprite

.sorting_asc {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px 0px;
}
.sorting {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px -27px;
}
.sorting_desc {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px -53px;
}
...