一】、jQuery Mobile 页面

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <!--移动端最基本配置-->

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

     <title></title>

     <!--引入jQuery Mobile样式结构-->

     <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/>

 </head>

 <body>

 <!--定义一个jQueryMobile页面-->

 <div data-role="page">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--引入jQuery-->

 <script src="jquery/jquery-1.12.1.min.js"></script>

 <!--引入jQuery.Mobile.js-->

 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>

 <script src="script.js"></script>

 </body>

 </html>

 

多个页面以及对话框的跳转：

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <!--移动端最基本配置-->

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

     <title></title>

     <!--引入jQuery Mobile样式结构-->

     <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/>

 </head>

 <body>

 <!--定义一个jQueryMobile页面-->

 <div data-role="page" id="page1">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page2">点击跳转到第二个页面</a>

         <a href="#page3">弹出对话框</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第二个页面-->

 <div data-role="page" id="page2">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第三个页面，是一个对话框data-dialog="true" -->

 <div data-role="page" data-dialog="true" id="page3">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--引入jQuery-->

 <script src="jquery/jquery-1.12.1.min.js"></script>

 <!--引入jQuery.Mobile.js-->

 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>

 <script src="script.js"></script>

 </body>

 </html>

二】、jQuery Mobile 页面切换

比较友好化的几个效果：
1.淡入 data-transition='fade'
2.弹出 data-transition='pop'
3.滑动 data-transition='slide' （不太好）
4.从右到左滑动并淡入 data-transition='slidefade'
5.从上到下滑动 data-transition='slidedown'
6.颠倒返回效果 data-transition="slidedown" data-direction="reverse"
7.没有切换效果 data-transition='none'
从后向前翻转（中心点是y轴）data-transition='flip'

 <!-- 定义翻页效果，默认是淡入淡出，data-transition -->

 <!--定义一个jQueryMobile页面-->

 <div data-role="page" id="page1">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <!--.ui-content设置默认边距-->

     <div data-role="main" class="ui-content">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page2" data-transition="flip">点击跳转到第二个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第二个页面-->

 <div data-role="page" id="page2">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main" class="ui-content">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1" data-transition="none">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

jQueryMobile（一）的更多相关文章

  1. html5+jqueryMobile编写App推广注册页

    html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...

  2. [deviceone开发]-do_Webview加载JQueryMobile的示例

    一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...

  3. jQueryMobile示例页面代码

    这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...

  4. jQueryMobile 网页在UC等游览器上无法正常显示或者是无法自适应设备大小，但在QQ游览器上能正常显示的解决方法

    造成jQueryMobile网页在QQ游览器上能正常显示,在UC等游览器上无法正常显示或者是无法自适应设备大小的解决方法: 在<head>标签间添加<meta name=" ...

  5. jQueryMobile引入文件后样式无法正常显示

    jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:

  6. jquerymobile仿微信 - 01

    jquerymobile仿微信 - 01 jquerymobile的组件感觉不咋地哇 本地调试最好是开一个web server,不然数据访问会有问题 <div data-role="p ...

  7. Jquerymobile 简单安装

    需要导入三个文件jquery,jquerymobile,css(jquerymobile地址:http://jquerymobile.com/) <script src="js/jqu ...

  8. jquerymobile页面跳转和参数传递

    http://blog.csdn.net/chen052210123/article/details/7481578 页面跳转: 页面跳转时pagebeforechange事件会被触发两次,通过$(d ...

  9. jquery-mobile之loading加载自定义

    用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行.而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直 ...

  10. JqueryMobile入门基础附源码下载

    最近要做一个手机版的网站,所以就了解了一点JqueryMObile,下面是我整理的笔记,现在分享给大家,希望朋友们喜欢,先给个首页看看吧!!! 一.JqueryMobile基本页面结构 <!DO ...

随机推荐

  1. linux模式切换，进程切换

    内核态和用户态的切换: 用户态到内核态的转换:1.进行系统调用,2.异步中断,3.外部硬件中断 检查特权级别的变化:当异常发生在用户态,而异常处理函数则必须运行在内核态,则此时必须调用内核态的堆栈(系 ...

  2. Django 12 中间件、上下文处理器和admin后台

    Django 12 中间件.上下文处理器和admin后台 一.中间件 #Django中间件 (Middleware) # 一个轻量级.底层的“插件”系统,可以介入Django的请求和响应处理过程,修改 ...

  3. C语言中typedef的解释_2

    typedef工具是一个高级数据特性.利用typedef可以为某一类型自定义一个新的名称.这样可以提高程序的可读性,可移植性,向用户表明特定用途. typedef没有创建任何新的类型,它只是为某个已存 ...

  4. 何为 “元组”（Tuple）？

    元组是关系数据库中的基本概念,关系是一张表,表中的每行(即数据库中的每条记录)就是一个元组,每列就是一个属性.  在二维表里,元组也称为记录.

  5. 增加tomcat多实例

    第一步:解压 第二步:修改端口 /data/service/tomcat1/conf <Server port="8006" shutdown="SHUTDOWN& ...

  6. .NET Core单元测试覆盖率统计coverlet配置和使用

    https://segmentfault.com/a/1190000017569492 需要使用: 使用 Moq 测试.NET Core 应用    https://www.cnblogs.com/c ...

  7. java——cmd命令编译带包名的源程序

    .java文件的绝对路径:C:\eclipse-workspace\test_01\src\test\try.java try.java的包名为:package test; 在cmd中 cd C:\e ...

  8. vue--钩子函数1

    最近在学习自定义指令,这里做个整理 vue允许注册自定义指令,在2.0中,代码复用和抽象的主要形式是组件.然而有的情况下仍需要对普通DOM元素进行底层操作,这时就会用到自定义指令. 全局指令direc ...

  9. tcp 粘包 和 TCP_NODELAY 学习

    TCP通信粘包问题分析和解决  在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送端为 ...

  10. ztree 获取最下级的子节点内容

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...