您的位置:首页 > Web前端 > JQuery

jQuery Mobile: jqm示例代码不能正常工作

2011-09-15 01:46 232 查看
您可能会遇到jquery mobile在线文档中的代码不能正常工作。
正常情况下,在线文档中的代码会在jqm脚本执行过程中被动态更改,从而呈现出jqm特有的丰富界面体验。
但如果使用不当,则可能什么效果也没有,而显示为普通网页或者根本显示不出来。

比如下面的代码用于创建类似于iPhone本地应用的2选1选择器:
<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

如果在你的程序里不能正常显示,通常需要检查如下几点:
1、jqm的js/css是否能正常加载
2、jq/jqm版本是否兼容,最好都是最新的
3、有没有按照jqm的规则来写html页面

对于1,直接把jquery.js/jquery.mobile.js都放在js目录下,相关的jquery-ui.css和jquery.mobile.css都放在css目录下,不必创建新的子目录。
对于3,主要指的是jqm的body需要按照下面的方式编写:
<div data-role="page" data-theme="b" id="your_home">
这样jqm加载的时候会找到page中的相应控件作动态替换,从而展现出漂亮的特效。
切忌混用老的框架代码和jqm的编码约定。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: