Question

我正在尝试向我的网站添加两个面板（myPanel），当我从左向右滑动时打开，另一个在从右向左滑动时打开（myPanel2）。我在某种意义上做到了这一点，但我有另一个问题。在panel1和two中，我需要添加链接，点击后将转到相应的页面。它似乎工作，但不是加载页面，它做了一个ajax得到的页面。此外，我点击一个链接后点击一个新的链接什么也没做。这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<title>mobile app</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
<script src="js/modernizr.custom.js"></script>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-display="overlay" data-ajax="false">
                <h2><img src="images/logo.png" alt="" title="" /></h2>
                <ul>
                    <li class="home"><a href="home.html" class="close-panel">Home</a></li>
                    <li class="news"><a href="news.html" class="close-panel">News</a></li>
                </ul>       


  </div>
<div data-role="panel" id="myPanel2" data-position="right" data-display="overlay">
    <h2>Panel Header</h2>
    <p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
  </div>

  <div data-role="header">
    <h1>Page Header</h1>

    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel left</a>

    <a href="#myPanel2" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel right</a>
  </div>

  <div data-role="main" class="ui-content">
    <div class="homepage-banner">
    <ul id="home_ads">
    <li><span><img src="images/home-logo.png" /></span> </li>
    </ul>
    </div>
  </div>

  <div data-role="footer">
    <h1>Page Footer</h1>
  </div>
</div>
</body>
</html>

我假设data-ajax =“false”可以解决问题，但这不是想法吗？

jquery移动面板作为菜单

0 个答案: