Javascript jQuery Mobile中带按钮的全宽选择菜单

我试图得到一个页脚工具栏，由两个按钮（上一个/下一个）和一个选择菜单组成。 如何使selectmenu使用全宽

有关详细信息，请参阅

使用控制组可以使它看起来像我想要/需要的那样，只是它不能填充整个宽度。 我还尝试了fieldset、navbar和grids，但到目前为止还没有达到预期的效果

<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>

上
下一个
选择我。。。

这可能会让您继续：

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

---

瑞克给我指出了正确的方向，谢谢

以下是完整的解决方案：

解决方案的关键部分是：

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); 

它处理的棘手部分包括：

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

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

本机选择

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

div数据角色=控制组
ui控件组控件
按钮#上一个用户界面btn
按钮#next.ui btn
分区用户界面选择
jQuery Mobile在页脚导航中表单元素上的样式/标记的一部分是div#-button.ui btn，它将典型的全宽下拉列表修改为浮动到左侧或右侧的内联下拉列表。任何定制都需要使用一些CSS和简单的html结构，当您将controlgroup放在主内容部分时，会得到相同的结果。所以，不确定它是否是特定于页脚的。你心目中的CSS/简单HTML是什么？嘿，谢谢你的赞扬，但这比我想象的要复杂得多。干得好！