如何在本地托管的jQuery移动项目上正确链接相关页面?

时间:2017-03-25 02:59:07

标签: jquery-mobile

所以我最近开始学习jQuery移动框架,我一直在使用代码编辑器在手机上练习,一切正常。

我已将jQuery库添加到我的 index.html 页面,如下所示:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

如果我在索引文件中使用“多页”方法,一切看起来都很完美但是当我尝试创建一个外部文件时,如: about.html 并尝试链接到它,框架会给我一个“错误加载页面”消息。当我尝试链接图像时会发生同样的情况,它们不会显示出来。

所有文件都在同一根文件夹中,因此不需要斜杠。我怎么能解决这个问题并继续练习相对路径文件?我不喜欢在一个文档中包含很多页面。

1 个答案:

答案 0 :(得分:0)

你可以拥有多个html,多个js文件作为控制器......

在index.html中,您有以下div:

<div data-role="page" id="pageIndex"></div>

加载充当控制器的所有相应js文件。

在设备就绪或后续控制器中使用更改页面:

$.mobile.changePage("login.html");

每个单独的html页面都有页面ID:

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

并且其各自的控制器将具有pageshow事件以在更改页面上加载正确的html。

$(document).on("pageshow", "#pageLogin", function() { // code for page login };