Question

在标签中添加动态checkradioboxes时出现问题。如果我在选项卡外添加复选框，则会正确生成。如果我在选项卡中添加，则“勾号”变为^图标。

<input type="submit" value="Add" class="submit1" name="btnGo" id="btnGo" />

<div id="z" style="margin: 0px auto; width:800px; height:30px;"></div>

<div id="tabDiv" class="tabsDiv880_W1400">
    <ul>
        <li class="tabWidth110" ><a class="tabWidthHref90" href="#tabs-Detail"     >Detail</a></li>
    </ul>
    <div id="tabs-Detail"       class="tabsPanelH850" >
        <div id="y" style="margin: 0px auto; width:800px; height:30px;"></div>
    </div>
</div>

Jquery代码

    $('#btnGo').unbind('click').on('click', function(e) {
        e.preventDefault();

        $('#z')
            .html('<label for="wsKh"></label><input Type="checkbox" name="wsKh" id="wsKh" checked="checked "/>' +
                        '<label for="wsKh1"></label><input Type="checkbox" name="wsKh1" id="wsKh1" checked="checked " disabled="disabled" />');
        $('#wsKh,#wsKh1').checkboxradio();

        $('#y')
            .html('<label for="wsyKh"></label><input Type="checkbox" name="wsyKh" id="wsyKh" checked="checked "/>' +
                        '<label for="wsyKh1"></label><input Type="checkbox" name="wsyKh1" id="wsyKh1" checked="checked " disabled="disabled" />');
        $('#wsyKh,#wsyKh1').checkboxradio();
    });

问题是background-postion-x是错误的，我不知道如何纠正它（显示的图标是^而不是刻度线）。我没有做任何改变。

正确造型：

background-position-x:
-64px   jquery-ui.theme.min.css:5.ui-icon-check
initial jquery-ui.theme.min.css:5.ui-state-checked
initial jquery-ui.theme.min.css:5.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus
-64px   jquery-ui.min.css:7.ui-icon-check
initial jquery-ui.min.css:7.ui-state-checked
initial jquery-ui.min.css:7.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus

样式不正确：

background-position-x:
initial jquery-ui.theme.min.css:5.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus
initial jquery-ui.min.css:7.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus
-64px   jquery-ui.theme.min.css:5.ui-icon-check
initial jquery-ui.theme.min.css:5.ui-state-checked
-64px   jquery-ui.min.css:7.ui-icon-check
initial jquery-ui.min.css:7.ui-state-checked

Answer 1

当你使用jQuery UI时，他们有一个所有图标的精灵表，然后使用背景位置来显示它们。（这样可以节省文件空间。）

对于复选标记，他们声明了这一点：

.ui-icon-check {
    background-position: -64px -144px;
    background-position-x: -64px;
    background-position-y: -144px;
}

但是，当您的复选框位于容器ui-widget-content中时，它们会显示initial的背景位置，但在选项卡中，它会设置为50% 50%。

您可以做的是定位所有复选框，如下所示：

.ui-icon-check {
    background-position: -64px -144px !important;
    background-position-x: -64px;
    background-position-y: -144px;
}

或仅定位.ui-widget-content中的复选框。

.ui-widget-content .ui-icon-check {
    background-position: -64px -144px !important;
}

这是一个updated fiddle，我选择了所有复选框。

Jquery UI 1.12.1：在选项卡中动态添加checkboxradio小部件时出现问题

1 个答案: