jQuery的移动列表视图拆分按钮,右按钮只(jQuery mobile listviews spl

2019-07-21 05:38发布

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

在这个例子中,左边和右边部分是按钮。 我怎样才能得到,只有右边是按钮(左边是只是一个基本的只读文本)?

谢谢!

Answer 1:

下面是来自官方的拆分按钮的例子做了一个工作示例: 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(例如,如果主题是用来然后搜索的.ui-BTN-UP-a)中

复制其内容,并把重要的每一行的末尾。 在这个新的CSS块的末尾添加一行:

cursor: default !important;

并根据需要将其命名为(在例子情况下,它是:只读状态-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>

那就是。

更多信息

如果你想学习如何做这样的自己的变化,你应该检查这个文章 ,它会教你如何自己做到这一点。



文章来源: jQuery mobile listviews split buttons, right button only