0

jQuery Mobile、HTML、CSSを使用してWebサイトを作成していますが、ページ間を移動するときにクールなトランジションを適用したいと思います。3つのボタンがあるナビゲーションバーを使用していますが、トランジションを機能させることができません。見た目は同じですが、私はそれを行います。誰もが何が悪いのか知っていますか？

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 がCross-Origin Resource Sharing (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 に答える