jQuery Mobile is a JavaScript library that is used to develop responsive web applications and websites that are accessible on a variety of devices like mobiles, tablets, and desktops, etc. jQuery Mobile is built on top of jQuery.
In this article, we will use the jQuery Mobile Toolbar tapToggleBlacklist option to prevent the toolbar widget to toggle its visibility when the user taps a specific area of the webpage. The tapToggleBlacklist option accepts a string in which we can pass the selector of the element, on which when the user taps, the visibility of the toolbar will not be toggled.
Syntax:
Initialize the toolbar with the specified tapToggleBlacklist option:
$( ".selector" ).toolbar({ tapToggleBlacklist: ".do-not-toggle-on-tap" });
Get the tapToggleBlacklist option:
var tapToggleBlacklist = $(".selector").toolbar( "option", "tapToggleBlacklist" );
Set the tapToggleBlacklist option:
$(".selector").toolbar( "option", "tapToggleBlacklist", ".do-not-toggle-on-tap" );
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: In the output below when we tap on the green area the visibility of the fixed toolbar is not toggled because the green area has class “do-not-toggle-on-tap” which is passed as the value of the tapToggleBlacklist option.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< link rel = "stylesheet" href =
</ script >
< script src =
</ script >
< style >
.do-not-toggle-on-tap {
background-color: rgb(73, 184, 73);
color: rgb(255, 255, 255);
text-shadow: none;
}
</ style >
< script >
$(document).ready(function () {
$("#divID").toolbar({
tapToggleBlacklist: ".do-not-toggle-on-tap",
});
});
</ script >
</ head >
< body >
< div data-role = "page" >
< center >
< h2 style = "color:green" >GeeksforGeeks</ h2 >
< h3 >jQuery Mobile Toolbar tapToggleBlacklist option</ h3 >
< div id = "divID" data-role = "header" data-position = "fixed" >
< h1 >Toolbar</ h1 >
</ div >
< h2 >What is GeeksforGeeks?</ 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....
GeeksforGeeks was founded by Sandeep Jain in 2009.
GeeksforGeeks also provide courses, you can find
the courses at
</ a >
</ p >
< p class = "do-not-toggle-on-tap" >
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 >
</ p >
</ center >
</ div >
</ body >
</ html >
|
Output:
Reference: https://api.jquerymobile.com/toolbar/#option-tapToggleBlacklist