jQuery мобильные списки просмотра разделенные кнопки, только правая кнопка

Question

См. этот пример 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 (например, если используется тема 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>

И это все.

Больше информации

Если вы хотите научиться самостоятельно выполнять подобные изменения, ознакомьтесь с этой статьей, в которой вы узнаете, как это сделать самостоятельно.