文档章节

jQueryMobile快速入门

笔阁
 笔阁
发布于 2015/11/16 09:26
字数 1484
阅读 1166
收藏 39

what

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 mobile-what.jpg

使用

  要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容:

  • CSS文件jquery.mobile-1.4.5.min.css

  • jQuery类库文件 jquery.min.js

  • jQuery Mobile文件 jquery.mobile-1.4.5.min.js

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

结构

  一个jQuery Mobile页面时你需要创建三块基本内容(头,正文,尾),要在html文档中的 head 标签内填写:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在body标签内填写:

<div data-role="page" id="pageone">
<div data-role="header"><h1>Page Title</h1></div><!-- /header -->
<div data-role="content"><p>Jquery mobile Test</p></div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page -->

代码解释:

  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
  • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
  • data-role="footer" 创建页面底部的工具栏

在jQuery Mobile中,可以在单一 HTML 文件中创建多个页面。通过唯一的id来分隔每张页面,在后面的代码编写中,推荐使用以上的构建方法来建立页面。

超链接

  jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。现在你可以使用前一节中的模板来创建一个包含三个跳转到其他页面的链接的导航页面:

<div data-role="page" id="menu">
   <div data-role="header"><h1>Menu</h1></div><!-- /header -->
   <div data-role="content">   
      <p>What vehicles do you like?</p>      
      <p><a href="#Cars">Cars</a></p>
      <p><a href="#Trains">Trains</a></p>
      <p><a href="#Planes">Planes</a></p>      
   </div><!-- /content -->
   <div data-role="footer" data-position="fixed"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page -->

  上面创建的导航页是我们在浏览器看到的第一个页面,接下来我们再添加三个“page”,他们有不同的id:Cars, Planes,Trains。

<div data-role="page" id="Cars">
   <div data-role="header">
      <h1>Cars</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of cars</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
   <div data-role="header">
      <h1>Trains</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of trains</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
   <div data-role="header">
      <h1>Planes</h1>
</div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of planes</p>
   </div><!-- /content -->
   <div data-role="footer">
   <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

现在我们已经建立完成了,去试一试吧

button

button.jpg

在jQuery Mobile中,按钮可通过三种方式创建:

使用 < button > 元素 使用 < input > 元素 使用带有 data-role="button" 的 < a >元素

<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>

  在 jQuery Mobile 中,按钮会自动样式化,让它们在移动设备上更具吸引力和可用性。我们推荐使用带有 data-role="button" 的< a >元素在页面间进行链接,使用< input >或< button >元素进行表单提交。

  默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true",如果想组合按钮,可以使用 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮。

<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#anylink" data-role="button">按钮 1</a>
    <a href="#anylink" data-role="button">按钮 2</a>
    <a href="#anylink" data-role="button">按钮 3</a>
</div>

可折叠块

zhedie.jpg

  可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记,默认情况下,内容是被折叠起来的。如需在页面加载时展开内容,请使用 data-collapsed="false":

<div data-role="collapsible" data-collapsed="false">
    <h1>点击我 - 我可以折叠!</h1>
    <p>我是可折叠的内容。</p>
</div>

当然可折叠块允许嵌套,如下代码:

<div data-role="collapsible">
    <h1>点击我 - 我可以折叠!</h1>
    <p>我是被展开的内容。</p>
    <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块!</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
    </div>
</div>

panel

panel.jpg

   jQuery Mobile中的面板会在屏幕的左侧向右侧划出。可以通过指定id的div元素添加 data-role="panel" 属性来创建面板。

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

panel标记必须置于头部、内容、底部组成的页面之前或之后。

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>面板头部..</h2>
    <p>面板中的一些文本内容..</p>
  </div>
  <div data-role="header">
      <h1>汇智网</h1>
   </div>
 </div>

  要访问面板,需要创建一个指向面板的链接,点击该链接即可打开面板:

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

  默认情况下,面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧,可以指定 data-position="right" 属性。

<a href="#myPanel" class="ui-btn ui-btn-inline"  data-position="right">打开面板</a>

  可以通过使用 data-display 属性来控制面板的展示方式:

<div data-role="panel" id="overlayPanel" data-display="overlay"> <!--覆盖显示-->
<div data-role="panel" id="revealPanel" data-display="reveal">   <!--滑动显示-->
<div data-role="panel" id="pushPanel" data-display="push">       <!--推动显示-->
</div></div></div>

  可以使用按钮来关闭面板:仅需要在面板的div中添加 data-rel="close" 属性。

<div data-role="panel" id="myPanel"> 
  <h2>面板头部..</h2>
  <p>面板中的一些文本内容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
</div>

更多示例内容及在线练习参考: http://www.hubwiz.com/course/5640589f9bb934437751117b/

© 著作权归作者所有

下一篇: phonegap入门实战
笔阁
粉丝 223
博文 218
码字总数 492488
作品 0
海淀
程序员
私信 提问
加载中

评论(2)

笔阁
笔阁 博主

引用来自“kideny”的评论

用这个做过一个H5的手机站,很舒服的过程。
,愿意写一个实战共享课程分享给大家吗?
卖爷爷的老红薯
卖爷爷的老红薯
用这个做过一个H5的手机站,很舒服的过程。
jQuery Mobile 入门教程

你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机。android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统...

JK_OPERA
2014/09/05
33
0
GBin1教程:使用jQuery Mobile快速开发一个手机网站

日期:2011/10/25 来源:GBin1.com jQuery mobile已经慢慢进入了web开发人员的视野,随着jQuery mobile框架的发展,使用jQuery mobile开发手机端应用将会成为一个趋势,今天GBin1带给大家一个...

gbin1
2011/10/25
177
0
我又两个关于JqueryMobile的问题想请教一下大家

1.如何让某些元素不继承JqueryMobile的样式? 比如说:这个DIV标签下所有元素,、等这些就跟没使用JqueryMobile之前是一样的。

巴喇巴喇小魔仙
2014/09/15
198
1
8 个最新的 jQuery Mobile 在线教程推荐

jQuery Mobile目前已经发布了RC2版本, 随着类库的完善,jQueryMobile必将成为移动端开发的利器之一,今天我们收集了2011年最新的8个jQuery移动开发教程,从最简单的入门介绍,到高级的开发应...

MrMign
2011/11/01
4.1K
3
jquery和jquerymobile的区分

您好,我想请教一个问题,我们平时做web站的jquery和jquerymobile在应用上的区分很严格吗?在手机上可以用jquery,而不用jquerymobile,去实现类似图片滑动等效果吗?谢谢...

宁宁-这名很受欢迎吗
2011/08/01
2.3K
8

没有更多内容

加载失败,请刷新页面

加载更多

关于运维,该怎么决定它的方向,这个似工作又似兴趣的存在

我之前主要从事网络、桌面、机房管理等相关工作,这些工作使我迷惘,这应该是大多数运维人都经历过的过程; 18年国庆,我从国内前三的消费金融公司裸辞,下海创业,就是想要摆脱这样的困境。...

网络小虾米
22分钟前
5
0
Java Timer的用法

Timer timer = new Timer(); timer.schedule(new TimerTask() { public void run() { System.out.println("11232"); } }, 200000 , 1000); public void schedule(TimerTask task, long delay......

林词
26分钟前
4
0
使用js动态加载外部js文件以及动态创建script脚本

动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该DOM动态添加的脚本。和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码。 动态加载外的外...

Bing309
33分钟前
3
0
从零开始入门 K8s | Kubernetes 网络概念及策略控制

作者 | 阿里巴巴高级技术专家 叶磊 一、Kubernetes 基本网络模型 本文来介绍一下 Kubernetes 对网络模型的一些想法。大家知道 Kubernetes 对于网络具体实现方案,没有什么限制,也没有给出特...

阿里巴巴云原生
37分钟前
3
0
天气获取

本文转载于:专业的前端网站➨天气获取 $.get("http://wthrcdn.etouch.cn/WeatherApi", { citykey: cityCode }, function (d) { //创建文档对象 var parser = new ......

前端老手
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部