Question

我使用bootstrap和asp.net。

我如何使用asp.net radiobutton（而不是radiobuttonlist）来悬停像附加的图像。或类似的。

请提供一个例子

Answer 1

样式和外观

jQWidgets使用一对css文件--jqx.base.css和jqx。[主题名称] .css。基本样式表创建与窗口小部件布局相关的样式，如边距，填充，边框宽度，位置。第二个css文件应用小部件的颜色和背景。 jqx.base.css应该包含在第二个CSS文件之前。

以下是jqxButtons使用的CSS类列表。 jqxRadioButton样式

jqx-widget - 应用于jqxRadioButton小部件。 jqx-radiobutton - 应用于jqxRadioButton的外部div元素。 jqx-radiobutton-default - 当状态为默认值时应用于复选框。 jqx-fill-state-normal - 当状态为默认值时应用于复选框。 jqx-radiobutton-hover - 当鼠标光标悬停在复选框上时应用于复选框 jqx-fill-state-hover - 当鼠标光标悬停在复选框上时应用于复选框 jqx-radiobutton-disabled - 在禁用窗口小部件时应用于复选框 jqx-radiobutton-disabled-box - 当禁用jqxRadioButton时应用于检查框。 jqx-radiobutton-check-checked - 选中jqxRadioButton时应用于复选框。显示检查图标 jqx-radiobutton-check-disabled - 禁用jqxRadioButton时应用于检查框。显示已禁用的检查图标 jqx-radiobutton-check-indeterminate - 当jqxRadioButton处于不确定状态时应用于检查框。在复选框内显示一个矩形。 jqx-radiobutton-check-indeterminate-disabled - 当jqxradiobutton处于不确定状态且禁用jqxRadioButton时应用于检查框。在复选框内显示灰色（禁用）矩形。 jqx-fill-state-disabled - 禁用时应用于jqxRadioButton。 jqx-fill-state-focus - 在聚焦时应用于jqxRadioButton。为jqxRadioButton创建具有颜色和背景的自定义样式时，需要执行以下操作：添加上面与jqxRadioButton相关的CSS类在每个CSS类之后，添加您的主题名称。例如： JQX-单选按钮，夏天要将自定义样式应用于jqxRadioButton，您需要将其“theme”属性（选项）设置为指向主题名称字符串。

$("#jqxradiobutton").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });

下面的示例演示了如何将'Summer'主题设置为jqxRadioButton。

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Radio Button CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRadioButton.
            $("#jqxradiobutton1").jqxRadioButton({theme: 'summer', width: 120, height: 25 });
            $("#jqxradiobutton2").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxradiobutton1'>
        Radio Button 1</div>
    <div id='jqxradiobutton2'>
        Radio Button 2</div>
</body>
</html>

参考this link for further details

Bootstrap Asp.net RadioButton悬停造型

1 个答案: