近期使用jQuery mobile做项目时遇到的问题小结

最近运用jQuery mobile框架做了一个小项目，针对遇到的几个问题做一下总结。

一、在页面跳转过程中（即从page1 => page2），此时，page2 的js效果失效，无法实现动态效果，刷新page2 页面后，才可以实现。

解决：在index页面中，注册所有需要使用到的外部JS文件，或者使用母版页面来统一；将页面内部JS写在data-role="page"标签下，这样无论页面怎样跳转，均可以运行。

二、在页面跳转过程中，由于每个单独页面引用的css文件不同，会导致样式冲突。

解决：这是因为jQuery mobile里面页面跳转默认都是通过ajax请求的。如果是通过a标签的href属性实现跳转，可以在a标签里加上  data-ajax=“false”  ，来避免样式的冲突。

三、在jQuery mobile的手机端页面中，form表单下的label 和 input 不能在同一行显示。

解决：可以在form下加一个 table，运用table的 tr td进行布局，

<form action="">
            <table>
                <tr>
                    <td><label for="unumber">工      号:</label></td>
                    <td><input type="text" name="unumber" id="unumber" placeholder="请输入工号"/></td>
                </tr>
                <tr>
                    <td><label for="upwd1">原始密码:</label></td>
                    <td><input type="text" name="upwd1" id="upwd1" placeholder="请输入原始密码"/></td>
                </tr>
                <tr>
                    <td><label for="upwd2">新  密 码:</label></td>
                    <td><input type="text" name="upwd2" id="upwd2" placeholder="请输入新密码"/></td>
                </tr>
                <tr>
                    <td><label for="checkPwd">确认密码:</label></td>
                    <td><input type="text" name="checkPwd" id="checkPwd" placeholder="请再次输入新密码"/></td>
                </tr>
            </table>
            <br/>
            <a href="../login.html" data-ajax='false' class="ui-btn ui-corner-all jump">确 定</a>
        </form>

实现的效果如下：

以上，是现阶段的小结，后续有新问题再更。。。