jQuery移动多个HTML文件_Html_Cordova_Jquery Mobile

jQuery移动多个HTML文件

html cordova jquery-mobile

jQuery移动多个HTML文件,html,cordova,jquery-mobile,Html,Cordova,Jquery Mobile,这很烦人，但我正在构建一个jQuery移动站点。但是如果我有一个名为about的页面，我希望这个页面位于一个名为about.html的文件中。我确实设法让它工作，但突然间我无法获得一个链接来打开一个单独的页面。我尝试过各种方法，现在我得到了一张白纸下面是我一直在处理的测试代码：索引： <!DOCTYPE html> <html> <head> <title>Notification Example</title&g

这很烦人，但我正在构建一个jQuery移动站点。但是如果我有一个名为

about

的页面，我希望这个页面位于一个名为

about.html

的文件中。我确实设法让它工作，但突然间我无法获得一个链接来打开一个单独的页面。我尝试过各种方法，现在我得到了一张白纸

下面是我一直在处理的测试代码：

索引：

<!DOCTYPE html>
<html>
    <head>
        <title>Notification Example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            // Wait for PhoneGap to load
            //
            function onLoad() {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            // PhoneGap is ready
            //
            function onDeviceReady() {
                // Empty
            }

            $('#about').live('pagecreate',function(event){ AboutTest(); });
            $('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); });

            function AboutTest(){
                var element = document.getElementById('deviceProperties');

                element.innerHTML = 'Device Name: '     + device.name     + '<br />' +
                                    'Device PhoneGap: ' + device.phonegap + '<br />' +
                                    'Device Platform: ' + device.platform + '<br />' +
                                    'Device UUID: '     + device.uuid     + '<br />' +
                                    'Device Version: '  + device.version  + '<br />';
            }
        </script>
    </head>
    <body onload="onLoad()">
        <div data-role="page" id="home">
            <div data-role="header"><h2>Page 1</h2></div>
            <div data-role="content">
                <a href="about.html" data-url="about.html">testing</a>
            </div><!-- /content -->
            <div data-role="footer"><h4>Footer</h4></div>
        </div><!-- /page -->
    </body>
</html>

现在一切都很好，JavaScript代码运行了，等等。然后我改变了一些东西。我不知道是什么，但我把它弄坏了，我一辈子都看不见它。将所有页面都放在一个页面中的想法似乎是如此愚蠢和毫无意义。

您必须将“关于”页面的代码作为一个单独的div包含在主索引页面中。除非您有特殊理由拥有多个页面？这也会加快页面加载速度（使所有内容保持在同一页面上）

所以索引现在应该有：

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

    <div data-role="header"><h2>Page 1</h2></div>

    <div data-role="content"></div>

    <div data-role="footer"></div>

</div>

<div data-role="page" id="about" data-title="about">

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

    <div data-role="content"><p id="deviceProperties">Loading device properties...</p>      </div>

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

</div>


第1页
第2页
加载设备属性…
页脚

这有意义吗

另外，您正在经历加载jQuery的过程，因此您应该真正使用jQuery的内置DOM导航来更新div内容——这要容易得多！然后可以删除所有onLoad（）事件等

如果您想在真实的外部页面中加载页面（如OP所述），还可以将rel=“external”添加到“about”链接中。

如果您从内容中的链接中删除

“data url='about.html'”

，这对我有效。此属性用于页面div

第二个页面（about.html）可以是一个完整的html页面，只要它包含正文中的当前文本。jquerymobile就是这样工作的，因为它将加载整个文件，然后提取页面div。如果这看起来更合理的话，您可以将一个页面中的多个页面看作是在DOM中缓存内容的一种方式

指向“外部页面”的链接必须具有以下属性：

rel="external"

您可以选择添加

数据ajax=“false”

因此，您的链接看起来像：

<a href="about.html" data-url="about.html" rel="external">testing</a>

或

否如果你阅读了我的帖子，我已经说过我已经让它处理了不同的文件，在一个文件中没有意义不是因为我在做什么，但我会尝试附加的rel标签，看看是否有效果，但在它开始工作之前，设置nid url和数据url以及boom和flowed，然后对我的页面进行一些更改，但这些更改不再有效。您清空了缓存，然后重试加载页面，对吗？如果你做了一些更改，你需要先清空浏览器缓存…是的，缓存完成了，现在已经有了所有的html要显示，只是失去了样式和连接？？？？bizzare因为我的defo运行了这个函数，所以有了aboutset（）函数，它实际上在加载后填充了一个单独的文件，就像手册上说的，它应该使用ajax或hijax加载所有页面？？？它刚刚停止了？明白了，在页面（about.html）上，页面div必须有数据url，一个类链接只是一个普通的链接，没有别的，javascript事件绑定到类a上，一切正常。为什么我们需要禁用数据ajax并将其设为false？另外，当我使用rel时，过渡效果消失了，有什么线索吗？

<a href="about.html" data-url="about.html" rel="external">testing</a>

<a href="about.html" data-url="about.html" rel="external" data-ajax="false">testing</a>