2012-03-28 15 views
1

私のJQMページの1つに「ページ内」ダイアログボックスを表示するためのやや滑らかなソリューションを探しています。ダイアログポップアップは、ユーザーがフォームフィールドに入力するのに役立つ「参照」であるため、ページを離れることを避けようとしています。私は実際のページを離れたくないので、ユーザーが既に入力した他の情報を失わないようにします。jQuery Mobile - "ページ内"ダイアログポップアップ

私の最初の試みは、サイトの他の部分でポップアップメニューを使用するsimpledialog2プラグインを使用していました。基本的なリンクではうまくいきますが、長いリストでは本当に厄介です。それはサイジングと特にスクロールには非常に限られていると感じています。

私は、長いマルチセレクションのためのダイアログポップアップのビルトインJQM実装をやや気に入っています。あなたにアイデアを与えるには、このを見てくださいjsfiddle

誰もこのダイアログポップアップがどのように実装されていると私は何らかの方法で同じメソッドを呼び出すことができます知っていますか?そうでない場合は、そのような「ページはめ込み」ダイアログのために誰かがプロの代替案を知っていますか?

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

PS:JQMで複数ページのテンプレートを使用することはできません。これは、Webアプリケーションとして構築されているため、マルチページテンプレートがサポートしていない個々のページのAJAX読み込みに依存しているためです。 。

答えて

5

jsfiddleで示したダイアログは、自分のページで簡単に呼び出すことができます。アンカータグ<a href="dialog.html">dialog</a>にdata-rel = "dialog"を入れることも、data-role="dialog"をページコンテナに追加することもできます。ここでは例

dialog.html

<div data-role="dialog"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="content"> 

    </div> 
    <div data-role="footer"> 
     <h1>Footer</h1>   
    </div> 
</div>​ 

はまた、彼らは、私はあなたがJQMのV 1.2で探していると信じページダイアログで生産することを計画していることに注意しています。ここにはhttp://filamentgroup.com/tests/popup/docs/pages/popup/index.htmlのプレビューがあります。だから私はあなたの本当の患者があなたの探しているものを正確に得るかどうかは確かです。

+1

に私は新しいページとしてダイアログを呼び出すことができます知っているが、すべてのデータが中に入るとそれは私が避けたいと思う現在のページを、(去りますフォームが失われる)。しかし、あなたの答えの2番目の部分はまさに私が探していたものです。私は待つ時間がありませんが、一時的な解決策を実装し、JQM 1.2のリリースを待つだけです。情報に感謝します。 – Steve

+1

page-containerにdata-dom-cache = "true"を追加することによって、前のページをdomに保持することができます。あなたはまだあなたのフォームを更新するためにJavaScriptを使用することができますそのように。 – codaniel

+0

なぜダイアログがポップアップのように機能しないのか分かりません。ページを変更する必要がないため、すべてのユーザーフォームのデータが失われるため、ずっと簡単です。 – DavidVdd

0

ここでは、ダイアログではなくのポップアップがである必要があります。

<div data-dismissible="false" data-role="popup" id="myPopup"> 
    <span>Content...</span> 
</div> 

今javascriptのコール、

$('#myPopup').popup().popup('open'); 
関連する問題