jQuery Mobile的列表视图按钮分开，右边的按钮只 [英] jQuery mobile listviews split buttons, right button only

问题描述

看到这个例子<一个href=\"http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/\">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 /

Solution

Here's a working example made from the official split button example: 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-了-C 其中c为主题C（例如，如果主题则使用搜索的.ui-BTN-起来-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;

并将它命名为你想（在例子情况下，它是：只读状态-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 Mobile的列表视图按钮分开，右边的按钮只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！