0

尝试实现一个简单的滑块菜单。jQuery Mobile 在主页上呈现良好，但在菜单 div 上，没有应用 jQuery Mobile。阅读所有相关示例，但没有一个可以解决我遇到的问题。非常感谢任何反馈。

test.html.erb

<head>
<title>FB Style Menu</title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-     scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />
<link rel="stylesheet" href="css/main.css?v=31" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head> 

<div data-role="page" class="pages" id="home">
<div data-role="header">
    <a href="#"class="showMenu">Menu</a>
    <h1>FB Style Menu</h1>
</div><!-- /header -->

<div data-role="content">
    <p><strong>Note: You can swipe right/left to show/close menu.</strong></p>
</div>
</div>

<div id = "menu">
<h3>Menu</h3>
<ul>
    <li class="active"><a href="#home" class="contentLink">Home </a></li>
    <li><a href="#home" data-role = "button" class="contentLink">About </a></li>
    <li><a href="#home" class="contentLink">Portfolio </a></li>
    <li><a href="#home" class="contentLink">Contact </a></li>

</ul>
</div>

测试.js

$(function(){
var menuStatus;

$("a.showMenu").click(function(){
    if(menuStatus != true){
    $(".ui-page-active").animate({
        marginLeft: "250px",
      }, 300, function(){menuStatus = true});
      return false;
      } else {
        $(".ui-page-active").animate({
        marginLeft: "0px",
      }, 300, function(){menuStatus = false});
        return false;
      }
});

$('.pages').live("swipeleft", function(){
    if (menuStatus){
    $(".ui-page-active").animate({
        marginLeft: "0px",
      }, 300, function(){menuStatus = false});
      }
});

$('.pages').live("swiperight", function(){
    if (!menuStatus){
    $(".ui-page-active").animate({
        marginLeft: "165px",
      }, 300, function(){menuStatus = true});
      }
});

$("#menu li a").click(function(){
    var p = $(this).parent();
    if($(p).hasClass('active')){
        $("#menu li").removeClass('active');
    } else {
        $("#menu li").removeClass('active');
        $(p).addClass('active');
    }
});

});

应用程序.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>fuseGap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript">if (window.location.hash == '#_=_')window.location.hash = '';</script>
    <link rel="stylesheet" href="arc2theme.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>
<body>
<%= yield %>
</body>
</html>
4

1 回答 1

0

您不需要将 var p 放在 jQuery 选择器语法中。

p.hasClass(....

应该够好了。

关于移动设备，我相信 jQuery mobile 会寻找带有 data-role = page 的 div，而您的菜单 div 不在此范围内。

尝试将 data-role = page 添加到您的菜单 div 。

于 2012-06-06T06:59:12.663 回答