代码之家 › 专栏 › 技术社区 › wivku

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

select jquery-mobile javascript

wivku · 技术社区 · 12 年前

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

使用控制组使其看起来像我想要/需要的样子,除了它不填充整个宽度。我还尝试了字段集、导航栏和网格,但到目前为止还没有得到理想的结果。

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

2 回复 | 直到 12 年前

Rick Hitchcock 12 年前

这可能会让你继续:

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

wivku 12 年前

里克给我指了正确的方向,谢谢。

以下是完整的解决方案: 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);

它处理的棘手部分:

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

如果您感兴趣:jQueryMobile选择菜单的结构:

本机选择

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