5

この例を参照してくださいhttp://view.jquerymobile.com/1.3.0/docs/widgets/listviews/ Part: 分割ボタン

その例では、左と右の両方の部分がボタンです。右側の部分だけがボタンになるようにするにはどうすればよいですか(左側は基本的な読み取り専用テキストです)。

ありがとう！

4

1 に答える 1

3

解決

公式の分割ボタンの例から作成された実際の例を次に示します: http://jsfiddle.net/Gajotres/nwg5b/

あなたがする必要があるのは、最初の a タグから 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>

そして、それはそれです。

より詳しい情報

この種の変更を自分で行う方法を学びたい場合は、この記事をチェックしてください。自分でこれを行う方法を教えてくれます。

于 2013-03-08T11:06:19.253 に答える