JQuery UI 按钮集行为不端答案

【问题标题】：JQuery UI buttonset misbehavingJQuery UI 按钮集行为不端
【发布时间】：2013-05-02 20:09:20
【问题描述】：

我正在使用 JQuery UI 元素构建一个 UI 应用程序。我需要单选按钮作为功能的一部分。虽然单独使用 JQuery 按钮集有效，但一旦我尝试将其与其他 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;
}

【问题讨论】：

标签： javascript html jquery-ui user-interface

【解决方案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

我将这个类添加到上面不均匀的行中。该类位于最后一个浮动元素的父级上。（尝试删除此类以了解我的意思）。

【讨论】：