jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )...

1.页面切换(data-transition)

地址:http://api.jquerymobile.com/data-attribute/

data-transition     
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

褪色 | |翻转||流流行幻灯片| | | slidedown | slidefade | slideup | |没有转

 实现多页面间跳转动态效果

示例:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width ,initial-scale=1"><!-- 设定适应手机端 -->
 6 <title>Examples</title>
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 <link href="../jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
10 </head>
11 <body>
12 <div data-role="page" id="pagerone"><!-- 此为页面申明 -->
13     <div data-role="header" data-position="fixed">
14     <!-- 使顶部和底部始终显示 data-position="fixed"-->
15     <!-- 单机后顶部和底部消失 -->
16     <h1>头部</h1>
17     </div>
18     <!-- 页面切换效果 -->
19     <div role="main" class="ui-content">
20     <a href="#pagertwo" data-transition="slide">跳转到第二个页面</a><!-- data-transition="slider"指定页面的跳转效果 -->
21     </div>
22     <div data-role="footer" data-position="fixed">
23     <h4>这是底部</h4>
24     </div>
25 </div>
26 <div data-role="page" id="pagertwo"><!-- 此为页面申明 -->
27     <div data-role="header" data-position="fixed">
28     <!-- 使顶部和底部始终显示 data-position="fixed"-->
29     <!-- 单机后顶部和底部消失 -->
30     <h1>头部</h1>
31     </div>
32     <!-- 页面切换效果 -->
33     <div role="main" class="ui-content">
34     <a href="#pagerone">跳转到第一个页面</a>
35     </div>
36     <div data-role="footer" data-position="fixed">
37     <h4>这是底部</h4>
38     </div>
39 </div>
40 </body>
41 </html>

注:

<a href="#pagertwo" data-transition="slide">跳转到第二个页面</a>

在a标签内设定另外一个页面的链接,用data-transition="slide"属性设定页面切换的动态效果
data-position="fixed"可以使无论中间多少内容,顶部和底部始终悬浮于窗口上,不消失,单机后消失。

data-position示例:
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width ,initial-scale=1"><!-- 设定适应手机端 -->
 6 <title>Examples</title>
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 <link href="../jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
10 </head>
11 <body>
12 <div data-role="page">
13     <div data-role="header" data-position="fixed">
14     <!-- 使顶部和底部始终显示 data-position="fixed"-->
15     <!-- 单机后顶部和底部消失 -->
16     <h1>头部</h1>
17     </div>
18     <div role="main" class="ui-content">
19     <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
20     </div>
21     <div data-role="footer" data-position="fixed">
22     <h4>这是底部</h4>
23     </div>
24 </div>
25 </body>
26 </html>

注:中间内容大于屏幕高度,则顶部和底部,不随页面变化而发生位置改变

转载于:https://www.cnblogs.com/NB-JDzhou/p/5260594.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之如何解决android.os.NetworkOnMainThreadException的异常

android.os.NetworkOnMainThreadException 首先从字面的意思理解为网络工作在主线程的异常,也就是说网络请求不能在主线程里面 android4.0以后不能在主线程发起网络请求,该异步网络请求。 就针对此问题有两种解决的方法: 1.可以再Activity的onCreate()方法中加入这样一…

C# Socket编程笔记(转)

C# Socket编程笔记 http://www.cnblogs.com/stg609/archive/2008/11/15/1333889.html TCP Socket:Server 端连接步骤:new socket() -> bind() -> listen() -> accept() ->recv()/send() -> sockets.close() Client 端连接步骤:new socket() -> connect ->…

学习 wxpython_序

序-wxpython 学习 一直对python 比较感兴趣&#xff0c;今天终于下定决心潜心研究wxpython。从今天开始&#xff0c;将开始我的wxpython之路&#xff0c;希望通道的一起研究。 wxpython 是python的 GUI 框架之一&#xff0c;由于免费而且资料比较丰富&#xff0c;所以我选择用w…

oracle asm磁盘头 备份,ASM磁盘头的第三个备份-Physically Addressed Metadata Redundancy

这几天很蕉绿&#xff0c;想着复习下技术。个人很喜欢ASM&#xff0c;就从ASM开始复习。循环kfed发现一个很奇怪的事情&#xff0c;就是&#xff0c;我扫到AU 11的时候发现&#xff0c;居然这个aun的blkn0是KFBTYP_DISKHEAD。要知道以前看到KFBTYP_DISKHEAD就是第二个AU的倒数第…

头上有多少根头发算秃头?

全世界只有3.14 % 的人关注了爆炸吧知识灵魂拷问你秃头了吗&#xff1f;超模君表妹秃不秃头一直都是模友关心的问题&#xff01;我想是时候讲讲秃头这个问题了&#xff01;阿里数据显示&#xff0c;在阿里零售平台买植发、护发东西的人中&#xff0c;80后占了38.5%&#xff0c;…

VS Code集成SandDance可视化分析数据

什么是SandDanceSandDance是微软研究院推出的数据可视化工具。SandDance通过触控式的界面&#xff0c;实现使用者和3D信息图表进行互动&#xff0c;更加特别的是可以以不同的角度不同的方式呈现分析结果&#xff0c;使用户可以通过可视化的方式更加直观的接受数据信息。基于易于…

使用T-SQL找出执行时间过长的作业

有些时候&#xff0c;有些作业遇到问题执行时间过长&#xff0c;因此我写了一个脚本可以根据历史记录&#xff0c;找出执行时间过长的作业&#xff0c;在监控中就可以及时发现这些作业并尽早解决&#xff0c;代码如下&#xff1a; SELECT sj.name , sja.start_execution_date,D…

Android之混淆代码总结

为了防止自己的劳动成果被别人窃取&#xff0c;混淆代码能有效防止被反编译&#xff0c;下面来总结以下混淆代码的步骤&#xff1a; 1. 大家也许都注意到新建一个工程会看到项目下边有这样proguard-project.txt一个文件&#xff0c;这个对混淆代码很重要&#xff0c;如果你不小…

SRM 588 D2 L2:GUMIAndSongsDiv2,冷静思考,好的算法简洁明了

题目来源&#xff1a;http://community.topcoder.com/stat?cproblem_statement&pm12707 算法决定一切&#xff0c;这道题目有很多方法解&#xff0c;个人认为这里 vexorian 给出的解法最简便&#xff0c;编码也最容易。而使用brute force 和 DP都比较复杂。 代码如下&…

android textview 中超出屏幕宽度的字符 省略号显示

2019独角兽企业重金招聘Python工程师标准>>> 当利用textview显示内容时&#xff0c;显示内容过多可能会折行或显示不全&#xff0c;那样效果很不好。今天发现android api中已经给出自动省略的功能。 实现如下&#xff1a; <TextView android:layout_width"f…

linux 系统迁移到固态硬盘,把Debian GNU/Linux迁移到SSD上

首先&#xff0c;还是sudo gparted把SSD分两个区&#xff0c;一个用作/一个用作/home。然后把文件都复制过去。当然/dev/media /mnt /proc /run /sys /tmp这几个目录就不要复制过去了&#xff0c;在SSD上建立个新的同名目录。ls -l/dev/disk/by-uuid看看uuid对应的是哪个盘&…

世界各国的教育差距有多大?这几部全世界都在热议的教育纪录片,揭开一切.........

全世界只有3.14 % 的人关注了爆炸吧知识BBC纪录片《人生七年》里讲到&#xff1a;人无法确定能留给下一代什么财物&#xff0c;但至少可以确定&#xff0c;一旦给了他们好的教育&#xff0c;他们终生都可以受用。但是这世界上从来没有一个学校去教我们要如何为人父母&#xff0…

助力 .NET MAUI Community Toolkit

微软中国MSDN 点击上方蓝字关注我们最近&#xff0c;我们推出了.NET MAUI Community Toolkit&#xff0c;并且现在已做好了接受社区贡献的准备。我们修改了添加新功能的工作流程&#xff0c;在此分享给各位&#xff0c;以方便大家今后继续完善&#xff0c;做出贡献。我们还为此…

Android之可伸缩的皮筋效果(贝塞尔曲线)的介绍

贝塞尔曲线 引言:  为什么我要写这篇关于贝塞尔曲线的博客,在android里面很多地方都用到了,比如当我们看到一个效果像橡皮筋拉伸一样,有弹性,一般就会用到贝赛尔曲线,不知道细心的你有没有发现,比如,我们看到QQ里面有那个红色的气泡的可以按着拖动,还有一些…

Oracle错误:ORA-27121: unable to determine size of shared memory segment

为什么80%的码农都做不了架构师&#xff1f;>>> 今天在用SQLPLUS登陆数据库时&#xff0c;忽然报了一个错误&#xff0c;错误的代码如下&#xff1a; ORA-01034: ORACLE not availableORA-27121: unable to determine size of shared memory segmentLinux Error: 1…

Html中value和name属性的作用

1.按钮中用的value 指的是按钮上要显示的文本 比如“确定”“删除”等 2.复选框用的value 指的是这个复选框的值 3.单选框用的value 和复选框一样 4.下拉菜单用的value 是列表中每个子项的值 5.隐藏域用的value 是框里面显示的内容 在后台如果你想得到复选框的内容 就是value …

POJ 3264 Balanced Lineup(RMQ)

Balanced LineupTime Limit: 5000MS Memory Limit: 65536KTotal Submissions: 24349 Accepted: 11348Case Time Limit: 2000MSDescription For the daily milking, Farmer Johns N cows (1 ≤ N ≤ 50,000) always line up in the same order. One day Farmer John decides to …

.NET 开源免费图表组件库,Winform,WPF 通用

大家好, 我是等天黑, 今天给大家介绍一个功能完善, 性能强悍的图表组件库 ScottPlot, 当我第一次在 github 上看到这个库, 我看不懂&#xff0c;但我大受震撼, 这么好的项目当然要分享出来了。https://github.com/ScottPlot/ScottPlotScottPlot 是一个 .NET 图表组件, 主要有以…

物理学上最厉害的54个男人!2400年来难以超越,没想到聚在一起后这么震撼......

全世界只有3.14 % 的人关注了爆炸吧知识19世纪的最后一天电子的发现者汤姆生发表了新年祝词&#xff1a;“晴朗的天空远处&#xff0c;有两朵令人不安的乌云令物理学的优美性和明晰性黯然失色”也似乎就是从这一天开始经典力学的地位被撼动了原子的大门打开了这场微观世界的探险…

linux主线程结束 子线程还能运行么,linux主线程和子线程

"读了三遍&#xff0c;愣是没读懂楼主想说啥。######java_zf 我现在在做的一个项目用到了多线程&#xff0c;我就在项目中子线程调用的一个函数中加了个sleep。你可以写个简单的代码试一下&#xff0c;应该比较简单。你试验的结果不一样吗&#xff1f;我这个项目是Linux下…