2011-09-01 43 views
0

我有一个使用jquery mobile构建的网站,但静态工具栏显示裤子。所以我已经实现了iScroll插件,它看起来正是我想要的。但我只能让iScroll插件在一个页面上工作。iScroll与jQuery手机。无法让iScroll在多个页面上工作

考虑以下

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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"> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<!-- iPad/iPhone specific css below, add after your main css > 
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />   
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />--> 
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script> 
<link rel="stylesheet" href="css/jquery.mobile-1.0b2.min.css" /> 
<script src="js/jquery-1.6.2.min.js"></script> 
<script src="js/jquery.mobile-1.0b2.min.js"></script> 
<script src="js/iscroll.js"></script> 


<script type="text/javascript"> 
    var myScroll; 
    function loaded() { 
      myScroll = new iScroll('wrapper'); 
    } 

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

    /* * * * * * * * 
    * 
    * Use this for high compatibility (iDevice + Android) 
    * 
    */ 
    document.addEventListener('DOMContentLoaded', setTimeout(function() { loaded(); }, 200), false); 
    /* 
    * * * * * * * */ 


    /* * * * * * * * 
    * 
    * Use this for iDevice only 
    * 
    */ 
    //document.addEventListener('DOMContentLoaded', loaded, false); 
    /* 
    * * * * * * * */ 


    /* * * * * * * * 
    * 
    * Use this if nothing else works 
    * 
    */ 
    //window.addEventListener('load', setTimeout(function() { loaded(); }, 200), false); 
    /* 
    * * * * * * * */ 
</script> 


</head> 

<body onload="onBodyLoad()"> 

<div data-role="page" data-theme="c" id="top_index" data-id="top_index"> 
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> 
<div id="wrapper"> 
     <div id="scroller"> 
       <ul id="thelist"> 
         <li><a href="#page2">Page 2</a></li> 
         <li>Pretty row 2</li> 
         <li>Pretty row 3</li> 
         <li>Pretty row 4</li> 
         <li>Pretty row 5</li> 
         <li>Pretty row 6</li> 
         <li>Pretty row 7</li> 
         <li>Pretty row 8</li> 
         <li>Pretty row 9</li> 
         <li>Pretty row 10</li> 
         <li>Pretty row 11</li> 
         <li>Pretty row 12</li> 
         <li>Pretty row 13</li> 
         <li>Pretty row 14</li> 
         <li>Pretty row 15</li> 
       </ul> 
     </div> 
</div> 
<div id="footer"></div> 
</div> 

<div data-role="page" data-theme="c" id="page2" data-id="top_index"> 
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> 
<div id="wrapper"> 
     <div id="scroller"> 
       <ul id="thelist"> 
         <li><a href="#top_index">Page 1</a></li> 
         <li>Pretty row 2</li> 
         <li>Pretty row 3</li> 
         <li>Pretty row 4</li> 
         <li>Pretty row 5</li> 
         <li>Pretty row 6</li> 
         <li>Pretty row 7</li> 
         <li>Pretty row 8</li> 
         <li>Pretty row 9</li> 
         <li>Pretty row 10</li> 
         <li>Pretty row 11</li> 
         <li>Pretty row 12</li> 
         <li>Pretty row 13</li> 
         <li>Pretty row 14</li> 
         <li>Pretty row 15</li> 
       </ul> 
     </div> 
</div> 
<div id="footer"></div> 
</div> 

</body> 
</html> 

第一页精美的作品。第二页完全不滚动。我如何让滚轮在所有页面上工作?我真的很难过这个。

回答

1

我认为你的问题是你的dom中有重复的id。您需要将滚动应用于包装列表的两个元素。