2

jQuery Mobile で Web アプリを作成し、Cloudmade Leaflet を使用してマップを含めました。マップには、データベース内の座標から生成されたマーカーがあります。各マーカーには、アイテムの説明と、マーカーをクリックするとポップアップで表示されるリンクがあります。すべて正常に動作しています。このリンクは、アイテムに関するデータベースからの詳細情報を要求する php ファイルにアクセスします。

私が抱えている問題は、jQueryトランジションを使用してより多くの情報を含むページを表示する代わりに、ポップアップ内のリンクをクリックすると、リンクによってブラウザが強制的に開かれ、そこにコンテンツが表示されることです。

jQuery Mobile がリンクを見て、クリックしたときに ajax の読み込みと遷移を適用することに問題があると思います。

これが可能かどうか、そしてそれを適切に機能させるために何をする必要があるかを誰かが知っていますか?

4

2 に答える 2

1

Barry,

what you need to do is to include a '#' link to the destination jQuery mobile link. For example if you have a JQM page called infoPage like this:

<div data-role="page" id="infoPage" data-add-back-btn="true">
  <header data-role="header" data-theme="c">
    <h1>Video tests</h1>
  </header> 
  <div data-role="content">
     This is where more info would appear...
  </div>
</div>

Then you can create the marker like this:

var popup = new L.Popup();
popup.setLatLng( e.latlng );
popup.setContent( "More <a href='#infoPage'>info</a> here." );
map.openPopup( popup );

Notice the href='#infoPage' - thats the standard JQM way of switching pages. Hope that solves it for you (I just tried it here and it works)

...and just in case you are running your 'app' as a PhoneGap app rather than as a pure webapp, a click on a link may cause PhoneGap to launch content in the browser rather than stay in its own web view. This is answered somewhere else:

Links in remote JQueryMobile sites in a PhoneGap app open safari

What controls whether PhoneGap opens an external browser / Safari?

http://forum.jquery.com/topic/phonegap-jquerymobile-ajax-links-opening-in-browser-window

open link inside the phonegap program

于 2012-01-24T00:25:27.670 に答える
0

私は jQuery Mobile で開発しています。デフォルトでは、jQuery モバイル フォームが ajax 経由でサーバーを呼び出します。次のdata-ajax="false"ように追加する必要があります。

<form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">

完全な例:

http://jquerymobile.com/demos/1.0/docs/forms/forms-sample.html

于 2012-01-09T23:40:32.630 に答える