logo标签列表

jQuery移动列表视图拆分按钮，仅右侧按钮。

listviewjquery-mobilesplit-button
5
在这个例子中，每个<li>都是一个<a>的包装器，其中包含了该行的所有元素。删除<a>标签。另外你可以使用data-grids。 - Th0rndike
如果我移除<a>标签，CSS就会失效，按钮样式也不再适用。 - tommy-1402
1个回答
3

解决方案

以下是官方分裂按钮示例的工作示例：http://jsfiddle.net/Gajotres/nwg5b/

您需要做的是从第一个a标签中删除href="#"：

将此更改为：

<li><a href="#">
    <img src="../../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>

转换为：

<li><a>
    <img src="../../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>

最后，您需要深入了解jQuery Mobile css。考虑您想要使用的主题（示例中使用了主题c）。打开jQuery Mobile css并搜索此类：.ui-btn-up-c其中c是主题c（例如，如果使用主题a，则搜索.ui-btn-up-a）。
复制其内容，并在每行末尾添加important。在这个新的css块的末尾添加这一行:
cursor: default !important;

并将其命名为您想要的名称（在示例中，它是：readonly-state-c）。应该看起来像这样：

.readonly-state-c {
    background: #eee !important;
    font-weight: bold !important;
    color: #2F3E46 !important;
    text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #ffffff /*{c-bup-shadow-color}*/ !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{c-bup-background-start}*/), to( #f1f1f1 /*{c-bup-background-end}*/)) !important; /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* FF3.6 */
    background-image:     -ms-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* IE10 */
    background-image:      -o-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* Opera 11.10+ */
    background-image:         linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important;   
    cursor: default !important;
}

创建一个新类并将其放置在第一个a标签内，如下所示：

<li><a class="readonly-state-c">
    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>

就是这样。

更多信息

如果你想学习如何自己进行这种修改，可以查看这篇文章，它会教你如何自己完成这个过程。

这个事情很难做，这就是为什么我讨厌使用jQuery Mobile的原因。不过还是感谢你提供的解决方法！ - timbrown
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接