jQuery Mobile部分未應用（Rails）

試圖實現簡單的滑動菜單。 jQuery Mobile在主頁上渲染得很好，但在菜單div上，沒有jQuery Mobile被應用。閱讀所有相關的例子，但他們都沒有解決我遇到的問題。任何反饋都非常感謝。jQuery Mobile部分未應用（Rails）

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>

來源

2012-06-06 Andrew Smith

你並不需要把變種p中的jQuery內選擇器語法。

p.hasClass（....

就足夠好了。

與移動，我相信jQuery Mobile的查找與數據角色=頁面的div，你的菜單股利是該外

嘗試添加data-role =頁到您的菜單div。

來源

2012-06-06 06:59:12 Alex

jQuery Mobile部分未應用（Rails）

回答

相關問題