Question

我需要一个右侧的按钮 - 在<ul data-role="listview" />元素的中间对齐。

这是我正在使用的HTML，这是我能想到的最好的，但它不是一个拆分按钮，它甚至没有在内容的中间对齐...

<ul data-role="listview" data-theme="d" data-divider-theme="d">
    <li>
        <h3>New York Group Applies for CDFI Status</h3>
        <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        <p class="ui-li-aside read_more"><a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" class="ui-btn-right">Read More</a></p>
    </li>
</ul>

所以，这里的问题是我有点希望它以与Split Button方法相同的方式显示，但是，如果我尝试使用它，它会破坏它的外观，因为我没有第一个<a>标记了<h3>和第一个<p>元素的标记。另外，因为我在<p>元素的正文副本中定义了标记。

这是我到目前为止的一个方面：http://jsfiddle.net/MY8Tg/

如何在保持左侧结构的同时将其作为拆分按钮，而不是使左侧成为任何东西的实际链接，从而保持其他链接正常工作？

我需要这个中间对齐，就像Split按钮一样。为什么这不可能开箱即用？

Answer 1

使用div围绕左右两个部分，并给右边的div一个ui-li-link-alt：

<ul data-role="listview" data-theme="d" data-divider-theme="d" class="has-right-radio">
    <li>
        <div>
            <h3>New York Group Applies for CDFI Status</h3>
            <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        </div>

        <div class="ui-li-link-alt borderLeft">
            <a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" >Read More</a>
        </div> 
    </li>
</ul>

.borderLeft{
    border-left: 1px solid rgb(204, 204, 204);
}

以下是您更新的 FIDDLE

Answer 2

来自Gajotres＆＃39;在jQuery mobile listviews split buttons, right button only回答，我这样做了：

检查了Google Chrome浏览器开发者工具中的元素

从该信息中创建了以下样式。如果您使用自己的主题，请务必使用正确的background-color：

.ui-listview > li.ui-li-has-alt > a.ui-btn.nolink-a {
  cursor: default !important;
  font-weight: normal !important;
  background-color: #f5f8f9 !important; /*{a-body-background-color}*/
}

我个人将该样式保存在名为jquery.custom.css的文件中，并通过<link>将其加载到我的html中（见下文）。您还可以将CSS代码添加到<style>标记内的html中。（<style>.ui-listview ... </style>）。

<link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.from.themeroller.css"> 
<link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile.icons.min.css">
<!-- add your custom css here: -->
<link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.custom.css">

在每个<a>类<li>中提供了第一个nolink-a元素：

<ul data-role="listview" data-split-theme="a" data-inset="true">
  <li>
    <a class="nolink-a">This is your text which doesn't appear as a link</a>
    <a href="/your/link/target/for/the/button/on/the/right"></a>
  </li>
</ul>

如果您使用多个主题（-a，-b，...），请随时根据需要创建更多nolink-x个样式。如果您仍然只使用一个，则还可以跳过-a并调用元素nolink。

更新：为什么不在stackoverflow上创建我的第一个小提琴：http://jsfiddle.net/dc3re3L2/：）

没有第一个<a> tag?</a>的拆分按钮列表视图

2 个答案: