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

您可能会遇到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的编码约定。