jQuery 移动列表视图拆分按钮，仅右键 [英] jQuery mobile listviews split buttons, right button only

问题描述

看这个例子 http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/部分:拆分按钮

see this example http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/ Part: Split buttons

在那个例子中，左右部分都是按钮.我怎样才能让右侧部分是按钮(左侧只是一个基本的只读文本)?

In that example, both the left and right part are buttons. How can I get that only the right part is button (the left is just a basic read-only text)?

谢谢！

推荐答案

解决方案

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

您需要做的是删除 href="#";从第一个标签:

What you need to do is remove href="#" from a first a tag:

改变这个:

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

Finally you will need to dig inside jQuery Mobile css. Think about theme you want to use (theme c is used in the example). Open jQuery Mobile css and search for this class: .ui-btn-up-c where c is theme c (for example if theme a is used then search for .ui-btn-up-a).

复制它的内容并在每一行的末尾加上重要的.在这个新的 css 块的末尾添加这一行:

Copy its content and put important at the end of every line. At the end of this new css block add this line:

cursor: default !important;

并根据需要命名(例如:readonly-state-c).它应该看起来像这样:

and name it as you want (In example case it is: readonly-state-c). It should all look like this:

.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;
}

从它创建一个新类并将它放在一个标签中，如下所示:

Create new class from it and put it inside first a tag, like this:

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

就是这样.

如果您想学习如何自己进行此类更改，您应该查看此文章，它会教你如何自己做.

If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.

这篇关于jQuery 移动列表视图拆分按钮，仅右键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！