jQuery mobile listviews split buttons, right button only

Question

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

Thanks!

Answer 1

Solution

Here's a working example made from the official split button example: http://jsfiddle.net/Gajotres/nwg5b/

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

Change this:

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

to this:

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

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

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;

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>

And that is that.

More info

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.