Listview 有多个拆分按钮？答案

【问题标题】：Listview with more than one split button?Listview 有多个拆分按钮？
【发布时间】：2011-11-30 07:59:09
【问题描述】：

基于Split button list 的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>

这是它生成的：

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

有没有办法做到这一点？提前谢谢你。

【问题讨论】：

这是duplicate question
对不起，这不是重复的。我刚刚对其进行了测试，该问题中的答案代码生成了一个<li>，其中包含三个相同大小的按钮，我想生成一个带有主项目链接和两个额外按钮的<li>，如图所示。
是的，这与链接文章所尝试的完全一样，但他放弃并想出了一个不同的解决方案 - 只是认为这可能会帮助您继续前进

标签： listview jquery-mobile

【解决方案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;
}

【讨论】：

不错。谢谢你。我追求同样的效果。

【解决方案2】：

灵感来自 Pablo 的回答

<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 样式赋予按钮与列表项相同的高度，因此可访问性与标准拆分按钮相同

.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 */
}

【讨论】：

【解决方案3】：

http://jsfiddle.net/YneYY/

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

为 Arney 的示例创建的 JS Fiddle

【讨论】：

【解决方案4】：

这是完成同样事情的另一种选择

http://jsfiddle.net/wZg75/

<ul data-role='listview'>
    <li >
        <a>i can run
        </a>
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <div position=relative align=right 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>

【讨论】：

【解决方案5】：

对我有用

<ul data-role="listview" >
                    <li>
                        <div class="ui-grid-b">
                            <div class="ui-block-b" style="width: 60%;">
                                <div data-role="fieldcontain">
                                    <h2>Manikandan</h2>
                                    <p>Email : tomanikandan.j@gmail.com</p>
                                    <p>Store Name : Mani Store</p>
                                </div>
                            </div>
                            <div class="ui-block-c" style="width: 40%; padding-top: 20px; float: right;">
                                <div style="float: right;">
                                    <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
                                    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

【讨论】：

【解决方案6】：

<link href="http://demos.jquerymobile.com/1.4.3/css/themes/default/jquery.mobile-1.4.3.min.css" rel="stylesheet"/>
<script src="http://demos.jquerymobile.com/1.4.3/_assets/js/index.js"></script>
<script src="http://demos.jquerymobile.com/1.4.3/js/jquery.mobile-1.4.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div>
<ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true">
						<li><a href="#" style="margin-right:5em">
							<img src="../_assets/img/album-bb.jpg">
							<h2>Broken Bells</h2>
							<p>Broken Bells</p></a>
							<a href="#purchase" data-rel="popup" style="right: 2.5em;border-radius:0" data-position-to="window" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
						<li><a href="#">
							<img src="../_assets/img/album-hc.jpg">
							<h2>Warning</h2>
							<p>Hot Chip</p></a>
							<a href="#purchase" data-rel="popup" style="right: 2.5em;border-radius:0" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-position-to="window" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
						<li><a href="#">
							<img src="../_assets/img/album-p.jpg">
							<h2>Wolfgang Amadeus Phoenix</h2>
							<p>Phoenix</p></a>
							<a href="#purchase" data-rel="popup" data-position-to="window" style="right: 2.5em;border-radius:0" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
					</ul>
					<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
						<h3>Purchase Album?</h3>
						<p>Your download will begin immediately on your mobile device when you purchase.</p>
						<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
						<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
					</div>

破碎的钟声

购买专辑购买专辑

警告

热芯片

购买专辑购买专辑

沃尔夫冈·艾玛迪斯·菲尼克斯

凤凰

购买专辑购买专辑

                <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
                    <h3>Purchase Album?</h3>
                    <p>Your download will begin immediately on your mobile device when you purchase.</p>
                    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
                    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
                </div>

【讨论】：