具有多个拆分按钮的列表视图? [英] Listview with more than one split button?

问题描述

基于 拆分按钮列表的 JQuery-Mobile 示例 我试图在 Android 中生成一个列表视图组件，右侧有两个额外的按钮，一个挨着另一个.问题是代码只生成了一个按钮，第二个按钮被添加为当前项的链接.

Based on the JQuery-Mobile example of the Split button list I am trying to generate a listview component in Android with two extra buttons to the right, one next to the other. The problem is that the code generates only one button and the second one is added as a link to the current item.

这是我的代码:

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

这是它生成的:

我正在尝试制作这样的东西:

And something like this is what I am trying to produce:

有没有办法做到这一点?提前致谢.

Is there a way to achieve this? Thank you in advance.

推荐答案

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

I was able at last to achieve something similar:

如果有人感兴趣，这里是最终代码:

In case anyone is interested, here is the final code:

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

这篇关于具有多个拆分按钮的列表视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！