首先简答介绍一下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. 201521123053《Java程序设计》第十周学习总结

    ---恢复内容开始--- 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 在java多线程程序中,所有线程都不允许抛出未捕获的checked excepti ...

  2. 详解go语言的array和slice 【二】

    上一篇已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是slice需要注意的地方比较多.上一篇的最后讲解到创建新的slice时使用第三个索引来限制sl ...

  3. 关于sublime3的使用

    一.安装Package Control 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: import urllib.request,os; pf ...

  4. Akka（26）： Stream：异常处理-Exception handling

    akka-stream是基于Actor模式的,所以也继承了Actor模式的“坚韧性(resilient)”特点,在任何异常情况下都有某种整体统一的异常处理策略和具体实施方式.在akka-stream的 ...

  5. filter的两种使用方法

    1. 在模板中使用filter 我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下: {{ expression | filter }} 也可以多个filter连用,上一个 ...

  6. 在MAC OS X中默认的Web共享目录

    在Mac OS X中可以很方便的通过开启"Web共享"启用Apache服务:设置方法如下: 打开"系统设置偏好(System Preferences)" -&g ...

  7. Application->ProcessMessages();

    Application.ProcessMessages的用法意义   在循环中加Application.ProcessMessages是可以防止其他控件没响应,举个例子容易明白:假如你的窗体上有两个按 ...

  8. 利用python多线程实现多个客户端与单个服务端的远程ssh

    本次实验设计两个方面的代码,第一个是客户端,代码如下: import os from socket import * c = socket(AF_INET,SOCK_STREAM) c.connect ...

  9. Bear and Floodlight 状态压缩DP啊

    Bear and Floodlight Time Limit: 4000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u ...

  10. 集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序

    在2015年8月份的时候,决心学习图像算法. 几乎把当时市面上的图像算法相关书籍都看了一遍, 资金有限,采取淘宝买二手书,长期驻留深圳图书馆的做法, 进度总是很慢,学习算法不得其法. 虽然把手上所有书 ...