2

私はjqueryにかなり慣れていないので、パネル機能を使用したいと思っていますが、私のコードは実際には機能していません. テスト用にhttp://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/からほとんどをコピーしましたが、パネルが画面全体を占有し、閉じるボタンが機能せず、何が間違っているのかわかりません。これは私のコードです:

<body>
    <div id="content">
        <div data-role="page">
            <div data-theme="a" data-role="header" data-position="fixed">
                <h3>
                    Test
                </h3>
                <a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a>
            </div>
        </div>
        <div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-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="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                    <li><a href="#panel-fixed-page2">Buttons</a></li>
                    <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                    <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                    <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                    <li><a href="#panel-fixed-page2">Dialogs</a></li>
                    <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
                    <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
                    <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
                    <li><a href="#panel-fixed-page2">Form elements</a></li>
                    <li><a href="#panel-fixed-page2">Grids</a></li>
                    <li><a href="#panel-fixed-page2">Header toolbar</a></li>
                    <li><a href="#panel-fixed-page2">Icons</a></li>
                    <li><a href="#panel-fixed-page2">Links</a></li>
                    <li><a href="#panel-fixed-page2">Listviews</a></li>
                    <li><a href="#panel-fixed-page2">Loader overlay</a></li>
                    <li><a href="#panel-fixed-page2">Navbar</a></li>
                    <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
                    <li><a href="#panel-fixed-page2">Pages</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">Popup</a></li>
                    <li><a href="#panel-fixed-page2">Radio buttons</a></li>
                    <li><a href="#panel-fixed-page2">Select</a></li>
                    <li><a href="#panel-fixed-page2">Slider, single</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
                    <li><a href="#panel-fixed-page2">Transitions</a></li>
            </ul>
        </div><!-- /panel -->
    </div>    
</body>

先頭にスクリプト .js および .css 呼び出しを使用すると、次のようになります。

<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

どんな助けでも大歓迎です！

4

1 に答える 1

2

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/によると

「パネルは、jQuery Mobile ページ内のヘッダー、コンテンツ、およびフッター要素の兄弟である必要があります。パネル マークアップは、これらの要素の前または後に追加できますが、その間には追加できません。パネルをページの外に配置することはできませんが、これは制約は将来のバージョンで削除される予定です。」

したがって、パネル div をページ内に配置するだけです :)

<body>
<div id="content">
    <div data-role="page">
        <div data-theme="a" data-role="header" data-position="fixed">
            <h3>
                Test
            </h3>
            <a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a>
        </div>
        <div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-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="#panel-fixed-page2">Accordion</a></li>
                <li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
                <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                <li><a href="#panel-fixed-page2">Buttons</a></li>
                <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                <li><a href="#panel-fixed-page2">Dialogs</a></li>
                <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
                <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
                <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
                <li><a href="#panel-fixed-page2">Form elements</a></li>
                <li><a href="#panel-fixed-page2">Grids</a></li>
                <li><a href="#panel-fixed-page2">Header toolbar</a></li>
                <li><a href="#panel-fixed-page2">Icons</a></li>
                <li><a href="#panel-fixed-page2">Links</a></li>
                <li><a href="#panel-fixed-page2">Listviews</a></li>
                <li><a href="#panel-fixed-page2">Loader overlay</a></li>
                <li><a href="#panel-fixed-page2">Navbar</a></li>
                <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
                <li><a href="#panel-fixed-page2">Pages</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Popup</a></li>
                <li><a href="#panel-fixed-page2">Radio buttons</a></li>
                <li><a href="#panel-fixed-page2">Select</a></li>
                <li><a href="#panel-fixed-page2">Slider, single</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
                <li><a href="#panel-fixed-page2">Transitions</a></li>
        </ul>
    </div><!-- /panel -->
    </div>

</div>    
</body>

これがJSFiddleです。

于 2013-07-30T14:27:30.230 に答える