Question

我是jQuery的新手并在jQuery mobile中开发应用程序。我正在使用页面转换=幻灯片或页面转换= JQM的翻转属性我的页面但它不能在chrome中工作。而不是转换到页面我想过渡到一个网站。请在这方面帮助我。

我的代码是

<a href="www.google.com" data-transition="flip" 
   data-direction="reverse">abc</a>

Answer 1

DEMO

请仔细阅读此链接以获取更多详情Transitions

<div data-role="page" id="index1">
<div data-role="header">
        <h1>Page Title</h1>

</div>
<div data-role="content">   <a href="#index" data-transition="flip">Click Me</a>    
</div>
<div data-role="footer">
        <h4>Page Footer</h4>

</div>
</div>
<div data-role="page" id="index">
<div data-role="header">
        <h1>Page Title</h1>

</div>
<div data-role="content">
    <p>Page content goes here.</p>
</div>
<div data-role="footer">
        <h4>Page Footer</h4>

    </div>
</div>

Answer 2

页面转换仅适用于加载AJAX的页面（通常是同一html文件中的其他页面或移动网站中的其他html文件）。

如果您实际上是将该网站迁移到其他网站，则无法使用转换。

根据您实际执行的操作，您可以转换到另一个具有IFRAME的本地页面，并在IFRAME中显示外部站点。但请注意，并非所有网站都允许自己在框架内查看。

这是 DEMO

<div data-role="page" id="index1">
    <div data-role="header">
            <h1>INDEX</h1>
    </div>
    <div data-role="content">   
        <a href="#index" data-transition="flip" class="ui-btn">Go to website</a>    
    </div>
</div>

<div data-role="page" id="index">
    <div data-role="header">
        <h1>External Website</h1>
    </div>
    <div data-role="content">
        <iframe id="theframe" src="http://jquerymobile.com/demos/" width="100%" height="400px">
        </iframe>
    </div>
</div>

您可以将IFRAME页面作为对话框加载，并可以将IFRAME的大小调整为设备等。

页面转换jQuery Mobile

2 个答案: