极客教程jQuery Mobile工具条过渡选项
jQuery Mobile是一个使用jQuery构建的JavaScript库&是基于用户界面系统，旨在使响应式网站和应用程序在所有智能手机、平板电脑和桌面设备上都能访问。jQuery工具条是一个可以用来增强页眉和页脚的小部件。这些小组件用于在页面的顶部和/或底部添加工具条。
在这篇文章中，我们将使用jQuery Mobile Toolbar过渡选项。它是用来设置我们希望在工具条隐藏/显示时的过渡类型。这个过渡选项是由固定工具栏扩展提供的，只适用于固定工具栏。默认值是 “滑动”，它是字符串类型的。
.语法：通过指定过渡选项来初始化工具条。
$( "Selector" ).toolbar({
transition: "none"
});
初始化后，设置并返回过渡选项。
- 获得过渡选项。
var transition = $( "Selector" ).toolbar( "option", "transition" );
- 设置过渡选项。
$( "Selector" ).toolbar( "option", "transition", "fade" );
参数:
- none。工具栏的出现和消失没有任何过渡。
- transition。工具栏在切换时将滑入/滑出。
- fade。工具栏在切换时将淡入/淡出。
CDN链接：使用以下CDN链接的jQuery Mobile。
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>
例子1：我们将设置过渡选项为 “幻灯片”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script>
(document).ready(function () {
// Setting to "slide" by default
("#GFG").toolbar({
transition: "slide"
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar transition option</h3>
<div id="GFG" data-role="header" data-position="fixed">
<h1>Toolbar</h1>
</div>
<h2>What is GeekforGeeks?</h2>
<p style="padding: 0px 20px;">
GeeksforGeeks is a computer science portal
for geeks by geeks. Here you can find articles
on various computer science topics like
Data Structures, Algorithms and many more....
GeekforGeeks was founded by Sandeep Jain in 2009.
GeeksforGeeks also provide courses, you can
find the courses at
<a href="https://practice.geeksforgeeks.org/courses">
https://practice.geeksforgeeks.org/courses
</a>
For cracking interviews of top product based companies,
you need to have good and deep understanding of topics
like DSA, System design etc. GeeksforGeeks provide you
quality content so that you can prepare for the interviews.
GeeksforGeeks also have a practice portal where you can
practice problems and brush on your skills. You can visit
the practice portal at
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
输出：从输出中，观察工具栏的过渡，它被设置为滑动，在点击时，它以向上的滑动效果消失。
例子2：我们将设置过渡选项为 “无”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script>
(document).ready(function () {
("#GFG").toolbar({
transition: "none"
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar transition option</h3>
<div id="GFG" data-role="header" data-position="fixed">
<h1>Toolbar</h1>
</div>
<h2>What is GeekforGeeks?</h2>
<p style="padding: 0px 20px;">
GeeksforGeeks is a computer science portal
for geeks by geeks. Here you can find articles
on various computer science topics like
Data Structures, Algorithms and many more....
GeekforGeeks was founded by Sandeep Jain in 2009.
GeeksforGeeks also provide courses, you can
find the courses at
<a href="https://practice.geeksforgeeks.org/courses">
https://practice.geeksforgeeks.org/courses
</a>
For cracking interviews of top product based companies,
you need to have good and deep understanding of topics
like DSA, System design etc. GeeksforGeeks provide you
quality content so that you can prepare for the interviews.
GeeksforGeeks also have a practice portal where you can
practice problems and brush on your skills. You can visit
the practice portal at
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
输出：从输出中，观察工具栏的过渡，它被设置为无，它突然消失，没有任何过渡。
