1

動的に生成された戻るボタン (ネストされたリストなど) からテキストを削除して、この静的ヘッダーのようなものを実現したいと思います (矢印のみが表示されます)。

<header data-role="header">
    <h1>Header</h1>
    <a data-rel="back" data-iconpos="notext" data-icon="arrow-l">Back</a>
</header>

このソリューションは適切に機能していないため、

$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = "";
}

私はこれを試しましたが、うまくいきません：

$(document).bind('pagebeforecreate', function(){ 
    $("a:jqmData(rel='back')").jqmData("iconpos", "notext");
});

間違いはどこですか？

編集
質問を簡単にするために、ネストされたリストのボタンのテキストを削除したいと思います。例: http://jsfiddle.net/GV2wN/

4

2 に答える 2

1

戻るボタンのテキストを設定する場合は、ページ要素でdata-back-btn-text = "previous"属性を使用するか、ページプラグインのオプションを使用してプログラムで設定できます。

ソース： http： //jquerymobile.com/test/docs/toolbars/docs-headers.html

$.mobile.page.prototype.options.backBtnText = "Previous";

（「前へ」を表示したいテキストに置き換えます。

または、次のようにdivにを追加しdata-back-btn-text="Previous"て、ページごとにこれを行うこともできます。data-role="page"

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">

更新（1）

申し訳ありませんが、あなたがすでに上記の方法を試したことを見逃しました。

解決策：リンクに挿入するdata-iconpos="notext"と、data-role="button"以下に示すように、ボタンのテキストなしでアイコンが生成されます。

<a href="index.html" data-icon="arrow-l" data-role="button" data-iconpos="notext">Back</a>

これが実際のjsFiddleの例で、Header要素にボタンを配置しています：http：//jsfiddle.net/3q28f/

于 2012-09-11T13:50:17.973 に答える
0

レンダリング後にボタンのcssを変更するため、あまりきれいではありませんが、これを追加するとうまくいくようです：

$(document).on('pagechange', function () {
    $.mobile.activePage.find(".ui-header a.ui-btn-left").addClass("ui-btn-icon-notext");
    $.mobile.activePage.find(".ui-header a.ui-btn-left").removeClass("ui-btn-icon-left");
});​

これが更新されたフィドルです。

ボタンがレンダリングされてからマークアップが変更されるまでに遅延が発生することがあるため、バインドするより適切なイベント (クリック イベントなど) を探すことをお勧めします。

于 2012-09-12T13:35:43.613 に答える