jQueryMobile（一）

一】、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（一）的更多相关文章

html5+jqueryMobile编写App推广注册页
html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...
[deviceone开发]-do_Webview加载JQueryMobile的示例
一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...
jQueryMobile示例页面代码
这是一个jQueryMobile示例页面示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...
jQueryMobile 网页在UC等游览器上无法正常显示或者是无法自适应设备大小，但在QQ游览器上能正常显示的解决方法
造成jQueryMobile网页在QQ游览器上能正常显示,在UC等游览器上无法正常显示或者是无法自适应设备大小的解决方法: 在<head>标签间添加<meta name=" ...
jQueryMobile引入文件后样式无法正常显示
jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:
jquerymobile仿微信 - 01
jquerymobile仿微信 - 01 jquerymobile的组件感觉不咋地哇本地调试最好是开一个web server,不然数据访问会有问题 <div data-role="p ...
Jquerymobile 简单安装
需要导入三个文件jquery,jquerymobile,css(jquerymobile地址:http://jquerymobile.com/) <script src="js/jqu ...
jquerymobile页面跳转和参数传递
http://blog.csdn.net/chen052210123/article/details/7481578 页面跳转: 页面跳转时pagebeforechange事件会被触发两次,通过$(d ...
jquery-mobile之loading加载自定义
用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行.而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直 ...
JqueryMobile入门基础附源码下载
最近要做一个手机版的网站,所以就了解了一点JqueryMObile,下面是我整理的笔记,现在分享给大家,希望朋友们喜欢,先给个首页看看吧!!! 一.JqueryMobile基本页面结构 <!DO ...

随机推荐

10.18 NOIP2018提高组模拟题（二）
大水题 1.咒语 (curse.pas/c/cpp) [题目描述] 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路.正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条. ...
牛客nowcoder NOIP普及组第三场
qtmd AK了直接题解吧题目链接 A-十七边形牛牛想在一个半径为r的圆中,找到一个内接的十七边形,使他的面积最大.输入半径r,输出最大的面积. 1 <= r <= 10000 在1 ...
[ZJOI2008]生日聚会 BZOJ1037 dp
题目描述今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...
java学习内容整理
转自:http://www.cnblogs.com/caoleiCoding/p/6170555.html 首先,我个人比较推崇的学习方法是:先学java前段,也就是HTML,css,js,因为学习j ...
C语言中类型限定符
通常用类型和存储类别来描述一个变量. C90还增加了两个属性:恒常性(constancy).易变性(volatility): 分别用关键字const和volatile来声明. 这两个关键字创建的类型是 ...
java mybatis学习一
1.引入maven包和导入 sqljdbc包 <dependency> <groupId>org.apache.ibatis</groupId> <art ...
批处理中setlocal enabledelayedexpansion的含义
setlocal enabledelayedexpansion 延迟变量全称"延迟环境变量扩展",要理解这个东西,我们还得先理解一下什么叫扩展! CMD在解 ...
keepalived企业管理
实践案例一:更改nginx反向代理只监听vip地址 10.0.0.3/nana.html 可以使用 10.0.0.5/nana.html 不可以使用 10.0.0.6/nana.html 不可以使 ...
SpEL
Spriing boot stater中根据配置文件中的条件生成相应的bean, 以适应不同场景 @ConditionalOnExpression中使用SpEl, 支持各种条件表达式 String ...
java多线程(四)
一个例子: Account.java 客户实体类 package com.asiainfo.test.thread8; /** * 账户类 * @author luke * */ public cla ...

jQueryMobile（一）

jQueryMobile（一）的更多相关文章

随机推荐

热门专题