jQuery Mobile中的动态链接会丢失格式

时间:2011-02-03 18:29:42

标签: jquery jquery-mobile

我正在尝试将jQuery Mobile用于移动网站(在尝试和放弃jQTouch之后),我认为这将会很好地运作。但是,当超链接到第二页时,我遇到了格式问题。

我有一个主index.php页面,其中包含我想要显示的所有静态信息。我将有两个链接将SQL调用到数据库中以获取信息 - 对于这些,我将从index.php中取出代码并调用单独的页面:ucd.php。第二页加载一个动态列表,向下钻入数据库,直到他们选择他们正在寻找的汽车。我的问题是当你从索引页面链接到ucd.php时,页面的CSS格式消失了。如果我自己加载ucd.php,它格式正确。如果我去index-> ucd.php->列表选择,索引被格式化,ucd.php未格式化,第一个动态列表选项被格式化。

我注意到的一件事是,当调用ucd.php时,它会将地址栏中的URL更改为“http://localhost/#ucd.php” - 而不是“http:// localhost / ucd”。 PHP的”。从我在jQuery Mobile网站上看到的内容来看,它是为了在散列中正确保存历史记录。这会导致任何格式问题吗?

(由于空间原因,所有页面都启动并完成了正确的脚本加载.jQuery Touch 1.0a2,jQuery 1.4.4)

index.php:
<div id="mainpage" data-role="page" data-theme="a">
 <div data-role="header" data-theme="a">
  <h1>Car Dealership</h1>
 </div><!-- header --> 
 <div data-role="content">
  <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
   <li><a href="ncd.php" data-transition="slide">Search New Cars</a></li>
   <li><a href="ucd.php" data-transition="slide">Search Used Cars</a></li>
   <li><a href="#service" data-transition="slide">Service/Parts Info</a></li>
   <li><a href="#location" data-transition="slide">Find Us</a></li>
   <li><a href="tel:8888675309" data-transition="slide">Call Us @ 888-867-5309</a></li>
   <li><a href="#hours" data-transition="slide">Hours of Operation</a></li>
  </ul>
 </div><!-- content -->
 <div data-role="footer" data-theme="a">
  <h4>Thanks for visiting us!</h4>
 </div><!-- footer -->
</div>

我只是粘贴.php页面输出的HTML代码

ucd.php:
<div id="ucdmain" data-role="page" data-theme="a">
<div data-role="header" data-theme="a">
 <h1>Used Cars</h1>
</div><!-- header --> 
<div data-role="content">
 <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li><a href="ucd.php?ucd=make&make=Chevrolet" data-transition="slide">Chevrolet</a></li>
<li><a href="ucd.php?ucd=make&make=Chrysler" data-transition="slide">Chrysler</a></li>
<li><a href="ucd.php?ucd=make&make=Dodge" data-transition="slide">Dodge</a></li>
<li><a href="ucd.php?ucd=make&make=Ford" data-transition="slide">Ford</a></li>
<li><a href="ucd.php?ucd=make&make=GMC" data-transition="slide">GMC</a></li>
<li><a href="ucd.php?ucd=make&make=Honda" data-transition="slide">Honda</a></li>
<li><a href="ucd.php?ucd=make&make=Hyundai" data-transition="slide">Hyundai</a></li>
<li><a href="ucd.php?ucd=make&make=Infiniti" data-transition="slide">Infiniti</a></li>
<li><a href="ucd.php?ucd=make&make=Jeep" data-transition="slide">Jeep</a></li>
<li><a href="ucd.php?ucd=make&make=Lincoln" data-transition="slide">Lincoln</a></li>
<li><a href="ucd.php?ucd=make&make=Nissan" data-transition="slide">Nissan</a></li>
<li><a href="ucd.php?ucd=make&make=Toyota" data-transition="slide">Toyota</a></li>
<li><a href="ucd.php?ucd=make&make=Volkswagen" data-transition="slide">Volkswagen</a></li>
 </ul>
</div><!-- content -->
<div data-role="footer" data-theme="a">
 <h4>Thanks!</h4>
</div><!-- footer -->

提前感谢您的帮助, Josh Hogan

2 个答案:

答案 0 :(得分:1)

通过手动绑定,我能够在alpha3中解决这个问题

首先关闭autoInitialize

$(document).bind("mobileinit", function () {
    $.extend($.mobile, {
        autoInitialize: false
    });
});

然后在动态构建页面后,手动初始化jquery mobile

$(function () {
    yourdynamicfunction();
    $.mobile.initializePage();
});

答案 1 :(得分:0)

假设你很好地定义了<script>标签并且你正确地使用了JQM(看起来像你这样做),这可能是我用JQM alpha2和jquery 1.4.4看过几次的问题。 尝试使用jquery 1.4.3查看它是否开始工作。

另外 - 今天JQM alpha3已经发布,jquery 1.5预发布已经发布了。尝试升级。