web-dev-qa-db-ja.com

jquery-mobileを使用してホームボタンを追加する方法

デフォルトでは、jquery-mobileは各ページのメインページの後に戻るボタンを追加します。ホームボタンを追加する方法を教えてください。
これが例です： http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html

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

ありがとう。

javascriptjqueryjquery-mobile
18
Ravi Gupta

Jquery-mobile.jsソースコードを変更せずに、私がそれを行うと考える唯一の方法は、独自のナビゲーションリンクをヘッダーに追加することです。独自のリンクを追加すると、自動の[戻る]ボタンが消えるため、2つのリンク（1つは戻る用、もう1つは家用）を作成します。

ページ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 );
22
superfro

より簡単な解決策があります。class="ui-btn-right"を使用してヘッダーdivへのリンクを追加するだけです。これは、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を環境に適したものに変更します。「/」を使用しないでください。これは、アプリをデプロイできる場所を制限するためです。）

23
Duncan Smart
<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 in hrefタグ。これにより、戻るボタンのないホームページが開きます。

1
thomas

最初に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;
}

これがあなたにもっと多くの選択肢を与えることを願っています。

1
Nem Le