8

Choose Language コンポーネント用に jqm サイトで Panel を使用したいと考えています。したがって、そのコンポーネントはすべてのページに存在する必要があります。単一ページ パネルの設定は次のとおりです。

jquerymobile.comから( ... ヘッダー ボタンを追加しました) 

  <div id="mypanel" data-role="panel" >
    <!-- panel content goes here -->
  </div><!-- /panel -->

  <div id="myheader" data-role="header" >
    <a id='panel_toggle' data-role='button'>choose language</a>
  </div><!-- /header -->

  <!-- content -->
<!-- footer -->

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

私は3つの解決策があると考えています：

  • A - すべてのページにパネルの複製コピーを作成します ---- これは、page_N の状態が変更された場合に問題になります。その後、他のすべてを同期する必要があります。

  • B - ページの変更時にプログラムによって移動される単一のパネルを作成する ---- これはハックのようです

  • C - jqm がこの問題に対する解決策を既に持っているかどうかを発見する ---- したがって、私は質問をしています :)

jqmにはパネルをページからページに移動する方法がありますか?

4

11 に答える 11

23

最善の方法は、すべてのページのパネルを動的に作成することです。

私はあなたに実用的な例を作りました: http://jsfiddle.net/Gajotres/pZzrk/

$(document).on('pagebeforeshow', '[data-role="page"]', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('mypanel');
    $.mobile.activePage.find('#mypanel').panel();
    $(document).on('click', '#open-panel', function(){   
         $.mobile.activePage.find('#mypanel').panel("open");       
    });    
});

いくつかの説明:

  • $.mobile.activePage が必要なのは、すべてのページに同じパネルがあり、それらすべてが同じ ID を持つためです。アクティブなページなしで開くと、DOM 内で最初に出現するページが開きます。

jQuery Mobile の開発者は、次のメジャー バージョンでは、パネル ウィジェットはページの一部である必要がなくなり、代わりにページ div と同じレベルに配置されると述べています。したがって、1 つのパネルが必要になります。残念ながら、動的に作成する必要があります。

于 2013-03-05T12:33:14.240 に答える
2

Gajotres と AppFramework がパネルを処理する方法からインスピレーションを得て、これを作成しました。定義済みのパネルをアクティブなページにコピーすることで機能します。パネルは、ページ div の right-panel 属性と left-panel 属性の id によって定義されます。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){
    // remove unused tmp panels from DOM
    $("#tmpRightPanel").remove();
    $("#tmpLeftPanel").remove();

    // Hide buttons by default (I'm using a static header and footer on every page too)
    $("#openRightPanel").css("display", "none");
    $("#openLeftPanel").css("display", "none");

    // check if right-panel attribute is set on the page
    if ($(this).attr("right-panel")) {
        // if it is, it should append the defined right-panel to the page
        $("#"+$(this).attr("right-panel")).clone().appendTo($(this));

        // rename it to tmpRightPanel
        $.mobile.activePage.find('#'+$(this).attr("right-panel")).attr("id", "tmpRightPanel");

        // make it a panel
        $.mobile.activePage.find('#tmpRightPanel').panel();

        // make it visible (the original right panel is set to display: none)
        $.mobile.activePage.find('#tmpRightPanel').css("display", "block");

        // make the button to open the panel visible
        $("#openRightPanel").css("display", "block");
    }

    // same as right-panel above
    if ($(this).attr("left-panel")) {
        $("#"+$(this).attr("left-panel")).clone().appendTo($(this));
        $.mobile.activePage.find('#'+$(this).attr("left-panel")).attr("id", "tmpLeftPanel");
        $.mobile.activePage.find('#tmpLeftPanel').panel();
        $.mobile.activePage.find('#tmpLeftPanel').css("display","block");
        $("#openLeftPanel").css("display", "block");
    }
});

// make the open panel buttons clickable
$(document).on('click', '#openRightPanel', function(){   
    $.mobile.activePage.find('#tmpRightPanel').panel("open");
});

$(document).on('click', '#openLeftPanel', function(){
    $.mobile.activePage.find('#tmpLeftPanel').panel("open");
});

次のようなページを作成します。

    <div id="main" data-role="page" data-title="Main" right-panel="right-panel" left-panel="left-panel">
         <div class="ui-content">
              some page
         </div>
    </div>

パネルをページ外のどこかに配置し、次のように非表示にします。

    <!-- leftpanel -->
    <div data-role="panel" id="left-panel" data-display="push" data-position="left" data-theme="a" style="display:none;">
         something something something
    </div>
    <!-- /leftpanel -->

    <!-- rightpanel -->
    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a" style="display:none;">
         something something something
    </div>
    <!-- /rightpanel -->
于 2014-07-10T09:23:44.437 に答える
0

Panelは、1.3で導入された新しい概念です。それでは、より多くのチュートリアルがすぐに表示されることを期待しましょう。あなたの問題に関しては、各ページにパネルをコーディングする方が良いと思います。ページにリアルタイムで変更を加えることができますが、ドキュメントに記載されているように、必ず次のメソッドを呼び出してください。

$( "#mypanel" ).trigger( "updatelayout" );

他の方法が実行可能かどうかはわかりません。

于 2013-03-05T12:10:46.497 に答える
0

Jquery 1.4.4では、以下を簡単に使用できます。

<script>
    $(function(){
        $("[data-role='header'],[data-role='footer']").toolbar();
    });
</script>
<script id="panel-init">
        $(function(){
            $( "[data-role='panel']").panel();
        $( "[data-role='listview']").listview();    
    });
</script>

これは私のクラス用のモバイル Web プロジェクトで機能し、モバイル Web アプリケーションの先生が今日見せてくれました。

Jquery Mobile Web Applicationでご覧ください

ページコードの残りの部分は次のとおりです。

<div data-role="header" style="overflow-x:hidden;" data-position="fixed" data-theme="a">
        <h1>Page One</h1>
        <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left ui-icon-notext">
            <a href="#nav-panel" class="ui-btn ui-btn-icon-right ui-icon-bars">Menu</a>
            <a href="//soldierupdesigns.com/web295/jquery-mobile/" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>
        </div>
        <a href="#add-form" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Add Form</a>
        <div data-role="navbar">
            <ul>
                <li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
                <li><a href="#page2">Page Two</a></li>
                <li><a href="#page3">Page Three</a></li>
                <li><a href="#page4">Page Four</a></li>
                <li><a href="#page5">Page Five</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div data-role="panel" data-display="overlay" data-theme="b" id="nav-panel" data-inset="false" data-position-fixed="true">
        <ul data-role="listview" data-theme="b">
            <li class="list-group-item active" data-icon="delete"><a href="#" data-rel="close" style="color:#ffffff;">Close menu</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Accordion</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Ajax Navigation</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Autocomplete</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Buttons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Checkboxes</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Collapsibles</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Controlgroup</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Dialogs</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Fixed toolbars</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Flip switch toggle</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Footer toolbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Form elements</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Grids</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Header toolbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Icons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Links</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Listviews</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Loader overlay</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Navbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Navbar, persistent</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Pages</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Popup</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Radio buttons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Select</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Slider, single</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Transitions</a></li>
        </ul>
    </div><!-- /panel -->

    <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">

        <form class="userform">

            <h2>Login</h2>

            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>

    </div><!-- /panel -->
    <div data-role="page" class="ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
        <div class="ui-content"></div>
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Panel responsive</h1>
            <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
            <div data-demo-html="#panel-responsive-page1" data-ajax="true" >View Source</div><!--/demo-html -->
            <br>
            <br>
            <br>
            <br>
            <br>
            <a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">back</a>
        </div><!-- /content --> 
    </div><!-- /page -->

    <div data-role="footer" style="overflow:hidden;" data-position="fixed" data-tap-toggle="false" class="jqm-footer" data-theme="a">
        <div data-role="navbar">
            <ul>
                <li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
                <li><a href="#page2">Page Two</a></li>
                <li><a href="#page3">Page Three</a></li>
                <li><a href="#page4">Page Four</a></li>
                <li><a href="#page5">Page Five</a></li>
            </ul>
        </div><!-- /navbar -->
        <p>Copyright 2014 The jQuery Foundation</p>
        <p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
    </div><!-- /footer -->
    <div data-role="page" id="panel-responsive-page2">

        <div data-role="header">
            <h1>Landing page</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content jqm-content">

            <p>This is just a landing page.</p>

            <a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>

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

    </div><!-- /page -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page2" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page2 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page3" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page3 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page4" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 4</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page4 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page5" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 5</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page5 -->
于 2014-10-25T02:32:29.347 に答える
0

「パネルをページ外に配置することはできませんが、この制約は将来のバージョンで削除される予定です。」( http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/より)

この機能は、パネルをアプリ全体のナビゲーション デバイスとして最も便利で便利なものにするための鍵と思われます。

于 2013-04-16T22:30:02.740 に答える
0

私のアプローチは、ここでの他の回答と似ていますが、投稿を正当化するには十分に異なります。

私のマルチページ プロジェクトでは、次のように最初のページにナビゲーション パネルを作成します。

<div data-role="page" id="index">
<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#" data-destination="#home">Home</a></li>
                    <li><a href="#" data-destination="#search">Search</a></li>
                    <li><a href="#" data-destination="#about">About</a></li>
            </ul>
</div> 
 <!-- etc.... -->

その後のページでは、それを識別する適切なクラス名を持つ div を追加します。

<div data-role="page" id="search">
        <div class="navPanelChild"></div>
<!-- etc.... -->

次に、アプリの最初のページの pagebeforecreate イベントで、ナビゲーション パネルを複製し、すべての子コンテナーをそれに置き換えます。

$(document).delegate("#index", "pagebeforecreate", function () {

            var navpanelCopy = $( "#nav-panel" ).clone();
            $( ".navPanelChild" ).replaceWith(navpanelCopy);

            });
于 2013-11-28T13:51:41.273 に答える
0

単一のページ テンプレートを使用しているときに、この問題が発生しました。私は id メニューを持つ div のみを持ち、それを単一ページ テンプレートのすべてのページに追加したいと考えています。

メニュー パネルのコードは次のようになります。

<div id="menu">
    <h1>Menu</h1>
    ... some content ---
</div>

そして私のJSコードは次のとおりです。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){          

// if the page hasn't got yet a menu panel, append a new menu
if ($.mobile.activePage.find(".menu").length===0) {        
    $('<div>').attr({'data-role':'panel',"class":"menu"}).appendTo($(this));

    // copy the contents of the panel defined before    
    $.mobile.activePage.find('.menu').html($("#menu").html()).panel();    
}

// if click the .showMenu button, open the menu
$(document).on('click', '.showMenu', function(){         
    $.mobile.activePage.find('.menu').panel("open");       
});

});

このコードは完璧に機能し、2 時間以上探していた問題に対する正しい答えを得られて満足しています。

うまくいった場合はコメントしてください。スペインからのご挨拶

于 2013-05-28T23:43:08.813 に答える
0

私は同じ問題を抱えていて、iframeを使用して永続的なコンテンツ (私の場合は洗練された検索フォーム) をファイルからロードすることをやめました:

<div data-role="panel" ...>
    <div data-role="collapsible" ...>
        <h4>Search for Hotel</h4>
        <div class="tmbe-sformcontainer">
            <iframe class="tmbe-sform" src="sform.html" frameborder="0"></iframe>
...

sform.html は、ユーザーが次のような検索条件を送信すると、メイン ページにメッセージを送信します。

window.parent.postMessage({action:"search",params:criteria},'*');

メインページはそれを次のようにキャプチャします。

window.onmessage = function (e) {
if (e.data.action == "search") {
    var criteria = e.data.params;
    loadHotelListPage(criteria);
}
};

私はそれが奇妙であることを知っていますが、うまくいきます

于 2013-04-14T08:52:59.900 に答える