参见代码

(function ($) {
    $.fn.buttonLoader = function (action) {
        var self = $(this);

        //start loading animation
        if (action == 'start') {
            if ($(self).attr("disabled") == "disabled") {
                e.preventDefault();
            }
            //disable buttons when loading state
            $('.has-spinner').attr("disabled", "disabled");
            $(self).attr('data-btn-text', $(self).text());
            //binding spinner element to button and changing button text
            $(self).html('<span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>Loading');
            $(self).addClass('active');
        }
        //stop loading animation
        if (action == 'stop') {
            $(self).html($(self).attr('data-btn-text'));
            $(self).removeClass('active');
            //enable buttons after finish loading
            $('.has-spinner').removeAttr("disabled");
        }
    }
})(jQuery);

上面的代码可以正常使用html按钮标记<button class="btn btn-default has-spinner" id="btnTest" runat="server">Test IT</button>

以这种方式调用代码

var btn = $("#btnTest");
$(btn).buttonLoader('start');

并停止$(btn).buttonLoader('stop');

但问题是，如果我使用HTML提交按钮，那么整个代码不起作用。那么我需要添加哪些更改，因此它应该适用于 html按钮和提交按钮。

Answer 1

如同@Monojit和@ you.know.nothing提到的那样，您需要使用带有属性提交的按钮标记。我不认为你可以为输入类型的标签做同样的事情。

如果检查代码的作用，它只是将标记添加到a和按钮标记的内部html中。

无论哪种方式，我都提供了一个有效的例子。按钮的类型为submit，id是您选择的：btnTest。

注意：要触发旋转动画，必须绑定click事件。

$('#btnTest').click(function() {
  var btn = $(this);
  $(btn).buttonLoader('start');
  setTimeout(function() {
    $(btn).buttonLoader('stop');
  }, 3000);
});

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
  cursor: progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  width: auto;
}

.has-spinner.btn.active .spinner {
  min-width: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" style="margin-top:150px">
  <button class="btn btn-default has-spinner" id="btnTest">Trigger Spinner</button>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>


  (function($) {
    $.fn.buttonLoader = function(action) {
      var self = $(this);
      //start loading animation
      if (action == 'start') {
        if ($(self).attr("disabled") == "disabled") {
          e.preventDefault();
        }
        //disable buttons when loading state
        $('.has-spinner').attr("disabled", "disabled");
        $(self).attr('data-btn-text', $(self).text());
        //binding spinner element to button and changing button text
        $(self).html('<span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>Loading');
        $(self).addClass('active');
      }
      //stop loading animation
      if (action == 'stop') {
        $(self).html($(self).attr('data-btn-text'));
        $(self).removeClass('active');
        //enable buttons after finish loading
        $('.has-spinner').removeAttr("disabled");
      }
    }
  })(jQuery);

</script>

Answer 2

抱歉，我没有仔细阅读你的问题。

对于表单提交按钮，只需将按钮类型设置为＆＃34;提交＆＃34;，如下所示：

<button type="submit" id="btn_submit">Test Button</button>

您无法将html内容添加到<input type="button|submit" />元素，因为此元素类型不能包含嵌套元素，因此请使用<input type="submit" />而不是<button type="submit">Button label</button>。

希望这有帮助。

Jquery：如何将微调器添加到输入类型按钮

参见代码

以这种方式调用代码

2 个答案: