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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

助力 .NET MAUI Community Toolkit

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

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 …

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

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

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

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

[MySQL]关于amd.dll后门病毒入侵3306端口的临时解决方案

为什么80%的码农都做不了架构师&#xff1f;>>> amd.dll入侵事宜&#xff1a; 由于MySQL 5.1.30以上版本的一个漏洞&#xff08;当然是不是因为漏洞的原因&#xff0c;目前暂未知&#xff09;&#xff0c;导致一个后门程序会通过3306端口的MySQL服务获取到Windows…

Spring Security3源码分析-http标签解析(转)

为什么80%的码农都做不了架构师&#xff1f;>>> 在FilterChainProxy初始化的过程中&#xff0c;大概描述了标签解析的一些步骤&#xff0c;但不够详细 <http auto-config"true"> <remember-me key"workweb" token-validity-se…

Android之React Native 中组件的生命周期

React Native 中组件的生命周期 概述 就像 Android 开发中的 View 一样&#xff0c;React Native&#xff08;RN&#xff09; 中的组件也有生命周期&#xff08;Lifecycle&#xff09;。所谓生命周期&#xff0c;就是一个对象从开始生成到最后消亡所经历的状态&#xff0c;理解…

当女朋友学会「监视」男朋友......

1 日本网友拍到两只水母互殴&#xff01;▼2 打印机也会生气&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 现在你们可以互换卡槽了~&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 有什么适合整蛊朋友的恶作剧▼5 哈哈哈哈哈&#xff…

使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

Electron.NET是一个嵌入了ASP.NET Core的Electron的封装&#xff0c;通过Electron.NET可以构建基于.NET5的跨平台的桌面应用&#xff0c;使得开发人员只需要使用ASP.NET Core和 Blazor就可以胜任桌面应用的开发工作。开发环境操作系统Windows/macOS/Linux.NET5.0npm创建新项目创…

linux内核分析作业3:跟踪分析Linux内核的启动过程

内核源码目录 1、 arch:录下x86重点关注 2、 init&#xff1a;目录下main.c中的start_kernel是启动内核的起点 3、 ipc&#xff1a;进程间通信的目录 实验 使用实验楼的虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd rootfs.img 使…

linux安装定制添加输入,Arch Linux--定制自己的Linux操作系統(乙-國際化桌面安裝篇)...

Arch Linux&#xff0d;&#xff0d;定制自己的Linux操作系統&#xff0d;&#xff0d;&#xff0d;&#xff0d;乙&#xff0d;國際化&桌面安裝篇相信大家看了《甲-安裝篇》之後&#xff0c;Arch Linux系統已經可以正常運行了吧&#xff1f;不過&#xff0c;Arch Linux默認…

这几部经典纪录片,竟然还有人没看过?

全世界只有3.14 % 的人关注了爆炸吧知识看纪录片&#xff0c;既可以追溯上下数千年的历史文化&#xff0c;也可以欣赏从宇宙到地心深处的奇妙境界&#xff0c;而及其超级精彩的画面即使定格&#xff0c;也是一幅摄影佳作。纪录片题材广泛、制作精良&#xff0c;观看起来算的上是…

github 上微信判断是否被删除的源码 以及使用解惑

为什么80%的码农都做不了架构师&#xff1f;>>> 从Github上的https://github.com/0x5e/wechat-deleted-friends&#xff0d;&#xff0d;clone出来的代码 今天在我的机器上不能运行了&#xff0c;环境为Mac 10.10 python2.7.10中 提示错误&#xff0c; Traceback (…

坑爹!千万不要在生产环境使用控制台日志

前言某控制台应用程序会随机卡死&#xff0c;一直找不到原因。无意中在控制台敲了下回车&#xff0c;发现程序居然恢复正常了。最后在stackoverflow上找到了这个帖子&#xff1a;How and why does QuickEdit mode in Command Prompt freeze applications?[1]原来是“快速编辑模…