码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-07-22 11:07:39      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:content   标签   track   mod   一个   指定   span   rac   复杂   

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)

标签:content   标签   track   mod   一个   指定   span   rac   复杂   

原文地址:http://www.cnblogs.com/jhcelue/p/7220381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!