2

HTML5でシンプルな静的アプリを作成しています。

私が今していることは、私が数千行のコードを持っている単一の長いページを持っているということです。

私は現在、別のページに移動するためにこれを行っています：

<div data-role="content">
    <label for="heading">History</label>
    <a href="#module_a" data-role="button" data-icon="arrow-r" data-iconpos="right" data-transition="flip">History</a>
    <a href="module_b" data-role="button" data-icon="arrow-r" data-iconpos="right">Remote Control</a>
</div>

...そして、次のようにmodule_aとmodule_bがあります...

<div id="module_a" data-role="page">
    //content
</div>

...そしてmodule_bについても同じです

両方のdivが同じページにあるため、私のページは非常に見栄えが悪くなります。

私がしたいのは、同じ機能が必要ですが、同じページにmodule_aとmodule_bであるdivは必要ないということです。

そのために別のページを作成し、メインページがはっきり見えるようにロードします。

4

3 に答える 3

6

私があなたが正しく求めているものを集めるなら、あなたはAJAXが欲しいです。リンク/ボタンの1つをクリックすると、別のページのHTMLを取得してページの所定の位置にロードするリクエストを送信するJavaScriptコードが必要になります。

これを行う最良の方法は、jQueryを使用することです。それはあなたが必要なものを正確に実行するというこの本当に便利な関数を持っていload()ます。http://api.jquery.com/load/

次のようになります。

$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');

お役に立てば幸いです。

于 2012-06-29T08:25:14.283 に答える
1

これは機能するはずです：

  1. 各モジュールを独自のファイルに入れます。
  2. モジュールへのリンクを修正して、モジュールファイルにリンクするようにします。
  3. <iframe>元のファイルのモジュールをタグに置き換えます。
  4. の属性をモジュールのファイルのURLにonclick設定する各リンクにイベントハンドラーを追加します（リンクがたどられないように、を返します）。src<iframe>false

ただし、 @ ThomasClaysonが提案しているように、AJAXを使用する場合は、ロードするHTMLを使用して作業を行うための範囲が広がります。

于 2012-06-29T08:25:18.987 に答える
0

AJAXを試しましたか？

 $.ajax({
   url: 'seperate_page.html',
   success: function(data) {
     $('#module_b').html(data);
   }
 });

私が質問をどのように理解したかから、これはあなたの問題を解決するでしょう..それが役立つことを願っています

于 2012-06-29T08:29:47.983 に答える