3

jQuery Mobile を使用して iPad アプリを開発しています。クリックするとポップオーバーが表示されるボタン付きのツールバーが必要です。いくつかの検索の後、このjQuery popover implementationを見つけました。正常に動作しますが、ヘッダーやコンテンツのスタイリングはありません。次に、いくつかの調整を行い、次のような通常の jQuery ページとなるコンテンツのみを設定することにしました。

<div id="popover-add-project" data-role="page" data-url="popover-add-project">
  <div data-role="header" data-position="fixed">
    <h1>Add New Project</h1>
  </div><!-- /header -->      
  <div data-role="content">
    <p>project form to be inserted here</p>
  </div>
</div>

問題は、空のポップオーバーが表示されることです。簡単なコードがここにあり、webkit ブラウザー (Safari と Chrome でのみテストしました) で index.html を開き、[追加] ボタンをクリックして実行できます。

jquery.popover.js には、ポップオーバー関連のコードが含まれています。

app.js は、[追加] ボタンのポップオーバーを作成します。

どんな助けでも大歓迎です。

ありがとう。

4

3 に答える 3

6

ポップオーバー内のコンテンツが必要な場合は、@PhillPaffordが言及しているように次のポップアップウィジェットを使用する必要があります。

ポップオーバー内の全ページが必要な場合は、マルチビューを試すことができます。これは、ほぼ開発が完了しています。

これが私のテストページの1つで、ポップオーバーもあります（右上）。

ここに画像の説明を入力してください

ポップオーバーはパネルであり、JQM pageContainer changePageオプションを使用して、パネルのナビゲーションとJQMおよびブラウザーの履歴への統合を可能にします。

私はプラグインのポップオーバーのみのバージョンを実行していないので、現在、次のようにページを設定する必要があります。

<div data-role="page" id="YOUR_ID" data-wrapper="true"> 

    <div data-role="panel" data-id="my_main_panel_id" data-panel="main">

         <div data-role="page" id="page_A1" data-show="first">

            <div data-role="header" data-position="fixed">
               <h1>Local Header</h1>
               <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div">
                    <a href="#" data-transition="pop" data-role="button" data-panel="pop_one" data-icon="info" data-iconpos="left" class="toggle_popover">pop1</a>
               </div>
            </div>
            <div data-role="content"></div>
         </div>
      </div>

      <div data-role="panel" data-id="pop_one" data-panel="popover" data-triangle="top" class="popover1">
           <div data-role="page" id="page_D1" data-show="first">
               <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop</h1>
               </div> 
               <div data-role="content"></div>
            </div>
    <div data-role="page" id="page_D2">
                <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop internal page</h1>
                </div>
                <div data-role="content"></div>
           </div>
       </div>
   </div>

したがって、ポップオーバーを使用するには、次のことを行う必要があります

  • プラグインを初期化するには、ページにdata-wrapper="true"を追加します
  • 全幅のメイン背景パネルを使用する
  • パネルには、ロール= data-role = "panel"、タイプdata-panel = "main | mid | menu | popover"、およびdata-id data-id ="your_panel_name"が必要です
  • 各パネルの1ページにはdata-show="first"が必要です。これがないと、パネルは空白になります
  • ラッパーページ内に必要な数のポップオーバーパネルを追加できます
  • ポップオーバー内にネストされたページをいくつでも追加できます
  • ネストされたページは、ページをロードするときに「オンボード」である必要はありません。リンクまたはchangePage呼び出しを介して、JQMのようにそれらを取り込むことができます。

  • パネル内のページにページをプルしたり、ページからリンクしたりするには、次のようにページを変更します。

    $.mobile.changePage('#pop_two', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_name")') });

  • または、データパネルが指定されたリンクを使用する：

    <a href="#pop_two" data-panel="your_panel_name">Button</a>
  • 最初のページの読み込み時にすべてのポップオーバーページを含める必要はありません。通常のJQMのようにそれらを引き込むことができ、ユーザーが離れるか、ポップオーバーが閉じると、それらは再び削除されます。
  • ポップオーバーを切り替えるには、 toggle_popoverクラスとdata-panel = "your_panel_name"のトグルボタンが必要で、プラグインに開くポップオーバーを指示します。
  • スマートフォンでは、ポップオーバーはフルスクリーンページになります

プラグインにはまだいくつかのバグがあり、4つの小さな調整（最も重要なのはpageContainerをJQM履歴に追加する）を備えたカスタムJQMバージョンが必要ですが、それ以外は問題なく機能しています。

于 2012-06-02T13:14:08.763 に答える
5

data-role="page"attribute は css プロパティdisplayを に設定しnoneます。display: blockのスタイル属性の中に追加します#popover-add-project。

<div style="display: block" id="popover-add-project" data-role="page" data-url="popover-add-project">

于 2012-06-01T20:18:41.130 に答える
5

次の jQM イテレーション ( 1.2 ) ポップアップ機能を試してみることができます

ここに画像の説明を入力

于 2012-06-01T20:36:16.830 に答える