jQuery Mobile Toolbar tapToggleBlacklist选项

jQuery Mobile是一个JavaScript库，用于开发响应式网络应用程序和网站，可以在手机、平板电脑和台式机等各种设备上访问。

在这篇文章中，我们将使用jQuery Mobile Toolbar tapToggleBlacklist 选项来防止工具栏小部件在用户点击网页的特定区域时切换其可见性。tapToggleBlacklist选项接受一个字符串，我们可以在其中传递元素的选择器，当用户点击该元素时，工具栏的可见性将不会被切换。

语法:

用指定的tapToggleBlacklist选项初始化工具条。

$( ".selector" ).toolbar({
  tapToggleBlacklist: ".do-not-toggle-on-tap"
});

获取tapToggleBlacklist选项。

var tapToggleBlacklist = 
        $(".selector").toolbar( "option", "tapToggleBlacklist" );

设置tapToggleBlacklist选项。

$(".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>

例子：在下面的输出中，当我们点击绿色区域时，固定工具栏的可见性不会被切换，因为绿色区域的类别是 “do-not-toggle-on-tap”，它被作为tapToggleBlacklist选项的值传递。

<!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 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
                <a href="https://practice.geeksforgeeks.org/courses">
                    https://practice.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 
                undestanding 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>

输出:

jQuery Mobile Toolbar tapToggleBlacklist选项