基于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>
这就是它产生的结果:
这样的事情就是我想要产生的东西:
有没有办法实现这个目标?提前谢谢。
答案 0 :(得分:14)
我终于能够实现类似的目标:
如果有人有兴趣,这是最终的代码:
<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;
}
答案 1 :(得分:6)
受到巴勃罗答案的启发
<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 */
}
答案 2 :(得分:0)
<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>
JS Fiddle因为Arney的例子而被拒绝
答案 3 :(得分:0)
这是完成同样事情的另一种选择
<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>
答案 4 :(得分:0)
它对我有用
<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>
答案 5 :(得分:0)
<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>