web-dev-qa-db-ja.com

クリック後、JavaScriptを介してjQuery Mobileページを動的に作成します

私のjQueryモバイルアプリは、単一の_index.html_ページで構成され、起動時にリンクが設定された1つのページのみを含みます。

_<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>
_

ユーザーが開始リンクをクリックしたときに、JSON APIからstartPageのコンテンツを非同期でロードしたいと思います。コールバックで、JavaScriptを介してstartPageに必要なすべてのDOM要素を作成し、それにコンテンツを追加します。このためのcreateStartPage(data)メソッドを作成しました。

そのような動的に作成されたページを実装して_index.html#startPage_を開くことも機能するようにする正しい方法は何ですか？カスタムの読み込み/ページ作成コードを含めるために$.mobile.changePage()にフックする方法があるはずだと思いますが、何も見つかりませんでした。または、この問題のより良い解決策はありますか？

javascriptjquerynavigationjquery-mobile
21
Witek

私はこれをいじり回す時間があり、動作する（テスト済み）ソリューションを見つけました。

注意事項：

  1. $（document）.ready（）;にカプセル化されたJavaScriptユーザーがハッシュマークが既に追加されているindex.htmlファイルに移動した場合に、ページを動的に作成するためのものです（つまり、index.html＃some_hash_mark）。
  2. 関数create_page（page_id）は、リンクからページを作成するためのものです（または必要に応じてプログラムで）。
  3. Jqueryコアスクリプトとjqueryモバイルcssは$（document）.ready（）ステートメントの前に読み込まれますが、jqueryモバイルスクリプトは後で読み込まれることに注意してください。
  4. Bodyタグに、ページを追加するときに参照されるIDが付与されていることを確認します。

ドキュメントサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') {

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    }
});
function create_page(page_id) {

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();
}
</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>
23
Jasper

私にはジャスパーの解決策は機能しませんが、私は見つけました this solution それはよりきれいに見え、うまく機能します

5
wezzy

これが、コンテンツを私のJquery Mobile Webサイトに動的に追加するための私の方法です。

  1. 最初に、「ラッパー」data-role = page divを次のように作成します。

    <div data-role="page" id="my_page_id">
<div data-role="content">
    <script>
    $('#my_page_id').live('pageshow', function() {
        my_data_loading_function('my_page_id');
    });
    </script>
<div id="my_page_id-content"></div>
</div><!--/content-->
</div><!--/page-->

  2. 次に、外部ソースから「ラッパー」ページにあるdivタグにデータをロードします。

    function my_data_loading_function(page) {
    if ($('#' + page + '-content').is(':empty')) {
        $.mobile.pageLoading();
        $('#' + page + '-content').load("my_external_script.php", function() {
            $.mobile.pageLoading(true);
            $('#' + page + '-content ul').listview();
            $('#' + page + '-content ul').page();
        });
    }
}

いくつかのメモ：

  • $ .mobile.pageLoading（）;および$ .mobile.pageLoading（true）; Jquery Mobile読み込みスピナーを（それぞれ）表示および非表示にします。

  • if（$（ '＃' + page + '-content'）。is（ '：empty'））{により、ユーザーは動的に作成されたページから移動して戻ってきて、データを再度読み込む必要がなくなります。ページ全体が更新されます。

  • 私の動的に作成されたページにはほとんどリストが含まれていたので、listview（）はjqueryモバイルフレームワークに選択されたリストを更新させて適切なcssを追加し、page（）は他のページ要素にも同じことを行います。ただし、コンテンツに応じてどちらか一方のみを使用する必要がある場合があります（プレーンテキストの場合はまったく使用しません）。

  • 「ラッパー」ページはすでにハードコーディングされているため、これはページ全体を動的に作成するのではないことに気づきますが、新しいページ全体を追加したい場合は、おそらく次のようなものを使用できます：（unested）

    $(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
$('#my_page_id').page();

すべてを動的に作成したい場合は、window.location.hashを確認し、idをwindow.location.hashとして設定してdata-role = page divを作成できます。

また、私はJquery 1.6とJquery Mobile 1.0a4.1を使用しています

私はそこに何かがそこにいる誰かを助けることができることを願っています:)

4
Jasper

Jqueryのajax loadメソッドを見たことはありますか？必要なページをロードして、リクエストが返されるたびに本文を置き換えるようにするだけのようです。

参照

0
RyanJM

このJSFiddleの例では、FlickrからAPI呼び出しを取得し、jquery tmplエンジンを介して結果を実行して、新しいページをドキュメントに追加し、新しく挿入されたページに$ .mobile.changePage（）を呼び出します。 jquery tmpl + apis + jquery mobileの組み合わせがいかに便利かわかると思います。

http://jsfiddle.net/sgliser/8Yq36/5/

0
sgliser