Listview有多个拆分按钮？

Question

基于Split按钮列表的JQuery-Mobile示例,我试图在Android中生成一个listview组件,右边有两个额外的按钮,一个旁边的按钮.问题是代码只生成一个按钮,第二个按钮添加为当前项的链接.

这是我的代码:

<ul data-role="listview" data-filter="true" data-theme="b">
  <li>
    <a href="#" onclick="alert('the item!');">
      <h3>The item</h3>
    </a>
    <a href="#" onclick="alert('1st splitbutton!');">1st link</a>
    <a href="#" onclick="alert('2nd splitbutton!');">2nd link</a>
  </li>
</ul>

这就是它产生的:

这样的事情就是我想要产生的东西:

有没有办法实现这个目标？先感谢您.

Answer 1

我终于能够实现类似的东西了:

如果有人有兴趣,这是最终的代码:

<ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
  <li>
    <a href="#" onclick="alert('the item!');">
      <h3>The item</h3>
    </a>
    <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a>
    <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a>
    <a href="#" style="display: none;">Dummy</a>
  </li>
</ul>

新定义的类:

.split-button-custom {
    float: right;
    margin-right: 10px;
    margin-top: -32px;
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;   
}

.split-button-custom span.ui-btn-inner {
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
    padding-right: 0px;
}

.split-button-custom span.ui-icon {
    margin-top: 0px;
    right: 0px;
    top: 0px;
    position: relative;
}

Answer 2

受到巴勃罗答案的启发

<ul data-role="listview">
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
</ul>

通过将链接放在包装器div中,不需要"虚拟"锚(并且可以使用两个以上的锚).

css样式为按钮提供与listitem相同的高度,因此可访问性与标准分割按钮相同

.split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}