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

Question

我正在使用jQuery UI编写一个测验模块，其中包含一个单选按钮集。如何更改按钮的颜色或图像？

Answer 1

理想情况下，如果你能逃脱它，你会想要使用Themeroller。但是，如果您想要完全自定义的内容，例如使用自定义图像背景和自定义图标，同时仍保留jQuery UI按钮的功能，您仍然可以。它将在覆盖默认的jQuery UI CSS样式和创建一些新样式方面花费更多的工作。

例如：

右边的按钮是一个用Themeroller设置的jQuery UI按钮，而左边的按钮仍然是一个jQuery UI按钮，但带有自定义图标和背景。以下是完成自定义按钮所需执行的操作：

从背景和图标图片开始：

以下是您需要创建的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');

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

Answer 2

这不是图片。正在使用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文件。

Answer 3

您应该转到themeroller page，选择您想要的颜色并下载要在您的应用中使用的css文件

Answer 4

我找到了一个更简单的解决方案，即使用div并为其赋值， 以相同的方式单选按钮工作

我比使用jquery ui更舒服