jQuery-uiコントロールグループの初期化時のテキスト入力順序の変更

Question

コントロールグループを初期化しようとするたびに、テキスト入力が最後になるように順序が変更されます。

前のinit：

ポストのinit：

HTML：

<fieldset> 
    <div class="controlgroup"> 
     <label for="instrID" class="ui-controlgroup-label">ID:</label> 
     <input type="text" name="instrID" id="instrID"> 
     <label for="instrAddr" class="ui-controlgroup-label">Address:</label> 
     <input type="text" name="instrAddr" id="instrAddr"> 
     <label for="dropDownFormat" class="ui-controlgroup-label">Format:</label> 
     <select id= "dropDownFormat"><option selected='DEFAULT'>DEFAULT</option><option>OPT_2</option><option>OPT_3</option></select> 
     <label for="radio-write" class="ui-controlgroup-label">Type:</label> 
     <label for="radio-write">Write</label> 
     <input type="radio" name="radio-wr" id="radio-write"> 
     <label for="radio-read">Read</label> 
     <input type="radio" name="radio-wr" id="radio-read"> 
     <button id="addCmd">Add Command</button> 
    </div> 

JS：

$(document).ready(function(){ 
    $(".controlgroup").controlgroup(); 
}); 

Answer 1

APIドキュメントには、「アイテム」属性があることが示されています。この属性では、コントロールグループの開始時にどのタイプがどのウィジェットに変換されるかを宣言します。

例：input [type = 'checkbox']は、コントロールグループの開始時に新しい「checkboxradio」ウィジェットに変換されます。

私はあなたと同じことをやろうとしていますが、肯定的ではありませんが、統合するアイテムにinput [type = 'text']要素を追加する必要があると思いますこの対照群に加える。 Kickerは、ウィジェットタイプを宣言してテキスト入力も同様に変換する必要があるということです。

要素型入力[type = 'text']が宣言されていないと、JQuery-UIはデフォルトでサポートされているすべての型を解析します（サポートされるリストはhttp://api.jqueryui.com/controlgroup/#option-itemsにあります）。終了したら解析が終了します。

これは、入力[type = 'text']が行末に表示される理由です。

続行 - 私は入力[type = 'text']をさまざまなウィジェットタイプに追加してテストし、コントロールグループを少しファンキーに見せます。しかし、あなたが絶対に必要としているのであれば、「controlGroupLabel」に追加してから、いくつかのカスタムCSS項目を入力ボックスに追加することができます。

だからあなたの対照群のjqueryのは、次のようになります。

$('.controlGroup').controlGroup({ 
    items: { 
    "button": "input[type=button], input[type=submit], input[type=reset], button, a", 
    "controlgroupLabel": ".ui-controlgroup-label, input[type='text']", 
    "checkboxradio": "input[type='checkbox'], input[type='radio']", 
    "selectmenu": "select", 
    "spinner": ".ui-spinner-input" 
    } 
}); 

ウィッシュjQueryのUIチームは、対照群の能力にテキスト入力と、ほかのすべての入力を追加します。

Answer 2

コンソールにJSエラーがありますか？あなたは部屋を使い果たしていますか？初心者のためにこれらの要素の半分を削除し、同じ動作をするかどうか確認してください。

Answer 3

これは古いトピックですが、回答やその特定の質問は他の場所では見つかりませんでした。

いくつかのテストの後、私は以下の解決策を見つけました。

.controlgroup()を変更しないでください。 labelとinput type="text"にクラスui-controlgroup-itemを追加してください。

よろしく、 アントワーヌ