jquery-mobileを使用してホームボタンを追加するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/4147376

質問

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

注記：このリンクは Firefox/Chrome でのみ有効です

ありがとう。

役に立ちましたか？

解決

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 );

他のヒント

もっと簡単な解決策があります。ヘッダー 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 を環境に適したものに変更することは明らかです。「/」だけを使用しないでください。アプリのデプロイ先が制限されるためです。)

が最初に使用jqmよびアプリケーションと思っているもの"戻る"ボタンのヘッダでのナビゲーションツリーのは深い。使用コアボタンの授業などの"ui-btn-right"や"ui-btn左"な仕上がりに--このボタンひとつです。

ものになっています．特に，基本とない二つのボタンの左側をお使いいただけますので少しカスタム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;
}

こります。

<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 鬼ごっこ。これにより、バックボタンなしでホームページが開きます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top