Question

我正在使用jQuery Mobile，HTML和CSS建立一个网站，我喜欢在我在页面之间导航时应用很酷的过渡。我使用带有三个按钮的导航栏，但我无法使转换工作。它看起来一样，但我做到了。任何人都知道什么是错的？

我将data-transition="slide"放入数据角色。

<a href="http://www.website.com/" data-role="button" data-theme="c" data-mini="true" id="change" data-transition="slide"></a>

Answer 1

1）您无法链接到外部域。为了使转换工作，页面必须托管在同一个域上，因为jQuery Mobile在转换到页面之前使用AJAX加载页面，而AJAX受Cross-Origin Resource Sharing (CORS) Policies限制。因此，请确保您尝试链接到非外部页面。

2）如果这是您正在使用的所有代码，那么您需要更多的jQuery Mobile伪页面结构。这是jQuery Mobile documentation for Page Anatomy：

中的一个示例

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

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

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p><a href="#page2" data-role="button" data-theme="c" data-mini="true" id="change" data-transition="slide">I'ma Button</a></p>      
    </div><!-- /content -->

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

</body>
</html>

以下是演示：http://jsfiddle.net/zaaeM/

为什么过渡不起作用？

1 个答案: