博客

jQuery Mobile Button initSelector选项

  • Post category:jquery

jQuery Mobile是一款基于jQuery的移动端UI框架，它提供了一些方便的组件和选项，其中就包括Button组件initSelector选项。

什么是initSelector选项

Button组件是jQuery Mobile中常用的组件之一，它提供了链接样式按钮和输入框按钮两种类型，并支持多种主题样式。在初始化Button组件时，可以使用initSelector选项指定需要初始化的DOM元素，这些元素可以是所有Button组件的父级元素，也可以是定义了data-role=”button”属性的特定元素。通过initSelector选项，我们可以选择性地对页面中的某些Button组件进行初始化，而不是对整个页面进行初始化，提高了初始化效率并减少了不必要的资源消耗。

如何使用initSelector选项

在初始化Button组件时，需要使用jQuery Mobile提供的$.fn.buttonMarkup()方法，并传入一些可选项参数，其中initSelector即是其中之一。例如：

$(document).on("pagecreate", function() {
  $(":jqmData(role='button')").buttonMarkup({
    initSelector: ":jqmData(icon)"
  });
});

以上代码表示，在当前页面创建后，会将所有使用了data-icon属性的按钮元素进行初始化，并添加合适的主题样式和图标。

示例1：对所有Button组件进行初始化

<!DOCTYPE html>
<html>
  <head>
    <title>Button initSelector示例1</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="page">
      <div data-role="header">
        <h1>Button initSelector示例1</h1>
      </div>
      <div data-role="main" class="ui-content">
        <a href="#" data-role="button">Link按钮</a>
        <button data-role="button">输入框按钮</button>
        <input type="button" value="输入框按钮" data-role="button">
      </div>
      <div data-role="footer">
        <h1>示例1</h1>
      </div>
    </div>
    <script>
      $(document).on("pagecreate", function() {
        $(":jqmData(role='button')").buttonMarkup({
          initSelector: ""
        });
      });
    </script>
  </body>
</html>

以上代码实现了一个简单的按钮页面，其中包含一个链接样式按钮、一个默认样式按钮和一个输入框样式按钮。在初始化Button组件时，使用了空字符串作为initSelector选项的值，表示对整个页面中的Button组件进行初始化。

示例2：对指定Button组件进行初始化

<!DOCTYPE html>
<html>
  <head>
    <title>Button initSelector示例2</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="page">
      <div data-role="header">
        <h1>Button initSelector示例2</h1>
      </div>
      <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>喜爱的颜色:</legend>
            <label for="red">红色</label>
            <input type="radio" name="color" id="red" value="red" data-role="none">
            <label for="green">绿色</label>
            <input type="radio" name="color" id="green" value="green" data-role="none">
            <label for="blue">蓝色</label>
            <input type="radio" name="color" id="blue" value="blue" data-role="none">
          </fieldset>
        </div>
        <a href="#" data-role="button" data-icon="home">首页</a>
        <a href="#" data-role="button" data-icon="star">收藏</a>
        <a href="#" data-role="button" data-icon="gear">设置</a>
      </div>
      <div data-role="footer">
        <h1>示例2</h1>
      </div>
    </div>
    <script>
      $(document).on("pagecreate", function() {
        $(":jqmData(icon)").buttonMarkup({
          initSelector: ""
        });
      });
    </script>
  </body>
</html>

以上代码实现了一个带有单选框和图标按钮的页面，其中单选框未进行Button组件初始化，图标按钮使用了data-icon属性设置图标。在初始化Button组件时，使用了”:jqmData(icon)”选择器指定了需要对data-icon属性进行初始化的Button组件。

Tags: