1

我有这段代码可以在浏览器上运行，但是当尝试通过PhoneGap编译运行时，从左/从右滚动不起作用，尽管当我单击顶部的按钮时左/右菜单工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Open panel on swipe - jQuery Mobile Demos</title>
    <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">

    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
    <script src="cordova.js"></script>
    <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>



    <script>

    document.addEventListener("deviceready", alert("deviceready"),false);

     $(document).bind("mobileinit", function () {
         $.mobile.ajaxEnabled = false;
        });

        $( document ).on( "pageinit", "#demo-page", function() {

            $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
                // We check if there is no open panel on the page because otherwise
                // a swipe to close the left panel would also open the right panel (and v.v.).
                // We do this by checking the data that the framework stores on the page element (panel: open).
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft"  ) {
                        $( "#right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#left-panel" ).panel( "open" );
                    }
                }
            });
        });
    </script>
    <style>
        /* Swipe works with mouse as well but often causes text selection. */
        #demo-page * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
        /* Arrow only buttons in the header. */
        #demo-page .ui-header .ui-btn {
            background: none;
            border: none;
            top: 9px;
        }
        #demo-page .ui-header .ui-btn-inner {
            border: none;
        }
        /* Content styling. */
        dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
        dt { font-size: 2em; font-weight: bold; }
        dt span { font-size: .5em; color: #777; margin-left: .5em; }
        dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
        .back-btn { float: right; margin: 0 2em 1em 0; }
    </style>
</head>
<body>

<div data-role="page" class="jqm-demos" id="demo-page">

    <div data-role="header" data-theme="b">
        <h1>Swipe left or right</h1>
        <a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
        <a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>


    </div><!-- /header -->

    <div data-role="content" >

        <dl>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>
            <dt>Swipe <span>verb</span></dt><br>

            <dd><b>1.</b> to strike or move with a sweeping motion</dd>
        </dl>

        <a href="#demo-intro" data-rel="back" class="back-btn" data-role="button" data-mini="true" data-inline="true" data-icon="back" data-iconpos="right">Back to demo intro</a>


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

    <div data-role="panel" id="left-panel" data-theme="b" >

        <p>Left reveal panel.</p>

                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Menu
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page1" data-transition="slide">
                            Button
                        </a>
                    </li>
                </ul>
        <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>

    </div><!-- /panel -->

    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">

        <p>Right push panel.</p>
        <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>

    </div><!-- /panel -->


    <div data-role="footer" data-position="fixed" data-theme="b">
        <p class="jqm-version"></p>
        <p>Copyright 2013 InTouchMobile</p>
    </div><!-- /footer -->



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




</body>
</html>

任何帮助，将不胜感激。另外，告诉我是否有任何其他方法可以从双方获得 FB/G+ 风格的幻灯片菜单！

4

1 回答 1

0

这里是两边滑动面板的演示DEMO http://jsfiddle.net/yeyene/D9PQV/

HTML

<div data-role="page" id="panel-fixed-page1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Fixed header</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div><!-- /header -->
    <div data-role="content" class="jqm-content">
        <h1>Panels</h1>
        <h2>Fixed positioning</h2>
        <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the reveal display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p>
        <p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>      
        <div data-demo-html="#panel-fixed-page1" data-demo-css="true"></div><!--/demo-html -->
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed" data-theme="b">
        <h4>Fixed footer</h4>
    </div><!-- /footer -->
    
    <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="#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>                
        </ul>
    </div><!-- /panel -->

    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="b" 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" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
            </div>
        </form>
    </div><!-- /panel -->
</div><!-- /page -->

<div data-role="page" id="panel-fixed-page2">
    <div data-role="header" data-theme="f">
        <h1>Landing page</h1>
    </div><!-- /header -->
    <div data-role="content" class="jqm-content">
        <p>This is just a landing page.</p>
        <a href="#panel-fixed-page1" data-role="button" data-inline="true" data-mini="true" data-icon="back" data-iconpos="left">Back</a>
    </div><!-- /content -->
</div><!-- /page -->
于 2013-07-08T05:17:50.423 回答