在jQuery UI中更改单选按钮图像

2

理想的情况下使用，您将要使用的ThemeRoller如果你能摆脱它。但是，如果您想要完全自定义的东西，例如使用自定义图像背景和自定义图标，同时仍保留jQuery UI按钮的功能，您仍然可以。它只需要更多的工作来覆盖默认的jQuery UI CSS样式并创建一些新的样式。

例如：

enter image description here

右边的按钮是的ThemeRoller风格的一个jQuery UI按钮，而在左侧的按钮仍然是一个jQuery UI按钮，但使用自定义图标和背景。以下是你需要做的，完成一个自定义按钮是什么：

开始与背景和你的图标图片：

enter image description here

这里是你将需要创建CSS：

.house{ 
    background-image: url("./yourIconImage.png") !important; 
    width: 45px !important; 
    height: 45px !important; 
    margin-left: -22px !important; 
    margin-top: -22px !important; 
} 

#houseLabel.ui-state-active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px; 
} 


.background 
{ 
    width: 60px !important; 
    height: 60px !important; 
    background-image: url("./yourBackgroundImage.png") !important; 
    border: 0px solid black !important; 
    background-position: 0px 0px; 
} 

.background:active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px !important; 
} 
.background:hover 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -60px; 
}

然后在您的JavaScript创建按钮时：

$("#button").button({ 
     text: false, 
     icons: { 
      primary: "house" 
     } 
    }); 
    $("#button").next(".ui-button").addClass("background").attr('id', 'houseLabel');

有了这个，你的＃按钮看起来就像左边的自定义样式按钮。当然，您必须通过指定正确的图像和尺寸来调整此代码以适应您的资源。

来源

2012-03-21 17:45:12

+0

thx，这是很多的帮助 – mfadel 2012-03-21 18:11:52

+0

@FaddelHomsi没问题，如果我的答案帮助你，请考虑upvoting或接受它。谢谢。 – 2012-03-21 18:32:36

1

这不是图像。它正在与css完成。

只需更改类的CSS。

class="ui-button-text" - 按钮内的文本。
class= "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

或更改与theme roller，如果你不知道什么css是丢失容易的主题。
请注意，您需要使用您自己的本地css文件。

来源

2012-03-21 17:18:48 gdoron

+0

你的意思是，我可以不使用我们的设计师制作的图像？ – mfadel 2012-03-21 17:35:06

+0

@FaddelHomsi。您可以。而不是按钮，把你的图像。 – gdoron 2012-03-21 17:36:56

0

你应该去themeroller page，选择您想要的颜色，并下载CSS文件在你的应用程序

来源

2012-03-21 17:20:26

+0

themeroller不能让我完全自定义单选按钮集 – mfadel 2012-03-21 18:16:04

0

我发现了一个简单的解决方案，这是使用的div并将其分配值，以同样的方式单选按钮作品

我更熟悉这比使用jQuery UI的

来源

2012-04-06 05:26:23 mfadel

在jQuery UI中更改单选按钮图像

回答

相关问题