首先声明:jquery mobile 版本不同,代码差距比较大,建议使用最新版本---1.4.5;
注:复制官网上的代码时,需要注意空格删除!否则页面样式可能出现空行或者错位;
教程主页:http://www.w3school.com.cn/jquerymobile/(有时候自学也是一种选择!有图,有真相!)
1.引入js、css注意顺序;
1)自定义主题:
官网上http://themeroller.jquerymobile.com/进行更改后右上角download,下载即可使用!
<link rel="stylesheet" href="resources/themes/my-custom-theme.min.css" /> --自定义主题
<link rel="stylesheet" href="resources/themes/jquery.mobile.icons.min.css" /> --自定义主题
<link rel="stylesheet" href="resources/njs/itd/brag/jquery.mobile.structure-1.4.5.min.css" />
<script src="resources/njs/itd/brag/jquery-1.11.1.min.js"></script>
<script src="resources/njs/itd/brag/index.js"></script> --注意顺序
<script src="<%=basePath %>resources/njs/itd/brag/jquery.mobile-1.4.5.min.js"></script>
---默认主题;
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
2.页面布局:(可以进多个模块的嵌套)
<div data-role="page" data-title="分支列表" >
<div data-role="header" data-position="fixed" data-theme="a"></div>