jQuery Mobile Toolbar tapToggleBlacklist Option

Last Updated : 16 Jan, 2023

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.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <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>
    <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 href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </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 href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>
        </center>
    </div>
</body>
 
</html>