首页 > 代码库 > HTML5开发移动web应用—JQuery Mobile(1)
HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery一样，引入必要的文件就可以。
最基础的jQuery Mobile文件的结构代码例如以下：
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>在此处插入标题</h1>
</div>
<div data-role="content">
<p>在此处插入正文</p>
</div>
<div data-role="footer">
<h1>在此处插入页脚文本</h1>
</div>
</div>
</body>依据上面的样例，我们首先研究一下。主要的JQuery Mobile框架的用法。1、data-role
通过data-role，我们能够定义页面中某个部分的作用。而JQuery Mobile会依据定义的值，自己主动进行解析，为其设定对应的样式或功能。在上面的代码中。我们首先定义了一个data-role为page的div，表明这个div及其内部的全部组件都是一个单独的页面（之后会具体解说）。之后，是手机页面中很普通的结构定义：header、content以及footer,他们也各自通过data-role来实现各自的角色的定义。
2、全然的html
能够看出，JQuery Mobile在实现页面布局的时候採用html+css的形式，特表依赖在标签中的定义，和我们之前学习的Sencha Touch等框架截然不同。这决定了JQuery Mobile在使用起来更加简便，学习成本更低：没有复杂的载入机制，没有庞大的JavaScript代码，仅仅要在html内部进行标签的定义就能够实现页面的基本布局。
3、id的使用
我们为page也定义了一个id。在JQuery Mobile中，id非经常使用药。它有一个非常大的作用就是实现页面的转换。
id表明了页面。在跳转时调用就可以转到指定的界面中。
HTML5开发移动web应用—JQuery Mobile(1)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。