2011-09-01 37 views
0

我有一个按钮(由设计者创建),无法用background + border radius表示(它具有3D效果,所以“radius 。“应该是一个形象,以及如何使用jquery-ui主题来设计需要2张图片的按钮

距离教程like this one清楚如何让这样的按钮然而,jQuery的UI似乎只有这些(有关)类:

  • .ui-state-default持有的按钮和其他组件的背景图像
  • .ui-button - that定义仅按钮属性。

但代码中只有一个<input,所以它不能有两个图像,有没有办法有$("..").button()同时使用的图片?我想我可以在<button>之内有一些跨度,但是到处都是麻烦的。

回答

0

有与按钮相关的几个州和所有小工具:

以下是相关类和它们相对于按钮控件:

  • ui-state-default
    • 按钮属性,因为它出现在页
  • ui-state-active
    • 如被点击
  • ui-state-hover
    • 的按钮属性,因为它是盘旋

在主题的CSS片的按钮属性有每个设置内这些按钮设置通常具有从整理器设置的颜色或图像。

如果您希望通过另一个样式表或重写整理器中的一个,则可以覆盖默认属性以使用自己的图像。

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

Themeroller is here

Themeroller example with similar button to your example

+0

我知道的三种状态,但这并不与形成按钮帮助(我只是将其形成3点不同的方式)。另外 - 如何通过“颜色和不透明度”来实现3D外观? – Bozho

+0

好吧,对不起,我误解了你刚才的要求。你最好的选择可能是在该教程中添加跨度。正如你所说,这在任何地方都很麻烦。如果你使用jQuery UI,我认为你可能会停留在这里编辑一些源代码。您可以将按钮小部件扩展到您自己的小部件中,并扩展功能以保持跨度以及... – jyore

+0

就整个美化器而言,您可以使用按钮状态的颜色和叠加效果的不透明度创建与该教程中非常相似的按钮。设置边界半径为一个巨大的数字将使它看起来像样本页上的胶囊样式 – jyore