HTML5移动app开发框架—JQuery Mobile浅析(1)-职坐标

HTML5移动app开发框架—JQuery Mobile浅析(1)

沉沙 2018-06-20 来源：阅读 2402 评论 0

摘要：JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery一样，引入必要的文件即可。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

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表明了页面，在跳转时调用即可转到指定的界面中。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

web前端开发app h5移动端开发 html5教程w3c

本文由 @沉沙发布于职坐标。未经许可，禁止转载。