jQuery Mobile Toolbar tapToggle Option
Last Updated :
14 Mar, 2022
jQuery Mobile is a JavaScript library built on top of jQuery. It is used to create responsive websites which are accessible on devices of various screen sizes like phones, tabs, and desktops.
In this article, we will use the jQuery Mobile Toolbar tapToggle option. The tapToggle option defines whether a fixed toolbar’s visibility can be toggled by tapping on the screen. If tapToggle is set to a false, the toolbar’s visibility cannot be toggled by tapping on the screen. The default value is true.
Syntax:
$(".selector").toolbar({
tapToggle: false
});
Get the tapToggle option:
var tapToggle = $(".selector").toolbar( "option", "tapToggle" );
Set the tapToggle option:
$(".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>
Example 1: In the example below the tapToggle option is set to true by default.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
</script>
<script src=
</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=
</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>
</p>
</center>
</div>
</body>
</html>
|
Output:
Example 2: In the example below, the tapToggle option is set to false. You can see in the output below the visibility of the header toolbar is not affected when we click on the page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
</script>
<script src=
</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=
</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>
</p>
</center>
</div>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/toolbar/#option-tapToggle
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...