一】、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. Java NIO看这一篇就够了

    原文链接:https://mp.weixin.qq.com/s/c9tkrokcDQR375kiwCeV9w? 现在使用NIO的场景越来越多,很多网上的技术框架或多或少的使用NIO技术,譬如Tomca ...

  2. 2019.2.14 考试T3 交互题

    \(\color{#0066ff}{ 题目描述 }\) 由于机房被成功拯救了,花_Q很高兴,花_Q生成了一个 0 到 N - 1 的排列(排列的下标从 0 到 N - 1 ).保证排列中 0 在 N ...

  3. 打表\数学【bzoj2173】: 整数的lqp拆分

    2173: 整数的lqp拆分 Description lqp在为出题而烦恼,他完全没有头绪,好烦啊- 他首先想到了整数拆分.整数拆分是个很有趣的问题.给你一个正整数N,对于N的一个整数拆分就是满足任意 ...

  4. 「模拟赛20180406」膜树 prufer编码+概率

    题目描述 给定一个完全图,保证\(w_{u,v}=w_{v,u}\)且\(w_{u,u}=0\),等概率选取一个随机生成树,对于每一对\((u,v)\),求\(dis(u,v)\)的期望值对\(998 ...

  5. Maven入门（二）pom.xml和核心概念

    一.pom.xml文件说明 1.pom意思就是project object model. 2.pom.xml包含了项目构建的信息,包括项目的信息.项目的依赖等. 3.pom.xml文件是可以继承的,大 ...

  6. Josephus环的四种解法(约瑟夫环)

    约瑟夫环 约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3…n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个 ...

  7. js 弹性菜单

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  9. Docker 使用samba 共享文件

    Docker 使用samba 共享文件   docker run -it --name samba \ -p 139:139 -p 445:445 \ -v /home/develop/code/de ...

  10. Pycharm在线/手动离线安装第三方库-以scapy为例（本地离线添加已经安装的第三方库通过添加Path实现）

    在线安装运行Pycharm,打开需要添加scapy文件的项目,以TestScapy为例           点击工具栏的File选项,选中Settings,单击打开                  ...