首先简答介绍一下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. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

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

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

  5. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  6. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  7. 微信小程序基础之创建使用教程

    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取 ...

  8. Vue小案例 之 商品管理------创建页面与部分数据

    logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...

  9. delphi 使用工控机控件 iThreadTimes 出现问题， 导致主程序创建页面的时候， 阻塞消息， 不能正常执行。

    delphi  使用工控机控件 iThreadTimes 出现问题, 导致主程序创建页面的时候, 阻塞消息, 不能正常执行. 使用这个控件需要小心 function Tfrm_MainIPC.Open ...

随机推荐

  1. 201521123060 《Java程序设计》第9周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2.书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1截图你的提交结果(出现学号) 1.2自己以前编写 ...

  2. select应用于read函数 超时非阻塞方式

    /* * "Timed" read - timout specifies the # of seconds to wait before * giving up (5th argu ...

  3. python 浅析模块

    今天买了一本关于模块的书,说实话,模块真的太多了,小编许多也不知道,要是把模块全讲完,可能得出本书了,所以小编在自己有限的能力范围内在这里浅析一下自己的见解,同时讲讲几个常用的模块. 首先说一下对模块 ...

  4. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

  5. 01快速入门-04-Map、Set和iterable（ES6）

    1.Map 我们知道,在JS中其实对象的方式就跟Java中的Map极为相似,即键值对的方式.JS中,key必须是字符串,实际上Number等值作为key也是合理的,所以为了解决这个问题,在最新的ES6 ...

  6. System.getProperty()参数大全

    System.getProperty()获取Java各种配置属性,参数如下: Java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vend ...

  7. Activiti-03-query api

    Query API 有两种方式从引擎中查询数据, 查询 API 和本地查询. API方式:   List<Task> tasks = taskService.createTaskQuery ...

  8. 【Spring源码深度解析系列 】Spring整体架构

    一.Spring的整体架构和模块 二.模块分类: 1.Core Container Core Container包含有Core .Beans.Context.和Expression  Language ...

  9. Linux Ubuntu从零开始部署web环境及项目-----搭建ssh环境(一)

    linux搭建ssh环境 1,用户登录 成功输入用户名和密码后 进入Ubuntu界面  2,配置网络 参考:http://blog.csdn.net/liu782726344/article/deta ...

  10. Java中迭代器Iterator的使用

    Java集合类中Map接口下的相关类并没有像Collection接口的相关类一样实现get()方法,因此在要实现遍历输出的场景中没法直接用get()方法来取得对象中的数据,但Java本身提供了另一种遍 ...