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 ...

随机推荐

ios对new Date() 的兼容问题
移动开发的一个小坑我们一般这样创建一个日期变量 var d = new Date("2017-08-11 12:00:00"); 但是在ios上却是返回 invalid Date ...
mybatis主键返回语句使用方法,就是实体类.getid即可拿到返回的id
<insert id="insertSelective" parameterType="com.o2o.Content" useGeneratedKeys ...
7 . 动态sql-choose
choose-when-otherwise 只能满足一个when 中的条件,互斥的条件,不能同时存在 mapper.xml <select id="selectstateByTitle ...
matplotlib学习笔记（四）
利用matplotlib可以显示图像 imread()和imshow()提供了简单的图像载入和显示功能. img = plt.imread("xxx.jpg") imread()可 ...
NETSpider 网络蜘蛛采集工具
NETSpider网站数据采集软件是一款基于.Net平台的开源软件.软件部分功能是基本Soukey软件进行开发的.这个版本采用VS2010+.NET3.5进行开发的.NETSpider采摘当前提供的主 ...
Kafka读取__consumer_offsets和Kafka 0.11客户端管理工具AdminClient
https://blog.csdn.net/m0_37739193/article/details/78185155 https://blog.csdn.net/qq_36096641/article ...
Jenkins安全配置详解
一.进入安全配置界面首页后点击进入系统管理(Manage Jenkins) ——下拉下方看到安全配置(Configure Global Security) ——进入安全配置界面二,详解安全配置的选 ...
mobiscroll 日期问题
做的一个项目中用到了mobiscroll日期控件,设置距离当前日期往前推一个月的时间出现如下图问题弹出窗默认的年份不对,后来查找原因是初始化属性配置有问题,应该将设置为dateFormat:'yy- ...
kmspico
# process | 在这儿找到了原作者的地址 http://blog.nsfocus.net/kmspico/ | 下面是原作者地址 https://forums.mydigitallife.ne ...
性能测试工具LoadRunner09-LR之Virtual User Generator 日志
在录制和回放的时候,VU会分别把发生的事件记录成日志文件,这些日志有利于我们跟踪VU和服务器的交互过程回放日志(Replay Log) 脚本回放运行时的输出都记在这个Log里 “输出”窗口的“回放日 ...

jQueryMobile（一）

jQueryMobile（一）的更多相关文章

随机推荐

热门专题