我正在尝试将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
答案 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预发布已经发布了。尝试升级。