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>

test.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');
    }
});

});

application.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

jQuery セレクター構文内に var p を配置する必要はありません。

p.hasClass(....

十分なはずです。

モバイルに関しては、jQuery モバイルは data-role = page の div を探していると思いますが、メニュー div はその外にあります。

メニュー div に data-role = page を追加してみてください。

于 2012-06-06T06:59:12.663 に答える