Question

我正在使用JQuery UI元素构建UI应用程序。我需要单选按钮作为功能的一部分。虽然使用JQuery buttonset本身是有效的，但是一旦我尝试将其与其他UI元素合并，它们就无法正确对齐：

在此处包含代码：

$(document).ready(function()
{
    $("button").button();
    $("#tdiDir").buttonset();
    $("#acqMode").buttonset();
});

<div id='primaryLatestControl'
class="ui-corner-top pacontainer"
style='padding: 4px; display: inline-block; '>

    <button id="setGain" class="button">Set</button>
    <span class="label">Gain Value</span>
    <input type="text" id="gainValue" class="value" value="2"></input> 

    <button id="setLineRate" class="button">Set</button>
    <span class="label">Line Rate, HZ</span>
    <input type="text" class="value" id="lineRateValue" value="3750"></input> 

    <button id="setExposeTime" class="button">Set</button>
    <span class="label">Exposure Time(ms)</span>
    <input type="text" class="value" id="exposeTimeValue" value="100"></input> 

    <button id="setTDI" class="button">Set</button>
    <span class="label">TDI Direction</span>
    <form>
        <div id="tdiDir">
            <label class="checkLabel" for="forward">Forward</label>
            <label class="checkLabel" for="reverse">Reverse</label>
            <input type="radio" class="value" name="tdiDir" id="forward" checked="checked"/>
            <input type="radio" class="value " name="tdiDir" id="reverse"/>    
        </div>
    </form>

    <button id="setAcqMode" class="button">Set</button>
    <span class="label">Acquisition Mode</span>
    <form>
        <div id="acqMode">
            <label class="checkLabel" for="tdi">TDI</label>
            <label class="checkLabel " for="area">Area</label>
            <input type="radio" class="value" name="acqMode" id="tdi" checked="checked"/>
            <input type="radio" class="value" name="acqMode" id="area"/>
        </div>
    </form>

.pacontainer {
    position: relative;
    width: 80%;
}

.label {
    float: left;
    margin: 10px;
}

.checkLabel {
    width: 100px;
    float: right;
    margin: 10px;
}

.endLine {
    clear: right;
}

.button {
    float: left;
    margin-left: 10px;
    clear: left;
}

.value {
    float: right;
    width: 45px;
    height: 20px;
    margin: 5px;
    background-image: none;
}

Answer 1

我很快对您的代码进行了一些更改，以便您了解相关信息。 http://jsfiddle.net/sEunS/3/

您希望按钮组中的按钮是有序的，因为按钮组使外部按钮成圆角，内部按钮的“压缩”边距靠近在一起。如果没有正确的排序，按钮组总是看起来不正确。

浮动收音机的标签将导致无线电在按钮组中无序。我建议浮动收音机的容器而不是标签。

#acqMode, #tdiDir {
  float: right;
}

并删除.checkLabels上的浮动，因为它们不再需要

.checkLabel {
    //float: right;
}

您还应该将收音机的标签与收音机输入一起保存。这是按钮组的另一个排序问题。

<div id="acqMode">
    <label class="checkLabel " for="area">Area</label>
    <input type="radio" class="value" name="acqMode" id="area"/>
    <label class="checkLabel" for="tdi">TDI</label>
    <input type="radio" class="value" name="acqMode" id="tdi" checked="checked"/>
</div>

最后一个问题是你需要与clearfix有关。按钮组大于同一行上的文本，因此如果没有clearfix，下一行将不会显示为直线。 JQuery UI有一个帮助类

ui-helper-clearfix

我将这个类添加到上面不平衡的行中。该类继续使用最后一个浮动元素的父级。（尝试删除此类以了解我的意思）。

JQuery UI buttonset行为不端

1 个答案: