jQueryMobile -.jsと.htmlを含める

StackOverflow https://stackoverflow.com/questions/4643661

  •  09-10-2019
  •  | 
  •  

質問

私のアプリケーションでは、コンテンツを表示するためにHTMLページ以上を使用しており、各ページには独自の.jsファイルがあります。 HTMLページを呼び出すと、.jsファイルも含まれています。 .JSでは、私は使用しています $('div').live('pageshow',function(){}). 。からHTMLファイルを呼び出しています。js(using $.mobile.changePage("htmlpage")).

私の問題：考えてみてください、私は2つのHTMLファイルを持っています。 second.htmlファイルはone.jsで呼び出されます。 Second.htmlを表示すると、その時間1つが再びリロードされます。私はアラート「One.js」から「Second.js」を取得しています

one.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

Second.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

Second.js

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

注：次のファイルがリロードされている場合は、forth.htmlを表示すると（one.js、second.js、3番目、js、およびfourth.js。ただし、4番目のjsだけが必要です）。 $ .document.ready（function（）{}）を使用しようとしました。しかし、その時は.JSは電話をかけませんでした。

役に立ちましたか？

解決

ページイベントは、ページがロードされるたびに発射するJavaScript機能にバインドされます。 2番目のページをロードすると、実際に作成する必要のない別のページフル機能を作成します。

これは、これを一度定義した場合にのみ、問題を解決するのに役立ちます。

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

ページを移行すると、これはどのページが表示されたか、どのページが隠されていたかについて警告します。

素晴らしいリソース：
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

他のヒント

編集されたOERSコメント（申し訳ありませんが、ここで初心者）：

現在のHTMLページに基づいてJSファイルをロードするための代替アプローチは次のとおりです

アプリケーションのすべてのページに含まれているが、現在のページを検出してからJavaScriptファイルをDOMに挿入する「ブートストラッパー」ファイルにすぎない単一のスクリプトファイルを持っています。

この関数はJavaScriptを挿入します：

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

そして、このコードは現在のページを検出します

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

参照リンク

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top