0

我用 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>
4

1 回答 1

0

1）您不能链接到外部域。为了使转换工作，页面必须托管在同一个域上，因为 jQuery Mobile 在转换到页面之前使用 AJAX 加载页面，并且 AJAX 受到跨域资源共享 (CORS) 策略的限制。因此，请确保您尝试链接到非外部页面。

2)如果这就是您正在使用的所有代码，那么您的 jQuery Mobile 伪页面需要更多的结构。这是Page Anatomy的 jQuery Mobile 文档中的一个示例：

<!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/

于 2012-09-24T17:00:39.190 回答