如何使用 jquery-ui 主题来设置需要 2 张图片的按钮样式

Question

我有一个按钮（由设计师创建），不能用背景+边框半径表示（它具有类似 3D 的效果，因此“半径”也应该是图像。

教程like this one 很清楚如何制作这样的按钮。但是，jquery-ui 似乎只有这些（相关）类：

• .ui-state-default 保存按钮和其他组件的背景图片
• .ui-button - 定义仅按钮属性。

但代码只有一个<input，所以不能有两个图像，有没有办法让$("..").button()同时使用两个图像？我想我可以在<button> 中设置一些跨度，但是在任何地方都有跨度很麻烦。

Answer 1

有几种状态与按钮和所有小部件相关联：

以下是相关类及其与按钮小部件的关系：

• ui-state-default
  • 页面上显示的按钮属性
• ui-state-active
  • 被点击时的按钮属性
• ui-state-hover
  • 悬停时的按钮属性

在主题的 css 表中，按钮设置中的每个设置通常具有从主题滚轮设置的颜色或图像。

如果您想通过另一个样式表或从 themeroller 重写一个样式表，您可以覆盖默认属性以使用您自己的图像。

您还可以轻松设置主题滚轮设置，通过设置颜色和不透明度为您提供 3D 外观。如果您只需要按钮而不是整个页面，请使用 CSS 范围功能。

Themeroller is here

Themeroller example with similar button to your example