JQuery UI按钮行为异常

我正在使用JQuery UI元素构建UI应用程序。我需要单选按钮作为功能的一部分。虽然使用JQuery buttonset本身的工作，有一次我尝试与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; 
}

来源

2013-05-08 NindzAI

我很快对代码进行了一些更改，为您提供了一个主意。 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。按钮集大于同一行上的文本，因此如果没有清晰的修正，下一行不会看起来很直。 JQuery UI有一个帮助类

ui-helper-clearfix

我把这个类添加到上面那个不均匀的行。该类继承最后一个浮动元素的父级。（尝试删除这个类来了解我的意思）。

来源

2013-05-08 15:49:45 jcbelanger

JQuery UI按钮行为异常

回答

相关问题