jQuery Mobile Loader textVisible选项

  • Post category:jquery

jQuery Mobile提供了一个常用的组件——Loader(加载器),用于显示页面加载进度或者执行异步操作时的提示。textVisible选项是Loader中的一个布尔类型属性,用于控制是否显示加载器的提示文本。

当textVisible为true时,将显示默认的加载文本,内容为“loading…”,并且在加载完成后自动隐藏。当textVisible为false时,将不会显示任何提示文本,只会显示将一直显示加载器,直至手动调用hide方法。

下面是一个示例,演示不同textVisible选项下,Loader的显示效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Loader textVisible示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
  <script>
    $(document).on('pageinit', '#loaderPage', function() {
      $(document).on('click', '#btnStart', function () {
        $.mobile.loading('show', {
          text: '加载中...',
          textVisible: true,
          theme: 'a',
          textonly: false,
          html: ''
        });
        setTimeout(function () {
          $.mobile.loading('hide');
        }, 3000);
      });
    });
  </script>
</head>
<body>
  <div data-role="page" id="loaderPage">
    <div data-role="header">
      <h1>Loader textVisible示例</h1>
    </div>
    <div data-role="content">
      <p>textVisible为true:</p>
      <a href="#loaderPage" data-role="button" id="btnStart">开始显示</a>
      <p>textVisible为false:</p>
      <a href="#" data-role="button" onclick="$.mobile.loading('show', { theme: 'a', textVisible: false, textonly: false });setTimeout(function() { $.mobile.loading('hide'); }, 3000);">开始显示</a>
    </div>
  </div>
</body>
</html>

在上面的示例中,我们创建了一个包含两个按钮的页面。第一个按钮用于演示textVisible为true的效果,第二个按钮用于演示textVisible为false的效果。点击按钮后,将显示Loader,并在3s后自动隐藏。

根据上面的代码,我们可以看出,textVisible选项可以在Loader调用时设置,或者在全局配置中设置(将在后面的示例中介绍)。

除了以上示例外,我们还可以通过样式来定制Loader的提示文本,以适应不同风格的应用程序。下面是另一个示例,演示如何通过样式来定制Loader的显示效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Loader textVisible示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
  <style>
    .ui-loader-text-custom {
      color: #FFF;
      background: rgba(0, 0, 0, .6);
      font-weight: bold;
      font-size: 18px;
      border-radius: 5px;
      padding: 20px;
      box-shadow: none;
      text-shadow: none;
    }
  </style>
  <script>
    $(document).on('pageinit', '#loaderPage2', function() {
      $(document).on('click', '#btnStart2', function () {
        $.mobile.loading('show', {
          text: '加载中...',
          textVisible: true,
          theme: 'a',
          textonly: false,
          html: '',
          classes: {
            'ui-loader-text': 'ui-loader-text-custom'
          }
        });
        setTimeout(function () {
          $.mobile.loading('hide');
        }, 3000);
      });
    });
  </script>
</head>
<body>
  <div data-role="page" id="loaderPage2">
    <div data-role="header">
      <h1>Loader textVisible示例</h1>
    </div>
    <div data-role="content">
      <p>修改Loader提示文本样式:</p>
      <a href="#loaderPage2" data-role="button" id="btnStart2">开始显示</a>
    </div>
  </div>
</body>
</html>

在这个示例中,我们为Loader的提示文本定义了一个名为“ui-loader-text-custom”的自定义样式,并通过classes属性将其应用到Loader的提示文本中。我们还可以通过修改自定义样式来调整Loader的样式,以满足实际需求。