HTML5开发移动web应用—JQuery Mobile(1)

时间 2019-12-07

标签 html5 html 开发移动 web 应用 jquery mobile 栏目 HTML5 繁體版

原文原文链接

JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery同样，引入必要的文件就能够。css

最基础的jQuery Mobile文件的结构代码例如如下：html

<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框架的用法。

一、data-roleweb

经过data-role，咱们可以定义页面中某个部分的做用。而JQuery Mobile会依据定义的值，本身主动进行解析，为其设定对应的样式或功能。在上面的代码中。咱们首先定义了一个data-role为page的div，代表这个div及其内部的所有组件都是一个单独的页面（以后会具体解说）。以后，是手机页面中很普通的结构定义：header、content以及footer,他们也各自经过data-role来实现各自的角色的定义。app

二、全然的html框架

可以看出，JQuery Mobile在实现页面布局的时候採用html+css的形式，特表依赖在标签中的定义，和咱们以前学习的Sencha Touch等框架大相径庭。这决定了JQuery Mobile在使用起来更加简便，学习成本更低：没有复杂的载入机制，没有庞大的JavaScript代码，仅仅要在html内部进行标签的定义就可以实现页面的基本布局。布局

三、id的使用post

咱们为page也定义了一个id。在JQuery Mobile中，id非常常使用药。它有一个很是大的做用就是实现页面的转换。学习

id代表了页面。在跳转时调用就能够转到指定的界面中。spa