jQuery移动列表视图分割按钮,仅限右按钮

时间:2013-03-08 10:37:34

标签: listview jquery-mobile split-button

查看此示例http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/ 部分:拆分按钮

在该示例中,左右两部分都是按钮。 如何只有右侧部分是按钮(左侧只是一个基本的只读文本)?

谢谢!

1 个答案:

答案 0 :(得分:3)

解决方案

以下是官方拆分按钮示例中的一个工作示例:http://jsfiddle.net/Gajotres/nwg5b/

您需要做的是从第一个标签中删除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 )。

复制其内容并将重要内容放在每一行的末尾。在这个新的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;
}

从中创建新类并将其放在第一个标记内,如下所示:

<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>

就是这样。

更多信息

如果您想自己学习如何进行此类更改,请查看 article ,它将教您如何自行完成此操作。