0

我需要一个右侧的按钮 - 在<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>

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

这是我到目前为止所拥有的 jsfiddle：http: //jsfiddle.net/MY8Tg/

我怎样才能使它成为一个拆分按钮，同时保持左侧的结构并且不使左侧成为任何东西的实际链接，从而保持其他链接正常工作？

我需要它像拆分按钮一样在中间对齐。为什么这不可能开箱即用？

4

2 回答 2

2

用 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

于 2014-01-27T16:48:13.030 回答
1

灵感来自 Gajotres 在jQuery mobile listviews split buttons, right button only中的回答，我这样做了：

  • 检查了谷歌浏览器开发者工具中的元素

  • 根据该信息，创建了以下样式。如果您使用自己的主题，请务必使用正确的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将其加载到我的 html中。<link>您还可以将 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>

nolink-x如果您使用多个主题（-a、-b、...） ，请在需要时随意创建更多样式。如果您只使用一个，您也可以跳过-a并调用元素nolink。

更新：为什么不创建我的第一个小提琴以及我在 stackoverflow 上的第一篇文章：http: //jsfiddle.net/dc3re3L2/ :)

于 2015-05-12T07:35:45.177 回答