博客

jQuery Mobile Toolbar tapToggleBlacklist选项

  • Post category:jquery

下面是关于“jQuery Mobile Toolbar tapToggleBlacklist选项”的详细解释：

什么是jQuery Mobile Toolbar tapToggleBlacklist选项？

tapToggleBlacklist选项是jQuery Mobile中一个为fixed toolbars提供的属性，用于指定不允许点击该元素时触发tap toggle事件的黑名单元素。

当我们使用fixed toolbars时，在iOS和Android系统中，我们可以双击toolbars进行展开和收缩。而tapToggleBlacklist选项的作用，便是为了让我们在双击toolbar时，不会无意中点击到其他不应该被点击的元素。

如何使用jQuery Mobile Toolbar tapToggleBlacklist选项？

我们可以在jQuery Mobile中将tapToggleBlacklist选项应用于任何fixed toolbars元素上，比如header和footer，来指定不允许点击的黑名单元素。

下面是一个基本的html代码：

<div data-role="header" data-position="fixed" data-tap-toggle-blacklist="a, input">
  <h1>Header</h1>
</div>

<div data-role="content">
  <p>Content goes here.</p>
  <a href="#">Link</a>
  <input type="text" placeholder="Input box">
</div>

<div data-role="footer" data-position="fixed">
  <h4>Footer</h4>
</div>

在上面的代码中，我们可以看到data-tap-toggle-blacklist属性被添加到了header元素上，并指定了两个黑名单元素，即a和input。这样，在双击header时，如果我们点击到这些黑名单元素上，就不会触发tap toggle事件了。

我们也可以使用JavaScript代码来设置此选项，例如：

$(function(){
  $("div[data-role='header']").fixedtoolbar({
    tapToggleBlacklist: "a, input"
  });
});

这会在jQuery Mobile应用程序启动时指定黑名单元素，同样能达到上述效果。

示例说明

示例1

下面是一个简单的示例，它演示了如何应用tapToggleBlacklist属性：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile tapToggleBlacklist Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="header" data-position="fixed" data-tap-toggle-blacklist="a, input">
      <h1>Header</h1>
    </div>
    <div data-role="content">
      <p>Content goes here.</p>
      <a href="#">Link</a>
      <input type="text" placeholder="Input box">
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>Footer</h4>
    </div>
  </body>
</html>

我们可以在iOS和Android设备上测试这个示例。在双击header时，如果我们点击黑名单元素，例如链接和输入框，将不会触发tap toggle事件，而是正常的触发链接或输入框的默认操作。

示例2

下面是另外一个示例，它展示了如何通过JavaScript代码来设置tapToggleBlacklist属性：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile tapToggleBlacklist Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
      $(function(){
        $("div[data-role='header']").fixedtoolbar({
          tapToggleBlacklist: "a, input"
        });
      });
    </script>
  </head>
  <body>
    <div data-role="header" data-position="fixed">
      <h1>Header</h1>
    </div>
    <div data-role="content">
      <p>Content goes here.</p>
      <a href="#">Link</a>
      <input type="text" placeholder="Input box">
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>Footer</h4>
    </div>
  </body>
</html>

在这个示例中，我们通过JavaScript代码来设置了tapToggleBlacklist属性，对于header元素，我们同样指定了黑名单元素为a和input。这个示例的效果和第一个示例时一样的，只是实现的方式不同而已。

希望以上内容能够帮助您了解“jQuery Mobile Toolbar tapToggleBlacklist选项”。如果您有更多的疑问，可以继续问我。

Tags: