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按鈕行爲異常

回答

相關問題