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

时间:2011-08-14 20:45:54

标签: jquery-mobile

是否可以在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>中。我做错了什么,或者没有黑客是不可能的?

更新:通过执行$("#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>

由于

3 个答案:

答案 0 :(得分:3)

听起来你想要的是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>

答案 1 :(得分:0)

这是解决方案的扩展。上述解决方案的问题是您无法控制列表项右侧的按钮位置。一种方法是向控件添加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>

答案 2 :(得分:0)

我认为,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>