Question

我正在使用jQuery Mobile面板，并希望在用户向右滑动（触摸）时打开右侧面板。我正在使用此jQuery mobile reference。

任何想法都表示赞赏。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bxxloder and JQM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <link rel="stylesheet" href="jqm/jquery.mobile-1.4.1.min.css">


<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>    
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <!--<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>-->

    <script src="jqm/jquery.mobile-1.4.1.min.js"></script>



</head>
<body>





<!--#########################JQM#########################-->
<div data-role="page" id="demo-page" data-theme="d" data-url="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>
            <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>
        <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="c">
        <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>
<!--#########################JQM#########################-->







<script>
    $(document).ready(function() {  
$( 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>



</body>
</html>

在触摸设备上打开触摸/滑动的jQuery Mobile面板

0 个答案: