&&&&&&&&&&&&&&&&
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下：
页面动画：
data-transition 属性可以定义页面切换是的动画效果。
例如：&a href=index.html data-transition=pop&i'll pop&/a&
data-transition 参数表：
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction=reverse属性，这个属性和原来的 data-back=true相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用 data-rel=dialog链接的方式实现模态对话框应用。
例如：&a href=foo.html data-rel=dialog&open dialog&/a&
这个页面切换效果同样可以使用标准页面的 data-transition 参数效果。建议使用pop、slideup 和flip参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有 data-rel=back的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用 href=”#”或者 data-rel=back来实现关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在 a 页面中点击一个链接打开 b 对话框,操作完成并关闭对话框,然后跳转到 c 页面,这时候你点击浏览器的后退按钮，这时候将回到 a 页面，而不是 b 页面。
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jquery mobile 提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和 css 兼容性不佳的设备都有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。
实现方式：在标题和页脚区域加入 data-position=fixed属性。
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
复制代码代码如下:&div data-role=header&
&h1&page title&/h1&
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加 data-backbtn=false属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
复制代码代码如下:&div data-role=header data-position=inline data-backbtn=false &
&a href=index.html data-icon=delete&cancel&/a&
&h1&edit contact&/h1&
&a href=index.html data-icon=check&save&/a&
如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text=previous属性来实现，或者通过扩展的方式实现：
复制代码代码如下:$.mobile.page.prototype.options.backbtntext = previous
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为”footer”。
复制代码代码如下:&div data-role=footer&
&h4&footer content&/h4&
与标题容器相比页脚容器有
更多信息请查看
【】&&&&&【】
由于各方面情况的不断调整与变化，易贤网所提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
& (昨 17:35)
& (昨 17:26)
& (昨 17:26)
& (昨 16:23)
& (昨 16:14)
& (昨 16:14)
& (昨 16:13)
& (昨 16:13)
& (昨 16:13)
& (昨 16:05)
& (昨 16:03)
& (昨 15:50)
暂无相应试卷
热门培训课程
云南各地招聘
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论，（&&点此深度交流 ）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款
将该文分享到：&&&&&&&&&&&&&&&&
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下：
页面动画：
data-transition 属性可以定义页面切换是的动画效果。
例如：&a href="index.html" data-transition="pop"&I'll pop&/a&
data-transition 参数表：
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction="reverse"属性，这个属性和原来的 data-back="true"相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用 data-rel="dialog"链接的方式实现模态对话框应用。
例如：&a href="foo.html" data-rel="dialog"&Open dialog&/a&
这个页面切换效果同样可以使用标准页面的 data-transition 参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有 data-rel="back"的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用 href=”#”或者 data-rel="back"来实现关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在 A 页面中点击一个链接打开 B 对话框,操作完成并关闭对话框,然后跳转到 C 页面,这时候你点击浏览器的后退按钮，这时候将回到 A 页面，而不是 B 页面。
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jQuery Mobile 提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和 css 兼容性不佳的设备都有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。
实现方式：在标题和页脚区域加入 data-position="fixed"属性。
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
复制代码代码如下:&div data-role="header"&
&h1&Page Title&/h1&
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加 data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
复制代码代码如下:&div data-role="header" data-position="inline" data-backbtn="false" &
&a href="index.html" data-icon="delete"&Cancel&/a&
&h1&Edit Contact&/h1&
&a href="index.html" data-icon="check"&Save&/a&
如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现，或者通过扩展的方式实现：
复制代码代码如下:$.mobile.page.prototype.options.backBtnText = "previous"
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为”footer”。
复制代码代码如下:&div data-role="footer"&
&h4&Footer content&/h4&
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
复制代码代码如下:&div data-role="footer" class="ui-bar"&
&a href="index.html" data-role="button" data-icon="delete"&Remove&/a&
&a href="index.html" data-role="button" data-icon="plus"&Add&/a&
&a href="index.html" data-role="button" data-icon="arrow-u"&Up&/a&
&a href="index.html" data-role="button" data-icon="arrow-d"&Down&/a&
如果我们需要一组链接效果，我们可以这样写：
复制代码代码如下:&div data-role="footer" class="ui-bar" data-position="inline"&
&div data-role="controlgroup" data-type="horizontal"&
&a href="index.html" data-icon="delete"&Remove&/a&
&a href="index.html" data-icon="plus"&Add&/a&
&a href="index.html" data-icon="arrow-u"&Up&/a&
&a href="index.html" data-icon="arrow-d"&Down&/a&
技巧：通过使用 data-id 属性可以让多个页面使用相同的页脚。
导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件，用一个拥有 data-role="navbar"
属性的 div 来容纳这些按钮。
复制代码代码如下:&div data-role="footer"&
&div data-role="navbar"&
&li&&a href="a.html" class="ui-btn-active"&One&/a&&/li&
&li&&a href="b.html"&Two&/a&&/li&
&/div&&!-- /navbar --&
&/div&&!-- /footer --&
在默认的按钮上添加 class="ui-btn-active"
如果按钮的数量超过 5 个，导航容器将会自动以合适的数量分配成多行显示。
你可以将页面中的任何一个链接通过 data-role="button"来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将 form 类的按钮格式化为 jQuery Mobile 风格的按钮，不需要添加 data-role 属性。
框架中包含了一组常用的图标可以用于按钮，用 data-icon 属性中的参数来定义显示不同的图标效果。
复制代码代码如下:&a href="index.html" data-role="button" data-icon="delete"&Delete&/a&
data-icon 原生参数列表
除了可以默认显示左侧的图标之外，还可以用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos 参数列表：
参数效果：
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
复制代码代码如下:&div data-inline="true"&
&a href="index.html" data-role="button"&Cancel&/a&
&a href="index.html" data-role="button" data-theme="b"&Save&/a&
jQuery Mobile 框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮间的紧凑关系。例如：
复制代码代码如下:&div data-role="controlgroup"&
&a href="index.html" data-role="button"&Yes&/a&
&a href="index.html" data-role="button"&No&/a&
&a href="index.html" data-role="button"&Maybe&/a&
如果需要按钮横向排列可以增加 data-type="horizontal"属性。
jQuery Mobile 框架为原生的 html 表单元素封装了新的表现形式，对触屏设备的操作进行了优化。在框架的页面中会自动将 form 元素渲染成 jQuery Mobile 风格的元素。
form 元素的使用和默认的 html 方式使用相同，可以同样使用 Post 和 get 方式提交数据，但是需要注意的是元素的 ID 命名问题，在常规的规范中同一个页面中是不允许出现相同的 ID命名的，在 jQuery Mobile 中由于其允许在同一个 DOM 中存在多个页面，所以建议 form 元素的 ID 命名在整个项目中是唯一的，防止由于 ID 问题引发的错误。
默认情况下框架会自动渲染在标准页面中的 form 元素的风格，一旦成功渲染后，这个控件元素将可以使用 jQuery 中的函数进行操作。在某些情况下，我们需要使用 html 原生的 form 元素，为了阻止 mobile 框架对该元素的自动渲染，在框架中我们在 data-role 属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以 html 原生的状态显示。
复制代码代码如下:&select name="foo" id="foo" data-role="none"&
&option value="a" &A&/option&
&option value="b" &B&/option&
&option value="c" &C&/option&
信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在 ul 或 ol 上声明 data-role="listview"就可以让框架以列表的方式渲染了，例如：
复制代码代码如下:&ul data-role="listview" data-theme="g"&
&li&&a href="acura.html"&Acura&/a&&/li&
&li&&a href="audi.html"&Audi&/a&&/li&
&li&&a href="bmw.html"&BMW&/a&&/li&
如果需要在列表里添加数据，则需要在数据加载后执行 refresh()方法对列表进行数据更新。
复制代码代码如下:$('ul').listview('refresh');
以上是运用 jQuery Mobile 进行界面构建的基础规则。
希望本文所述对大家的HTML5程序设计有所帮助。
更多信息请查看
【】&&&&&【】
由于各方面情况的不断调整与变化，易贤网所提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
& (昨 17:35)
& (昨 17:26)
& (昨 17:26)
& (昨 16:23)
& (昨 16:14)
& (昨 16:14)
& (昨 16:13)
& (昨 16:13)
& (昨 16:13)
& (昨 16:05)
& (昨 16:03)
& (昨 15:50)
暂无相应试卷
热门培训课程
云南各地招聘
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论，（&&点此深度交流 ）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款
将该文分享到：所有回答(2)
将MaintainScrollPositionOnPostback值设为true，记录滚动条位置
&%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"& MaintainScrollPositionOnPostback="true"&&& Inherits="Default.Default" %&
园豆：2366
如果1楼的不行，楼主可以在用一个hidden控件记录下你的滚动条的位置，然后刷新后window.onload中做一些处理
园豆：9340
园豆：9340
&&&您需要以后才能回答，未注册用户请先。笔记本电脑的欢迎进入页面切换不了怎么弄？
笔记本电脑的欢迎进入页面切换不了怎么弄？
我电脑的登录页面本来是欢迎页面，不知怎么回事就变成传统登录模式了，现在切换不了。现在点击“更改用户登录或注销的方式”：会出现“netware客户服务禁用了欢迎屏幕和快速用户切换。要恢复这些功能，你必须卸载netware客户服务。
不区分大小写匿名
那你是安装了一下NetWare程序，。
这是个什么程序呀~！不是我装的，我不在被我朋友用了，我不知道他给我弄了什么东西，这个东西能卸载吗？
安装Netware组件导致windows xp 不能更改登陆方式的解决方法　　在“控制面板”/“网络”/“属性”标签的“已安装下列网络组件”窗口中将Netware客户服删除，重启 （以前我也遇到过这个问题）！就可以改windows xp 登陆方式了。详细操作如下：（转载）你是安装了“客户端”型的网络组件，不是网络协议，而是项服务，如果想卸载你可以这样做：　　1. 右键“网上邻居” 　　2. 双击 “本地连接”（Local Area Connection ）　　3. 在弹出的窗口点“属性”　　4. 在又弹出的窗口中找到 “client service for netware”然后点击中间的“卸载”，就卸载了这个服务。　　特殊情况在本地连接内没有找到netware客户服务端的可以点添加先安装netware客户服务端，然后再卸载会提示几次重启，点“否”。
相关知识等待您来回答
电脑常识领域专家页面切换动画效果(tabBar事件)源码
查看: 59965|
评论: 0|来自: 网络
摘要: 页面切换动画效果(tabBar事件)源码
[代码] [C/C++/Objective-C]代码
view sourceprint?
//UItabBar的切换事件
-(BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController*)viewController
//[UIView beginAnimations:nil context:nil];
//[UIView setAnimationDuration:1];
//[UIView setAnimationBeginsFromCurrentState:NO];
//[UIView setAnimationCurve:UIViewAnimationTransitionFlipFromLeft];
//[UIView setAnimationTransition:kCATransitionMoveIn forView:tabBarController.view cache:YES];
//[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:viewController.view cache:NO];
//[viewController.view removeFromSuperview];
//[UIView commitAnimations];
CATransition *animation =[CATransition animation];
[animation setDuration:0.75f];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
[animation setType:kCATransitionMoveIn];
[animation setSubtype:kCATransitionFromRight];
[tabBarController.view.layer addAnimation:animation forKey:@"reveal"];
NSLog(@"should");
return YES;
今日头条 /1
相当详细，各位巴友，快来学习吧
Powered by