jQuery-ui controlgroup textinput命令在初始化时更改

Question

每当我尝试初始化我的控制组时，它会更改顺序，以便文本输入结束。

初始化：

初始化后：

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文档显示存在“items”属性。在此属性中，您将声明在启动控制组时将哪些类型转换为哪些窗口小部件。

示例：当启动控制组时，input [type ='checkbox']将转换为新的“checkboxradio”小部件。

我还没有肯定，因为我正在尝试做与你相同的事情，但我相信你需要将元素输入[type ='text']添加到要合并到的项目中这个控制组。踢球者是你还需要声明一个小部件类型来将文本输入转换为。

如果没有声明元素类型输入[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()。只需在ui-controlgroup-item和label上添加课程input type="text"。

此致 安托