Question

我正在使用jQuery Mobile 1.3，并尝试关注Arrays.binarySearch()以创建自己的自定义小部件。

我在第一步遇到困难，我不确定我是否正在为正确版本的jQuery mobile做正确的示例。

页面上没有错误，我的元素永远不会被丰富。

＆＃13;

(function($) {
    $.widget("mobile.target", $.mobile.button, {
        /** Available options for the widget are specified here, along with default values. */
        options: {
            inline: false,
            mode: "default",
            height: 200
        },
        /** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
        _create: function() {
            var inputElement = this.element;
            var opts = $.extend(this.options, inputElement.data("options"));
            $(document).trigger("targetcreate");

            inputElement.after("<button>" + inputElement.val() + "</button>");

        },
        /** Custom method to handle updates. */
        _update: function() {
            var inputElement = this.element;
            var opts = $.extend(this.options, inputElement.data("options"));
            $(document).trigger("targetupdate");

            inputElement.siblings("button").text(inputElement.val());

        },
        /* Externally callable method to force a refresh of the widget. */
        refresh: function() {
            return this._update();
        }
    });
    /* Handler which initialises all widget instances during page creation. */
    $(document).bind("pagecreate", function(e) {
        $(document).trigger("targetbeforecreate");
        return $(":jqmData(role='target')", e.target).target();
    });
})(jQuery);

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" data-role="target" value="inp1">
<input type="button" value="inp2">
<div data-role="target">div1</div>
<div type="button">div2</div>

</body>
</html>

＆＃13;

(function($) {
    $.widget("mobile.target", $.mobile.button, {
        /** Available options for the widget are specified here, along with default values. */
        options: {
            inline: false,
            mode: "default",
            height: 200
        },
        /** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
        _create: function() {
            var inputElement = this.element;
            var opts = $.extend(this.options, inputElement.data("options"));
            $(document).trigger("targetcreate");

            inputElement.after("<button>" + inputElement.val() + "</button>");

        },
        /** Custom method to handle updates. */
        _update: function() {
            var inputElement = this.element;
            var opts = $.extend(this.options, inputElement.data("options"));
            $(document).trigger("targetupdate");

            inputElement.siblings("button").text(inputElement.val());

        },
        /* Externally callable method to force a refresh of the widget. */
        refresh: function() {
            return this._update();
        }
    });
    /* Handler which initialises all widget instances during page creation. */
    $(document).bind("pagecreate", function(e) {
        $(document).trigger("targetbeforecreate");
        return $(":jqmData(role='target')", e.target).target();
    });
})(jQuery);

预期输出是继承自JQueryMobile按钮的自定义JQueryMobile按钮。不只是div中的一个小html5按钮。例如Div1渲染与Div2相同，但进行了自定义更改。

Answer 1

您正在尝试在jQuery代码中获取input元素。但是您在HTML页面中定义了div元素。那就是问题所在。将其更改为input。

检查以下代码

您遵循的教程指出，如果您不使用HTML5数据属性，则仅使用:jqmData。删除它

(function($) {
  $.widget("mobile.target", $.mobile.widget, {

    options: {
      inline: false,
      mode: "default",
      height: 200
    },
    _create: function() {
      var inputElement = this.element;
      var opts = $.extend(this.options, inputElement.data("options"));
      $(document).trigger("targetcreate");
      inputElement.after("<button>"+inputElement.val()+"</button>");
    },
    _update: function() {
      var inputElement = this.element;
      var opts = $.extend(this.options, inputElement.data("options"));
      $(document).trigger("targetupdate");
      inputElement.siblings("button").text(inputElement.val());
    },
    refresh: function() {
      return this._update();
    }
  });
  $(document).bind("pagecreate", function(e) {
    $(document).trigger("mywidgetbeforecreate");
    return $("[role='target']", e.target).target();
  });
})(jQuery);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
  <input type="button" data-role="target" value="inp1">
  <input type="button" value="inp2">
  <div type="button" data-role="target">div1</div>
  <div type="button">div2</div>

</body>

</html>

自定义JQuery移动按钮

1 个答案: