KM盒子APP制作软件

KM盒子如何使用jquery mobile制作页面

时间:2016-11-29 09:25 点击:

第一步,在左侧栏目,知识文库节点上右键选择首页自定义设置,如下图:

 

第二步,在右侧自定义页面代码编辑器中右键选择新建首页模版,如下图:

 

然后选择一个路径,保存后会自动生成了一个基于jquery mobile的页面代码,如下: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="html/css/mobile.css" rel="stylesheet" />
<script type="text/javascript" src="html/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="html/js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header"><h1>页面一标题</h1></div>
<div data-role="content"><p>欢迎您使用KM盒子</p><a href="#page2">转到页面二</a></div>
<div data-role="footer"><h1>版权版有 @ KMAPK</h1></div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h1>页面二标题</h1></div>
<div data-role="content"><p>感谢您使用KM盒子</p><a href="#page1">转到页面一</a></div>
<div data-role="footer"><h1>版权版有 @ KMAPK</h1></div>
</div> 
</body>
</html>

同时会在保存的路径上生成一个html的文件夹,其中包含了引用到的js和css文件,以及相应的图标文件。同时html文件夹也可以用来存放其他用到的html文件。

上面代码div中的data-role属性为jquery mobile自定义属性,其参数意义如下:

data-role="page" 是显示在浏览器中的页面

data-role="header" 创建页面头部的工具栏

data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等

data-role="footer" 创建页面底部的工具栏

 


我要纠错