2

私は jquery mobile と Phonegap の初心者です。どこか間違っている場合は修正してください。

home.html、menu.html、orders.html、reservation.html、about.html の 5 つの HTML ページを持つアプリケーションを開始しました。

共通の JavaScript 関数を保持するこれらすべての html ファイルで共有される共通の JavaScript ファイル script.js を作成しました。また、デフォルトでそのページが必要なため、homeactivity に menu.html を追加しています。

ここで、ページがユーザーに表示された後に実行する必要がある 5 つのページごとに異なるコードを持つ init() 関数を実行する必要があります。

jquery mobile と Phonegap のドキュメントから、これらはページの読み込みに関連するイベントです。

mobileinit、pagebeforecreate、pagecreate、pageinit、pagebeforeshow、pageShow、onDeviceReady

私の理解のために、jquerymobile.js をロードする前に、5 つの html ファイルすべてと共通の JavaScript ファイルにこのコードを追加しました。だから私の各htmlファイルの頭は次のようになります:

     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
     <script type="text/javascript">
         document.addEventListener("deviceready", onDeviceReady, false);

     //reservation.html is replace by relative file name in each diff file
     function onDeviceReady() {
         // Empty
        console.log('ondeviceReady function on reservation.html');
     }

     $(document).bind("mobileinit", function(){
         //apply overrides here
         $.mobile.defaultPageTransition = 'none';
     });

     $(document).bind('pagebeforecreate',function(){
         console.log('reservation.html pagebeforecreate triggered');
     });


     $(document).bind('pagecreate',function(){
         console.log('reservation.html pagecreate triggered');
     });

     $(document).bind('pageinit',function(){
         console.log('reservation.html pageinit triggered');
     });

     $(document).bind('pagebeforeshow',function(){
         console.log('reservation.html pagebeforeshow triggered');
     });

     $(document).bind('pagebeforehide',function(){
         console.log('reservation.html pagebeforehide triggered');
     });

     $(document).bind('pageshow',function(){
         console.log('reservation.html pageshow triggered');
     });

     $(document).bind('pagehide',function(){
         console.log('reservation.html pagehide triggered');
     });

     $(document).bind('pagebeforeload',function(){
         console.log('reservation.html pagebeforeload triggered');
     });

     $(document).bind('pageload',function(){
         console.log('reservation.html pageload triggered');
     });
   </script>
   <script type="text/javascript" charset="utf-8" src="js/script.js"></script>
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

アプリケーションを開始したとき、console.log は次の順序になっています。

   menu.html - pagebeforecreate
   script.js - pagebeforecreate
   menu.html - pagecreate
   script.js - pagecreate
   menu.html - pageinit
   script.js - pageinit
   menu.html - pagebeforeshow
   script.js - pagebeforeshow
   menu.html - pageShow
   script.js - pageShow
   menu.html - onDeviceReady
   script.js - onDeviceReady

これは私の予想通りです。しかし、home.html (各ファイルにリンクされた 5 つのファイルすべて) に移動すると、問題が発生し、console.log は次のようになります。

   menu.html - pagebeforeload
   script.js - pagebeforeload
   menu.html - pagebeforecreate
   script.js - pagebeforecreate
   menu.html - pagecreate
   script.js - pagecreate
   menu.html - pageinit
   script.js - pageinit
   menu.html - pageload
   script.js - pageload
   menu.html - pagebeforehide
   script.js - pagebeforehide
   menu.html - pagebeforeshow
   script.js - pagebeforeshow
   menu.html - pagehide
   script.js - pagehide
   menu.html - pageShow
   script.js - pageShow
   menu.html - onDeviceReady
   script.js - onDeviceReady

各ページからページ イベントを削除し、外部 JavaScript ファイルにpageShowイベントを追加してinit()関数を呼び出し、各 html ファイルにページ固有の init()関数を定義してから、各ページのヘッダーに外部 Javascript ファイルを追加しました。それでも、別のページに移動するたび に、homeactivity に追加されるmenu.html の init() 関数のみが実行されます。

したがって、ここでは home.html のイベントはトリガーされません。ページ固有の JavaScript は、ページが表示された後にのみ実行する必要があります。私が間違っているところを助けてください。

4

0 に答える 0