jquery - egor khmele 的 jQuery UI Slider 插件左右手柄颜色不同

Question

我正在使用这里的 jQuery 插件：

http://egorkhmelev.github.com/jslider/

如何让左右处理不同的颜色？

谢谢您的帮助。

Answer 1

这些句柄/指针的图形（或精灵）包含在名为 jslider.plastic.png. 这是它的外观：http ://egorkhmelev.github.com/jslider/img/jslider.plastic.png

如果您创建一个基于jslider.plastic.png但将所有内容设为红色的新图像，并将该图像命名为“jslider.plastic.red.png”，则您可以修改应用于右侧句柄的 CSS 类，如下所示：

.pointer-to
{
  url(../img/jslider.plastic.red.png); 
}

现在您将有一个蓝色的左手柄和一个红色的右手柄。

-

另一种选择是jslider.plastic.png使用红色版本的手柄扩展精灵图像。只需将它们添加到现有蓝色手柄的右侧（您会看到两个版本，它们分别代表未按下和按下状态）。然后你需要改变你的 .pointer-to 的 css 看起来像这样：

.pointer-to
{
     background-position: -40px -40px; // x, y
}

您可能必须使用 x 坐标才能使其与图像对齐。这样，您将减少浏览器需要请求的精灵图像的数量。如果您知道您总是会请求并一起使用它们，那么合并这些精灵图像是一件好事。