jQuery移動數據角色滑塊不起作用

我正在使用最新的jQuery移動1.0.1，我在第二頁上使用data-role =滑塊，該頁面在從第一頁過渡之後加載。這個數據角色滑塊似乎不適用於第二頁。當我獨立運行該頁面時，它可以工作，但不會在從第一頁轉換後加載。我也檢查了調試也沒有JavaScript錯誤。任何幫助，將不勝感激。jQuery移動數據角色滑塊不起作用

來源

2012-02-25 user1232072

你在第二頁上使用data-role =「page」嗎？你可以發佈你的第一頁代碼嗎？ – DG3 2012-02-25 04:16:54

找到下面的代碼。這對我來說可以。

<!DOCTYPE html> 
<html class="ui-mobile-rendering"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-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.0/jquery.mobile-1.0.min.js"></script> 
</head> 


<body> 

<div data-role="page" id="one"> 

    <div data-role="header"> 
     <h1>Single page</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>  
     <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> 

     <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p> 
       <p><a href="#two" data-role="button">Show page "two"</a></p>  
     </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Footer content</h4> 
    </div><!-- /footer --> 

</div><!-- /page --> 

<!-- Start of second page: #two --> 
<div data-role="page" id="two" data-theme="a" data-transition="slider"> 

    <div data-role="header"> 
     <h1>Two</h1> 

    </div><!-- /header --> 

    <div data-role="content" data-theme="a"> 
       <label for="flip-a">Select slider:</label> 
       <select name="slider" id="flip-a" data-role="slider"> 
         <option value="off">Off</option> 
         <option value="on">On</option> 
       </select> 
     <h2>Two</h2> 
     <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> 
     <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p> 
     <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> 

    </div><!-- /content --> 


    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page two --> 
</body> 
</html>

來源

2012-02-25 04:31:21 DG3

它仍然不適合我。 – user1232072 2012-02-25 05:52:57

它可以幫助你發佈你的代碼。 – DG3 2012-02-25 05:56:26

jQuery移動數據角色滑塊不起作用

回答

相關問題