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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Java流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有 ...

  2. eclipse版本选择

    Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代IDE开发环境,2001年11月贡献给开源社区,现在它由非营利软件供应商联盟Eclipse基金会. Ec ...

  3. Spring REST API + OAuth2 + AngularJS

    http://www.baeldung.com/rest-api-spring-oauth2-angularjs 作者:Eugen Paraschiv 译者:http://oopsguy.com 1. ...

  4. Mysql数据库文件、表、记录的增删改查

    一.数据库文件夹的的操作 create database db1 charset utf8; 增加db1文件夹 show databases ; 查看所有数据库 show create databas ...

  5. python读取外部文件

    >>> pd.read_excel('c://111.xlsx') 年度排名 历史排名 电影名称 总票房 总人次 总场次 上映年份 操作 0 1 1 美人鱼 NaN -- -- 20 ...

  6. 对IO流的操作(文件大小，拷贝，移动，删除)

    import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.Fi ...

  7. net core 安装web模板

    ---恢复内容开始--- 今天想试试在Linux用C#开发WebAPI,查了下,要用: dotnet new -t Web 来建立工程,结果我试了下,出来这段: Invalid input switc ...

  8. Https系列之一：https的简单介绍及SSL证书的生成

    Https系列会在下面几篇文章中分别作介绍: 一:https的简单介绍及SSL证书的生成二:https的SSL证书在服务器端的部署,基于tomcat,spring boot三:让服务器同时支持http ...

  9. 压缩感知中的lp球：p范数最优化为什么总会导致一个稀疏的解的原因

    转自:彬彬有礼. 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因 http://blog.csdn.net/jbb0523/article/details/40268943 题目: ...

  10. IDEA——IDEA使用Tomcat服务器出现乱码问题

    最近刚使用IDEA,在开发一个功能的时候,开始使用Jetty作为容器进行web项目开发,测试通过.然后想了一下线上服务器使用的容器是Tomcat,还是用Tomcat跑一下项目在测试一下,本地和服务器使 ...