在JQuery Mobile中个性化ListView项目

Question

有没有办法个性化ListView项目，如图中所示，我想添加2个按钮（图片中的1和2），我想删除空白区域（图片中的3）

这是我的列表视图项的代码

<li data-icon="false"><a href="index.html">
  <img src="images/bureau.jpg">
  <h2>Avery Walker</h2>
  <p><strong>Re: Ce soir dîner</strong></p>
  <p class="ui-li-aside"><strong>50</strong>£</p>
  <p class="ui-li-count"><strong>5</strong></p>
</li>

如果你有任何想法，请告诉我，提前谢谢

Answer 1

您可以使用CSS和绝对定位来根据需要放置按钮。我已经将一个myCustomUL类分配给listview，然后在listitems中，我添加了一个绝对定位的div和一类cust-btns。 div包括向上和向下按钮以及计数。

<ul data-role="listview" data-inset="true" class="myCustomUL">
    <li data-icon="false"> 
        <a href="index.html">
            <img src="http://lorempixel.com/80/80/food/1/" />
            <h2>Avery Walker</h2>
            <p><strong>Re: Ce soir dîner</strong></p>
            <p class="ui-li-aside"><strong>50</strong>£</p>                     
        </a>
        <div class="cust-btns"> 
            <a href="#" class="ui-btn ui-btn-inline ui-icon-carat-u ui-btn-icon-notext ui-corner-all">Icon only</a>
            <p class="ui-li-count"><strong>5</strong>
            </p> <a href="#" class="ui-btn ui-btn-inline ui-icon-carat-d ui-btn-icon-notext ui-corner-all">Icon only</a>
        </div>
    </li>
</ul>

这是CSS。第一条规则会影响文本与右侧按钮之间的距离，因此请根据您的喜好进行调整。其余规则放置按钮。

.myCustomUL li > a {
    padding-right: 56px !important;
}
.myCustomUL .cust-btns {
    position: absolute;
    top: 0px; width: 39px;
    bottom: 0px; right: 0px; left: auto;
}
.myCustomUL .cust-btns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 10px;
}
.myCustomUL .cust-btns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 10px;
}
.myCustomUL .cust-btns .ui-li-count {
    top: 50%;
    margin-top: -10px;
    left: 4px;
    right: auto;
}

  

这是 DEMO