jQuery Mobile列表上的多个拆分按钮

Question

是否可以在jQuery移动列表中拥有多个拆分按钮？

我试着这样做：

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <a href='#' id='btn1'></a> 
     <a href='#' id='btn2'></a> 
    </li> 
</ul> 

但它不工作。也没有包装链接在<div data-role='controlgroup>。我做错了什么，还是不可能没有黑客？

UPDATE：该列表是通过执行$("#listid).append("<li>...</li>")动态生成的。 http://jsfiddle.net/nrpMN/3/。正如下面mdmullinax指出，下面做工作：

<ul data-role='listview'> 
    <li> 
     <a href='#' id='1'>1</a> 
     <div data-role='controlgroup' data-type='horizontal'> 
      <a href='#' id='btn1'></a> 
      <a href='#' id='btn2'></a> 
     </div> 
    </li> 
</ul> 

感谢

Answer 1

听起来像是你想要的是一个水平controlgroup嵌套在listview。

http://jsfiddle.net/nrpMN/

<ul data-role='listview'> 
    <li> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

Answer 2

这里是延伸到该溶液中。上述解决方案的问题在于，您无法控制列表项右侧按钮的位置。一种方法是向控件添加class ='ui-li-aside'。这将使按钮正确，但您将不得不调整覆盖区域，默认情况下它是50％。您可以修改它来减少它，使它不包括左

.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; } 

列表的内容也可以添加其他类

.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; } 

并更改div来调整

<ul data-role='listview'> 
    <li> 
     <div class='ui-li-aside' data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </li> 
</ul> 

Answer 3

我认为，Controlgroup在动态列表视图中表现不好。您应该在动态列表视图中为控件组制作完整的html代码。

<li> 
    <a href='#popupItem' data-rel='popup'>List Text</a> 
    <div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div> 
</li>