首先简答介绍一下JQueryMobile吧，我觉得用一句话来讲就是可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。这也是我自学jQuery Mobile的原因之一吧。

废话不多说，下面一起来看看如何使用它吧！

首先你可以从jQuerymobile.com 下载 jQuery Mobile库

1、安装，把下载的这三个文件导入进来

jquery.mobile-1.4.5.css

jquery-1.10.2.js

jquery.mobile-1.4.5.js

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

2、导入三个文件以后，下面就来简单的船建一个页面吧！

<body>
<div data-role="page">

  <div data-role="header">
    <h1>这是主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我在自学jQuery Mobile</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>

</div>
</body>

这样就能创建一个简单的页面了，效果图如下

解释一下几个属性吧

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

创建完一个界面以后，下面我们来看看如何添加一个页面

在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
例如 <a href="#pagetwo" data-transition="turn">转到页面二</a>
data-rel="dialog":点击（轻触）链接时创建一个对话框

上代码

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎! 点击以下链接跳转到第二个页面。 </p>
    <a href="#pagetwo">跳转到第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>这是第二个页面。点击以下链接跳转到第一个页面。</p>
    <a href="#pageone">跳转到第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

效果图的话，自己试试上面的代码就可以了。

翻页的时候还可以给页面添加过滤效果

例如：

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

想要了解更多的过滤效果请参考官网教程，这里就不一一演示了。

这次先介绍到这里吧，因为我也在自学中，暂时先介绍这么多吧。下次重点介绍一下jQueryMobile的组件的各种事件。

自学jQueryMobile之简单创建页面的更多相关文章

  1. JqueryMobile基础之创建页面

    首先简答介绍一下JQueryMobile吧,我觉得用一句话来讲就是可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备.这也是我自 ...

  2. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  3. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

  4. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  5. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  6. 使用requests简单的页面爬取

    首先安装requests库和准备User Agent 安装requests直接使用pip安装即可 pip install requests 准备User Agent,直接在百度搜索"UA查询 ...

  7. Tornado项目简单创建

    Tornado是使用Python编写的一个强大的.可扩展的Web服务器.它在处理严峻的网络流量时表现得足够强健,但却在创建和编写时有着足够的轻量级,并能够被用在大量的应用和工具中. tornado技术 ...

  8. 简单创建一个SpringCloud2021.0.3项目（二）

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上一篇教程 3. 创建公共模块Common 4. 网关Gateway 1. 创建Security 2. Security登陆配置 3 ...

  9. 简单创建一个SpringCloud2021.0.3项目（一）

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...

随机推荐

  1. 201521123055 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1. ...

  2. 201521123056 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 答: 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译 ...

  3. 201521123032《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 参考资料: 百度脑图 XMind 2. 书面作业 作业参考文件下载 1. 代码阅 ...

  4. 学号：201521123116 《java程序设计》第四周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)答:注释的插入:注释以/开始,以/结束类注释/**.... ...

  5. 【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass

    写在前面:        众所周知CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),在前期的界面样式设计时,需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于重复调用,尤其对于 ...

  6. Eclipse 版本选择

    查看Eclipse的版本号: 1. 找到eclipse安装目录 2. 进入readme文件夹,打开readme_eclipse.html 3. readme_eclipse.html呈现的第二行即数字 ...

  7. Unitty 3D 贪吃蛇 今日小记 -- 碰撞

    当蛇头碰撞到蛋的时候  应该让蛋消失并且重新创建蛋. void OnTriggerEnter    可以使用这个方法 下面附有这个方法的介绍 其次需要对挂载在之上的Object  check IsTr ...

  8. Linux 常用命令之二

    整理以前学习Linux的笔记. 查找目录.查看当前所在路径.新建文件.查看文件内容.修改文件内容.压缩文件操作.搜索命令.管道命令.查看进程.终止进程.查看端口. 7,命令find--查找目录 fin ...

  9. PHP防SQL注入攻击

    PHP防SQL注入攻击 收藏 没有太多的过滤,主要是针对php和mysql的组合. 一般性的防注入,只要使用php的 addslashes 函数就可以了. 以下是一段copy来的代码: PHP代码 $ ...

  10. MX4拍摄视频转码方法

    问题 使用魅族4手机拍摄的视频,其视频编码是H.265 目前大多数设备不支持解码,表现为常用播放器无法正常播放视频,剪辑软件无法剪辑视频. 解决方案 使用软件进行转码,期间尝试软件如下: 爱剪辑 部分 ...