What is jQuery Mobile Toolbar tapToggleBlacklist Option?

In this article, we will learn jQuery Mobile Toolbar tapToggleBlacklist Option,This free JQuery tutorial for complete beginners will help you learn JQuery from scratch.

jQuery Mobile Toolbar tapToggleBlacklist Option️‍🔥

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">w3wiki</h2>
            <h3>jQuery Mobile Toolbar tapToggleBlacklist option</h3>
            <div id="divID" data-role="header" data-position="fixed">
                <h1>Toolbar</h1>
            </div>
            <h2>What is w3wiki?</h2>
            <p style="padding:0px 20px">
                w3wiki is a computer science portal for 
                Beginner by Beginner. Here you can find articles on 
                various computer science topics
                like Data Structures, Algorithms and many more....
                w3wiki was founded by Sandeep Jain in 2009.
                w3wiki also provide courses, you can find
                the courses at
                <a href="https://www.w3wiki.net/courses">
                    https://www.w3wiki.net/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. w3wiki provide you quality content
                so that you can prepare for the interviews.
                w3wiki 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.w3wiki.net">
                    https://practice.w3wiki.net
                </a>
            </p>
        </center>
    </div>
</body>
 
</html>

Output:

Reference: https://api.jquerymobile.com/toolbar/#option-tapToggleBlacklist