問題タブ [jquery-mobile-popup]

私が持っているもの

jQuery Mobile 1.4.4 を使用しています。「ログアウト」と「アカウント設定」の間を移動するための小さなポップアップを開く各ヘッダーに歯車ボタンを追加しました。

私がしたいこと

各ページに同じコードを使用して、クリックされたすべてのページにこのポップアップを表示したい

問題

ホームページ (ページ A と呼びます) には、この歯車ボタンがあります。クリックすると、ポップアップが表示されます。次に、アカウント設定をクリックします (ページ B と呼びます)。ページ B が読み込まれると、ギアも表示されますが、ページ A のようにポップアップが開きません。ページ Bを更新すると歯車のポップアップは機能しますが、(ホーム ボタンを使用して) ページ A に戻ると、更新するまで歯車は機能しなくなります。

説明されているシナリオ状況のビデオ: http://screencast.com/t/34ZrYyc4Rp2T

コード

ヘッダーとポップアップ html のみ (両方のページで同じ)

起こっていると思うこと

この問題は、ポップアップの ID が同じである可能性があることを読みましたか? これらは 2 つの異なるページであるため、意味がありません。

ポップアップが<div role="page">

lapieuvreの問題（手元にある同様の問題への返信）は、まったく同じシナリオです：https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page

どんなフィードバックでも大歓迎です

Jquery Mobileのポップアップ用のid popupBasicを持つdivがあります

ボタンをクリックしてポップアップを開くには、btnViewPopup次のコードが使用されます。

現在の実装

1. 画像リストのラジオボタンリストがあります。
2. いずれかを選択すると、その画像 URL がローカル ストレージに保存されます。
3. View ボタンをクリックすると、imgView のsrcにlocalstorage の値を設定します。
4. Call Popup("Open")

私の問題は、[表示]ボタンをクリックしたときに初めて表示される画像が小さく、右中央に配置されていることです。次回別の画像または同じ画像を開くと、期待どおりに完全に表示されます。画像ごとに異なる可能性があるため、画像の高さと幅は指定しませんでした。

私は何を間違っていますか？

前もって感謝します

ポップアップのあるページが 2 つあると、奇妙な動作をするように見えます。

私が見ていることを示すために、この簡単な例を作成しました

そして私はこのJSでそのコードをバックアップします

両方のページは非常によく似ているため (ID のみを変更してカット アンド ペーストした)、同じように動作することを期待していました。画像をクリックすると、警告の後にポップアップ画像が表示されます。両方のページが同じであることが期待されます。画像をクリックすると、アラートが表示され、ポップアップが表示されます。

これが私が経験していることです。

作業ページにアクセスします (ホームから開始して「作業ページ」に移動します)、すべてが期待どおりに機能します。サムネイルをクリックすると、アラートとポップアップ イメージが表示されます。

次にブラウザをクリックしてホームページに戻り、「壊れたページ」（「作業中のページ」の複製）をクリックすると、動作が異なります。画像をクリックすると、最初に 2 つのアラートが表示され (なぜですか?)、次にポップアップ画像が表示されません。

IIをリロードして順序を逆にします（つまり、「壊れたページ」から始めます）同じパターンが表示され、壊れたページが機能し、作業中のページが壊れています（マークアップでもJSでもないことを示唆しています）

私は何か間違ったことをしていますか？

私のアプリには、アプリ内の任意のページに表示されるポップアップがあり、ユーザーが長時間非アクティブな場合にログアウトします。これは JQM 1.4.2 で機能していましたが、1.4.5 にアップグレードしたところ、ページが更新されていないページにはポップアップが表示されません。

最初は #id を使用してすべてのポップアップを呼び出していたので、クラスを使用するように変更すると問題が解決すると思っていましたが、そうではありませんでした。

コード: (各ページに基本的なポップアップを表示するように簡略化)

すべてのファイルに含まれるポップアップ ページ:

この例では、各ページでこれを使用してポップアップを開こうとしています:

つまり... ページ 1 - クリック リンクのポップアップが開きます - ページの変更 - ページ 2 (以降) - クリック リンクのポップアップは開きませんが、コンソールで実行されているコードを確認できます。

これを修正する方法についてのアイデアはありますか? ありがとう

サイトにポップアップ div のあるページがあります。

.load メソッドを使用して、ポップアップに外部 HTML ファイルを表示します。

それだけでうまくいきます。

ロードするファイルが見つからない場合にエラーメッセージとして機能するポップアップのコンテンツをリセットする「popupafterclose」イベントのハンドラーがあります。

これも問題なく動作します。

機能しないのは、2 番目のハンドラーです。

これのポイントは、すべての外部リンクを強制的に新しいウィンドウで開く関数を呼び出すことです。その関数は、他の場所で呼び出されたときに機能します。popupafterclose ハンドラーは、期待どおりにトリガーされ、関数は適切に実行されます。pagecontainerload ハンドラーは決してトリガーされず、外部リンクは私が思っていたように処理されません。

助けていただければ幸いです。

ポップアップ内に 3 つのタブがあります。どのハイパーリンクがクリックされるかによって、特定のタブをアクティブにするために移動したいと思います。

必須ではないコードをすべて取り除いたので、ハイパーリンクに「ui-btn」クラスが適用されていると失敗するようです。リンクのスタイルが設定されていない場合は、正常に機能します。 正しいタブが選択されますが、ナビゲーション バーのリンクがアクティブ/強調表示されません。

誰もこれに光を当てることができますか? または簡単な回避策。

JSFiddleデモをご覧ください

HTML

Jクエリ

下の画像のように、JQMポップアップを水平サブメニューとして使用しています。最初の垂直ボタンをクリックすると、サブメニューが開きます。

メニュー ボタンのサイズは固定されていませんが、パーセンテージで設定されています。たとえば、このボタンはビューポートの高さに適応するためです (レスポンシブ リストビューの JQM デモのように)。

現在、ポップアップをメインの垂直メニューの右側に左マージンを付けて配置するのに問題があります。デフォルトでは、ポップアップが原点と重なるためです。

編集: これはJavascriptの可能な実装です:

しかし、マークアップのデータ位置を使用する CSS ソリューションがあるかどうかを尋ねています。

「偽の原点」として機能する垂直ボタンの近くに width=200% の非表示の div も試しました。例を次に示します。

プランカー: https://plnkr.co/edit/qmGhNqgww2mkKX1QywLH?p=preview

ただし、ポップアップの位置はその中心に対して相対的であるため、サブメニュー内のアイテムの数を常に知る必要があります。

原点からのパーセンテージで特定のオフセットでJQMポップアップを配置できるかどうか誰かが知っていますか?