3

我希望将 jQuery 图标添加到另一个插件（jquery.tablesorter.js）添加的另一个类中，特别是我希望将图标添加ui-icon-triangle-1-n到.headerSortUp来自tablesorter.

我正在尝试添加以下课程，但无法为我的一生如何为它制作一个精灵。

table.sortable thead tr .headerSortUp {
  cursor: pointer;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background: url(jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png) 0 -16px;
}

我以前没有使用过 CSS 精灵，所以我不完全确定如何做到这一点。

我看到的情况是我只希望显示背景图像的一部分，但我希望它位于文本的右侧中心并且不重复。

4

2 回答 2

5

这里有一个关于精灵背景图像裁剪的优秀教程： css-background-image-hacks

诀窍是使用伪选择器:after或:before将图标放入标题中，而无需在 html 结构中添加其他元素。

在这里，我使用 tablesorter 插件添加了一个工作演示：http: //jsfiddle.net/FXq8b/

.tablesorter thead tr {
  line-height:16px;
  background-color:#ddd;
  cursor: pointer;
}
.headerSortUp:after, .headerSortDown:after {
   content:"";
   float:right;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url('http://www.wooldalejunior.org.uk/ui/vendor/jquery.ui/css/smoothness/images/ui-icons_222222_256x240.png');
   background-position:0 -16px;
}
.headerSortDown:after {
   background-position:-64px -16px;
}

现在您只需要向左和向上移动多次 x 16px 即可到达所需的图标（另一个示例 ... up -> background-position: 0 -48px;down -> background-position: -64px -48px... 或 up -> background-position: -96px -192px;down -> background-position: -64px -192px，您只需要数数您想要的图标从顶部到左侧有多少个图标位于图像上：http: //jsfiddle.net/FXq8b/1/）。

于 2013-05-03T03:08:39.277 回答
0

您只需创建框并将图像放入此框中：

table.sortable thead tr .headerSortUp,
table.sortable thead tr .headerSortDown {
    background: url("http://code.jquery.com/ui/1.10.2/themes/smoothness/images/ui-icons_454545_256x240.png") no-repeat;   
    display: inline-block; /* or block */
    height: 14px;
    width: 14px;
}
table.sortable thead tr .headerSortUp {
    background-position: 0 -46px;
}
table.sortable thead tr .headerSortDown {
    background-position: -65px -46px;
}

随着background-position您通过 X 和 Y 坐标在精灵内部导航。

示例：http: //jsfiddle.net/865VD/

于 2013-05-03T03:01:11.330 回答