HTML

Question

我有这个代码可以在浏览器上运行，但是当试图通过PhoneGap编译运行时，SCROLL FROM LEFT / SCROLL FROM RIGHT不起作用，虽然我单击顶部的按钮时左/右菜单正常工作。 / p>

<!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 + Style幻灯片菜单，从两个方面来看！

Answer 1

以下是两侧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 -->

jQuery Slide Panel无法使用PhoneGap

1 个答案:

HTML