5

私は jQuery Mobile を使用していて、このpopup方法を使用したいと考えていました。以前はすべてが機能していましたが、コードをリファクタリングする必要があるときに何かがうまくいかず、今ではこれを長い間見てきたため、「木には木」が本当に見えません。したがって、私のアプリケーションでは、テスト ページを作成し、そこからすべての JS と CSS と HTML を削除したため、荒削りではあるがクリーンなページが作成されました。私のコードが原因で競合が発生した場合に備えて、JQuery の例を追加し、ホストされているスクリプトへのリンクを追加しました...しかし、それでも私の問題は残ります...ポップアップに使用される DIV は '最初は隠れていて、ボタンをクリックしても何も起こりません... 私は本当にこれに取り組んでおり、本当に単純で明白な何かを見逃していると確信しています (おそらく、15 分間コーヒーを飲みに行く必要があります)。 ..

ここにコードがあります

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>

<a href="#basic" data-rel="popup" data-role="button">Default popup</a>
<div id="basic" data-role="popup" class="ui-content">
  <p>I am a default popup</p>
</div>

<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div id="transitionExample" data-role="popup" data-transition="flip">
  <p>This is some text for the transition example</p>
</div>

</body>
</html>

これは Firefox のスクリーンショットです (テスト デバイスにデプロイする場合も同じです)。

ここに画像の説明を入力

私は何を間違っているのですか... 感情的な瞬間がすぐに来るのを感じることができます...

4

1 に答える 1

1

ポップアップウィジェットが正式にリリースされたとは思いません。おそらく、あなたが使用するつもりだったのはダイアログですか？

ポップアップダイアログを使用する場合は、正しいバージョンのJQMにリンクする必要があります。さらにui-content、ドキュメントからdivにクラスを配置する必要はないと思います。

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.<p>
</div>

ダイアログで使用する場合は、マークアップが少しずれています。リンク/ボタンは独自のページにあり、ダイアログは独自のdivにある必要があります（つまり、リンクのあるページにネストされていない）。

これが修正されたマークアップです

<div data-role="page">
<a href="#basic" data-rel="dialog" data-role="button">Default popup</a>

<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="dialog">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="dialog">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="dialog">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="dialog">Slide down</a>
</div>

<div id="basic" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div  data-role="content" >
<p>I am a default popup</p>
</div>

</div>

<div id="transitionExample" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div data-role="content">
  <p>This is some text for the transition example</p>
</div>

</div>
于 2012-07-10T13:29:27.890 に答える