18

デフォルトでは、jquery-mobile は各ページのメイン ページの後に戻るボタンを追加します。ホームボタンも追加する方法を知りたいですか？
例を次に示します: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html

注: このリンクは、firefox/chrome にのみ有効です

ありがとう。

4

4 に答える 4

23

より簡単な解決策があります。ヘッダー div にリンクを追加するだけclass="ui-btn-right"です。これは、jQuery Mobile の [戻る] ボタンを左側に自動的に追加できるようにするために不可欠です。他にもいくつかの data-* 属性を使用できるため、次のように組み込みのテーマ アイコンなどを使用できます。

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
           data-direction="reverse">Home</a> 
    </div>
    <div data-role="content">
        ...

(明らかに、ホーム href URL を環境に適したものに変更してください。アプリをデプロイできる場所が制限されるため、「/」だけを使用しないでください。)

于 2011-03-04T11:11:56.920 に答える
22

jquery-mobile.js ソース コードを変更せずに、私が考えられる唯一の方法は、独自のナビゲーション リンクをヘッダーに追加することです。独自のリンクを追加すると、自動の「戻る」ボタンが非表示になるため、戻る用とホーム用の 2 つのリンクを作成します。

ページ 2 と 3 の両方に [戻る] ボタンと [ホーム] ボタンがあり、戻るか直接ホームにジャンプできます。これには、各ページの「ヘッダー」セクションを変更する必要がありますが、インスタンスごとに変更する必要がないため、常に同じ (コピーと貼り付け) ため、それほど大したことではありません。

「ホーム」リンクは右上になります (2 番目のリンクのデフォルトの動作では、右上に配置されます)。

次に例を示します。

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>


<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#secondpage">second page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="thirdpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.  (this is thirdpage)</p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

</body>
</html>

自動的に実行したい場合は、jsをハックすることもできます...

このコードの直後 (縮小されていない jquery.mobile-1.0a2.js の 1084 行目あたり)

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

このような行を追加します。ここで、#firstpage はホームページの ID です。名前で呼び出すことなくホームページを参照する方法が見つかりませんでした。改善してください。やりたくありませんでした / または# だけではうまくいきません... しかし、この方法はうまくいきます

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
于 2010-11-16T15:27:45.693 に答える
1

最初にjqmを使用してアプリケーションを開発したとき、ナビゲーションツリーが深いため、上部ヘッダーにホームボタンと戻るボタンの両方が必要でした。「ui-btn-right」や「ui-btn-left」などのコアボタンクラスを使用すると、両側に1つのボタンだけが必要な場合に効果的です。

しかし、あなたが私のようで、左側に2つのボタンが必要な場合は、小さなカスタムCSSと配置を使用して、必要な場所に配置できます。また、ボタンをカスタムヘッダークラ​​スでラップし、CSSを使用してヘッダーのタイトルを制御しました。各ボタンを異なるz-indexに配置する必要があります。そうしないと、各ボタンが他のボタンと競合します。

これはヘッダーです：

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

これはCSSです：

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

これがあなたにもっと多くのオプションを与えることを願っています。

于 2011-08-02T12:59:33.797 に答える
1 
<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
        </div>
    </div>

rel=externalあなたはあなたのhrefタグで使用することができます。これにより、戻るボタンなしでホームページが開きます。

于 2011-03-22T16:38:59.880 に答える