0

私の jQuery Mobile (1.3.2) Web サイトは、URL ハッシュ値のパラメーターを使用して、表示するページ (<div data-role="page">単一の HTML ファイル内) を決定します。

私は現在使用しています：

<body onload="myns.initialize()">

wheremyns.initialize()は URL ハッシュ値を解析し$.mobile.changePage()、適切な (「内部」) ページに変更するために使用します。

myns.initialize = function() {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    $.mobile.changePage("#menu", {                  
      transition: "none"                            
    });                                             
  }                                                 
}

これは機能しますが、最善の方法ではないと思います。

現在のデフォルト ページ (<div data-role="page">唯一の HTML ファイルの最初のページ) は、ハッシュのパラメーターに応じて、可能なページの 1 つです。

デフォルト ページの静的 HTML タグは、ヘッダー div (現時点ではページ間で共通のタイトルと、そうでないいくつかのアイコンを含む) と空のコンテンツ div (動的に入力されます。ハッシュ パラメータ):

<div data-role="page" id="action">                             
  <div data-role="header" data-theme="b" data-position="fixed">
    <a href="#menu"                                            
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="bars"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Actions</a>                        
    <h1>Title</h1>                        
    <a href="#"                                                
      onclick="myns.showInfo()"                                 
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="info"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Information</a>                    
  </div>                                                       
  <div data-role="content" id="content">                       
  </div>                                                       
</div>

ハッシュ パラメータが、このデフォルト ページの代わりに別のページを表示する必要があることを示している場合は、myns.initialize()その適切なページに変更されます。

これは機能しますが、エレガントではありません。ヘッダー アイコン (既定のページに固有) が一時的に表示されてから消えることがあります (最終的なページにそれらのヘッダー アイコンが含まれていない場合)。

次のように、ほとんど空白の新しいデフォルト ページを指定してみました。

<div data-role="page" id="default-page">                       
  <div data-role="header" data-theme="b" data-position="fixed">
    <h1>Title</h1>                        
  </div>                                                       
  <div data-role="content"/>                                   
</div>

元の既定のページの前に、しかし - ここで、私の現在の作業アプローチが実際には深刻な欠陥がある可能性があり、あまりにも浅い理解に基づいている可能性があることに気付きました -changePage()呼び出しmyns.initialize()(changePage()以前はデフォルト ページ) が適切なページに変更されなくなりました。呼び出しが発生することを確認しましたが (それらの呼び出しの前後に関数changePage()を一時的に挿入する鈍器によって)、ページの変更は実際には発生しません。alert()ほとんど空白のデフォルト ページが残ります。したがって、今のところ、より良い回答が得られるまでの間、「デフォルト ページは最終的な候補ページの 1 つです」というアプローチに戻りました。

ハッシュパラメータに応じて適切なページになるようにデフォルトページを動的に調整できると思いますが、もっと簡単な解決策を望んでいます。候補ページのいくつかは多かれ少なかれ静的です (つまり、スクリプトを介して動的に注入する変数の詳細を含む「プロ フォーマ」です)。これらのページに「移動」できるようにしたいと考えています (たとえば、DOM を操作してそれらのページの HTML をデフォルト ページにコピーする特注のコードを記述するのではなく)。

数時間後に追加: 私はその新しい既定のページについての予感で目が覚めました。具体的には、この空の div 要素:

<div data-role="content"/>

開始タグと終了タグを明示的に指定するように変更しました。

<div data-role="content"></div>

これで問題は解決しました。私の今のchangePage()呼び出しは機能します。myns.initialize()

この新しいほぼ空白のデフォルト ページにより、ヘッダー アイコンのちらつきの問題が回避されます。それでも、それはエレガントではありません。より良い答えが欲しいです。

4

1 に答える 1

1

pagebeforechangeナビゲーションの変更を処理するのに最も適したイベントにバインドしてみてdata.toPageください。表示するページに値を設定するだけです。

$(document).on("pagebeforechange", myns.initialize);

myns.initialize = function(e, data) {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    data.toPage = $('#menu');                            
  }                                                 
}

注: ページの読み込み時にのみこの関数が必要な場合は、ハンドラーを 1 回だけ実行するone()代わりに使用できます。on()

于 2013-09-06T06:12:07.607 に答える