极客教程jQuery Mobile Toolbar tapToggle选项
jQuery Mobile是一个建立在jQuery之上的JavaScript库。它被用来创建响应式网站，可以在各种屏幕尺寸的设备上访问，如手机、标签和台式机。
在这篇文章中，我们将使用jQuery Mobile Toolbar tapToggle选项。tapToggle选项定义了一个固定的工具栏的可见性是否可以通过点击屏幕进行切换。如果tapToggle被设置为false，工具栏的可见性就不能通过点击屏幕进行切换。默认值是true。
语法:
$(".selector").toolbar({
tapToggle: false
});
获取tapToggle选项。
var tapToggle = $(".selector").toolbar( "option", "tapToggle" );
设置tapToggle选项。
$(".selector").toolbar( "option", "tapToggle", false );
CDN Links:
<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：在下面的例子中，tapToggle选项默认被设置为true。
<!DOCTYPE html>
<html lang="en">
<head>
<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 () {
("#divID").toolbar({
tapToggle: true
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>jQuery Mobile Toolbar tapToggle option</h3>
<div id="divID" 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<br />
<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<br />
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
输出:
例子2：在下面的例子中，tapToggle选项被设置为false。你可以在下面的输出中看到，当我们点击页面时，页眉工具条的可见性没有受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<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 () {
("#divID").toolbar({
tapToggle: false
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>jQuery Mobile Toolbar tapToggle option</h3>
<div id="divID" 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<br />
<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<br />
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
输出:
