2013-05-13 8 views
5

jquery mobileのページ間でパラメータを渡す正しい方法は何ですか。 jquery mobileのQ &では、プラグインに関するいくつかの提案があります。それは必須ですか?私に正しい方法を教えてください。誰にも具体的な答えはありません。私は私のページのすべてのリンクのパラメータを渡す必要があります。jquery mobileを使用するページ間でパラメータを渡す

http://view.jquerymobile.com/master/demos/faq/pass-query-params-to-page.php

+0

同様の質問への回答もご覧ください。 http://stackoverflow.com/a/35259962/3209859 – Kzar

答えて

17

ページ遷移

間のデータ/パラメータ操作はページ遷移中にあるページから別のページにパラメータ/ sのを送信することが可能です。それはいくつかの方法で行うことができます。

参考:https://stackoverflow.com/a/13932240/1848600

解決方法1:

あなたはchangePageで値を渡すことができます。

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true }); 

そして、このようにそれらを読んで:

$(document).on('pagebeforeshow', "#index", function (event, data) { 
    var parameters = $(this).data("url").split("?")[1];; 
    parameter = parameters.replace("parameter=",""); 
    alert(parameter); 
}); 

[例] [3]:

index.htmlを

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title> 
    </title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script> 
     $(document).on('pagebeforeshow', "#index",function() { 
      $(document).on('click', "#changePage",function() {  
       $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true }); 
      }); 
     }); 

     $(document).on('pagebeforeshow', "#second",function() { 
      var parameters = $(this).data("url").split("?")[1];; 
      parameter = parameters.replace("parameter=",""); 
      alert(parameter); 
     });   
    </script> 
    </head> 
    <body> 
    <!-- Home --> 
    <div data-role="page" id="index"> 
     <div data-role="header"> 
      <h3> 
       First Page 
      </h3> 
     </div> 
     <div data-role="content"> 
      <a data-role="button" id="changePage">Test</a> 
     </div> <!--content--> 
    </div><!--page--> 

    </body> 
</html> 

second.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title> 
    </title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    </head> 
    <body> 
    <!-- Home --> 
    <div data-role="page" id="second"> 
     <div data-role="header"> 
      <h3> 
       Second Page 
      </h3> 
     </div> 
     <div data-role="content"> 

     </div> <!--content--> 
    </div><!--page--> 

    </body> 
</html> 

解決方法2:

それとも、ストレージ目的のために永続的なjavascriptオブジェクトを作成することができます。長いajaxがページの読み込みに使用されると(ページは決してリロードされません)、そのオブジェクトはアクティブのままです。

var storeObject = { 
    firstname : '', 
    lastname : '' 
} 

例:http://jsfiddle.net/Gajotres/9KKbx/

解決策3:

ます。また、このように、前のページからのデータにアクセスすることができます。

$('#index').live('pagebeforeshow', function (e, data) { 
    alert(data.prevPage.attr('id')); 
}); 

prevPageオブジェクトは、前の完全な保持ページ。

解決策4:私たちはのlocalStorageの気の利いたHTMLの実装を持って最後の解決策として

。 HTML5ブラウザ(AndroidおよびiOSブラウザを含む)でのみ動作しますが、保存されたすべてのデータはページの更新を通じて永続的です。

if(typeof(Storage)!=="undefined") { 
    localStorage.firstname="Dragan"; 
    localStorage.lastname="Gaic";    
} 

例:http://jsfiddle.net/Gajotres/J9NTr/

詳細情報

あなたがこのトピックについての詳細を知りたい場合は、このarticleを見てみましょう。いくつかの例があるソリューションがあります。

+0

ありがとうGajotres。同じことをする方法はたくさんあります。しかし、これは標準的な推奨方法です。私の簡単な例では、私はニュース記事のリストを持っています。いくつかのニュース記事をタップすると、対応するニュース記事IDをサーバーに渡して、ニュース詳細ページを開きます。これを例に挙げてください。言ってやるがいい、

News Listing
- ここでのリストは商品のリストを参照してください。 – user694688

+0

これは別のものです。私のソリューションは、サーバーのサポートなしで動作するように作られています。ソリューション1はあなたのケースでは機能しますが、それは標準的な方法ではありません。正しい方法は、ajaxを使用し、サーバーに接続し、新しいページデータを取得し、別のページに表示することです。ここに実例があります:http://stackoverflow.com/questions/15205437/jquery-mobile-how-to-correctly-submit-form-data/15205612#15205612 – Gajotres

+0

私がページにパラメータを渡して取得した場合data-url属性を使用すると、正常に動作します。しかし、そのページを更新すると、urlパラメータは使用できなくなります。これに対して何をすべきか。 – user694688

3

また、(私と私の目的その容易なため)リンクで外部の関係でそれを使用することができますので、私は、この共有したいと思った:

HTML:

<a href="page1.htm?structure='123'">Structure</a> 

JS:

$(document).on("pageinit", "#page1", function(event) { 
    var parameters = $(this).data("url").split("?")[1]; 
    parameter = parameters.replace("structure=",""); 
    alert(parameter); 
}); 

私の場合、構造= '123'は動的に作成され、誰も動的目的のために固定値 '123'を書きません:-)

上記の投稿のURL分割に感謝します(pls。彼のポストを好む)、これはちょうど追加/さらなる説明です。

+0

のように、私はこの 'Structure'のようなidを持つリンクをロードする必要があり、分割することはできません。 – ggDeGreat

+0

私の方法はjqueryのハッシュタグナビゲーションと互換性がないと思います。 – zyrex

関連する問題