列表视图与多于一个的拆分按钮？ [英] Listview with more than one split button?

问题描述

我想产生在Android中列表视图组件有两个额外的按钮在右边，一个挨着另一个。的问题是，code产生只有一个按钮，第二个加入作为链接到当前项

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.

下面是我的code：

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

在情况下，任何人有兴趣，这里是最后的code：

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