9

1つのhtmlファイルのすべてのページにグローバル（共通）ポップアップを表示するにはどうすればよいですか？
これを試してみます。しかし、動作していません...

<div data-role="page" id="home"></div>
<div data-role="page" id="news"></div>
<div data-role="page" id="details"></div>
<div data-role="popup" id="settings" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"></div>
4

2 に答える 2

22

jQueryMobile1.4.1を使用している場合

ドキュメントによると、body要素の直接の子として宣言すると、同じポップアップを複数のページで再利用できます。その後、ドキュメントの任意のページに表示できます。

<div id="popup-outside-page" data-theme="a">
    <!-- This popup has its theme explicitly defined via data-theme="a"
         because it has no parent from which to automatically inherit
         its theme -->
    <ul data-role="listview">
        <li>Global Menu</li>
        <li><a href="#demo-intro">Intro Page</a></li>
        <li><a href="#other-page">Other Page</a></li>
        <li><a href="#third-page">Third Page</a></li>
    </ul>
</div>
<div id="other-page" data-role="page" data-url="other-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Another Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is another page that can be reached using the links in the global menu.</p>
    </div>
</div>
<div id="third-page" data-role="page" data-url="third-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Third Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is a third page that can be reached using the links in the global menu.</p>
    </div>
</div>

ページの外側でポップアップを定義する場合は、ポップアップウィジェットを自分でインスタンス化するように注意する必要があります。ポップアップはどのページにも表示されないため、早くもDOMReadyでこれを行うことができます。

// Instantiate the popup on DOMReady, and enhance its contents
$( function() {
    $( "#popup-outside-page" ).enhanceWithin().popup();
});

一連のリンクからポップアップを開く場合は、手動で処理する必要があります。これは、data-rel="popup"による自動処理がアクティブなページのポップアップに制限されているためです。

古いバージョンのjQueryMobileを使用している場合

簡単な答えはあなたができないということです。ドキュメントには次のように記載されています。

ポップアップdivは、リンクと同じページ内にネストする必要があります

そのため、ポップアップを表示するすべてのページにコピーして貼り付ける必要がありますが、これは良い解決策とは思えません。

グローバルポップアップのように動作するものが必要な場合は、通常、任意のページから開くことができるダイアログを使用します。

ダイアログ自体はページと同じ構造です。

<div id="diag" data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Info</h1>
    </div>
    <div data-role="content" data-theme="c">
        <h1>Thank you for your time!</h1>
        <a data-role="button" data-rel="back">Ok</a>
    </div>
</div>

そして、プログラムで開くことができます。

$.mobile.changePage("#diag");

または、他のjQueryモバイルページと同じようにボタンをクリックすると、次のようになります。

<a href="#diag" data-role="button" data-rel="dialog" data-theme="a">Open dialog</a>
于 2012-10-21T13:00:42.733 に答える
-2

この応答を見てください

https://stackoverflow.com/a/12092465/591254

jqueryモバイルチームが、使用されているページの外部で定義されたポップアップのサポートを追加するときに役立つプラグインがあります。ライブデモは機能しませんが、ローカルでjqueryjsを置き換えると機能します。

これはjqmリクエストです：

https://github.com/jquery/jquery-mobile/issues/4565

どうやらそれはjqm1.4内に追加することができます

于 2013-04-11T08:58:52.463 に答える