0

jquerymobileを使用してdata-role="page"属性を持つ複数のdivを持つWebアプリを作成している単一のhtmlページがあります。各ページには固定のヘッダーとフッターがあり、ページの遷移を通じて一貫性が保たれます。

ただし、jquery-mobileフレームワークではなく、同じディレクトリにある別のhtmlページをDOMにロードし、永続的な固定ヘッダーとフッターをそのページに表示したいと思います。

これは可能ですか？$ mobile.changePage（）と$ mobile.loadPage（）を使用するためのjquery Mobileのドキュメントを見てきましたが、その実装方法がはっきりしていません。

これまでのところ、私はこれを持っています（@Jackの指示に従って編集）：

HTML

    <div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->

Jquery

$(document).on('pageinit'(function() {
$("#external").load("external_page.html").trigger("create");
}));

現在、リンクをクリックすると、ヘッダーとフッターで#external_pageが正常に読み込まれますが、external_page.htmlのコンテンツは読み込まれません。#external_pageのセクションはまだ空です。

考え？

4

1 に答える 1

1

jQueryのロードを使用して外部ページをロードし、それを適切なヘッダー/フッターを含むdivでラップし、それをDOMに追加してから、 createイベントdata-role="page"をトリガーしてページを初期化できるはずです。または、最初のページにページラッパー（div with ）を準備し、外部ページのコンテンツをそこに挿入することもできます（現在の方法で）。data-role="page"

現在のJavaScriptを見ると、.onの構文が少しずれており、コンマがありません。

マークアップを使用すると、次のことができるようになります

<div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
       <a href="#" data-rel="back" data-icon="back">Back</a> <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->   


    <script type="text/javascript">
        $(document).on('pageinit', '#dog_bars', function () {
             //you can probably leave out the trigger('create') since the wrapper
             //is already part of the DOM and JQM should enhance it
            $('#external').load("external_page.html").trigger("create");
        });
    </script>

external_page.html

<!DOCTYPE >
<html >
<head>
    <title></title>
</head>
<body>
    <div id="pageWrapper">
        <p>Some test text</p>
        <input type="text" />

        <select>
            <option value="value">Option1</option>
            <option value="value2">Option2</option>
        </select>

    </div>
</body>
</html>
于 2012-12-11T14:47:14.037 に答える