Question

我正在尝试获取一个页脚工具栏，包含两个按钮（上一个/下一个）和一个选择菜单。如何让selectmenu使用全宽？

有关详细信息，请参阅jsFiddle example。

使用控制组使其看起来像我想要/需要的方式，除了它没有填满整个宽度。我还尝试了fieldset，navbar，grid，但到目前为止还没有想要的结果。

<div data-role="controlgroup" data-type="horizontal" id="footerControlgroup" >
  <button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext ui-mini">Prev</button>
  <button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext ui-mini">Next</button>
  <select id="select" data-mini="true">
    <option>pick me...</option>
  </select>
</div>

Answer 1

这可能会让你前进：

var next= document.getElementById('next');
var select= document.getElementById('select');
select.style.width= 
  (select.parentNode.offsetWidth -
   next.getBoundingClientRect().right
  )+'px';

Answer 2

Rick指出我正确的方向，谢谢。

以下是完整的解决方案：jsFiddle。

解决方案的关键部分：

var select = $("#mySelect");
var cWidth = 0;
select.closest(".ui-controlgroup-controls").children().not(".ui-select")
    .each(function() { 
        cWidth += $(this).outerWidth();
        $(this).outerHeight( select.closest(".ui-select").height() +0.5 );
    });
select.closest(".ui-select").find(".ui-btn")
  .outerWidth( select.closest("[data-role='controlgroup']").width() - cWidth -1);

它处理的棘手部分：

jQuery Mobile插入各种元素以增强选择
jQuery Mobile有两种类型的选择菜单：本机或自定义（由JQM增强的选项列表）
jQuery Mobile select可以是全尺寸，也可以是data-mini =“true”
在页脚内部使用时，遍历略有不同（尽管DOM结构相同）
我把它设为通用的，因此选择之前或之后的元素（例如按钮）的数量是可变的
这是一个静态函数，所以我将它绑定到.resize以调整浏览器大小时的宽度

如果您感兴趣：jQuery Mobile选择菜单的结构：

原生选择

div data-role=controlgroup
    div .ui-controlgroup-controls
        button #prev .ui-btn 
        button #next .ui-btn
        div .ui-select
            div #<selectId>-button .ui-btn          <== adjust width
                span <text of first item>
                select #<selectId>                  <-- starting point

自定义选择

div data-role=controlgroup
    div .ui-controlgroup-controls
        button #prev .ui-btn 
        button #next .ui-btn
        div .ui-select
            a #<selectId>-button .ui-btn            <== adjust width
                span <text of first item>
            select #<selectId>                      <-- starting point
            div #<selectId>-listbox-placeholder

全宽选择菜单结合jQuery Mobile中的按钮

2 个答案: