首先简答介绍一下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. [转载]sqlserver、Mysql、Oracle三种数据库的优缺点总结

    一.sqlserver优点:易用性.适合分布式组织的可伸缩性.用于决策支持的数据仓库功能.与许多其他服务器软件紧密关联的集成性.良好的性价比等:为数据管理与分析带来了灵活性,允许单位在快速变化的环境中 ...

  2. 201521123103 《java学习笔记》 第十周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 二.书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  3. 201521123080《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 1.网络编程概述 (1)网络模型 OSI参考模型 TCP/IP参考模型 (2)网络通讯要素 IP地址 端口 ...

  4. YYHS-鏖战字符串

    题目描述 Abwad在nbc即将完成她的程序的时候,急中生智拔掉了她电脑的电源线,争取到了宝贵的时间.作为著名论文<论Ctrl-C与Ctrl-V在信息学竞赛中的应用>的作者,他巧妙地使用了 ...

  5. JVM菜鸟进阶高手之路十二（jdk9、JVM方面变化， 蹭热度）

    转载请注明原创出处,谢谢! 经过 4 次跳票,历经曲折的 Java 9 正式版终于发布了!今天看着到处都是jdk9发布了,新特性说明,心想这么好的蹭热度计划能错过嘛,哈哈,所以就发了这篇文章. 目前j ...

  6. OC——关于KVC

    我们知道在C#中可以通过反射读写一个对象的属性,有时候这种方式特别方便,因为你可以利用字符串的方式去动态控制一个对象.其实由于ObjC的语言特性,你根部不必进行任何操作就可以进行属性的动态读写,这种方 ...

  7. S3C2440 时钟设置分析(FCLK, HCLK, PCLK)

    时钟对于一个系统的重要性不言而喻,时钟决定了系统发送数据的快慢,高性能的芯片往往能支持更快速度的时钟,从而提供更好的体验. S3C2440的输入时钟频率是12MHZ,对于这款芯片,显然速度是不够的,所 ...

  8. 研磨SpringCloud系列(一)第一个Spring Boot应用

    在此之前,给大家推荐几个东西. STS,Spring官方基于eclipse做的扩展ide.Spring官方背书. 第二个,lombok,注解生成get/set,构造以及基本方法的插件,"隐藏 ...

  9. 五年 Web 开发者 star 的 github 整理说明

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:樊东东 前端从业几年,积累了不少github开源库. 有时候想查阅以前star的库,但不好找,github大多库都是英文说明,对中文 ...

  10. Cow Sorting hdu 2838

    Cow Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...