请参阅此URL以获取加载指示器的jquery插件
(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按钮和提交按钮。
答案 0 :(得分: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>
答案 1 :(得分:0)
抱歉,我没有仔细阅读你的问题。
对于表单提交按钮,只需将按钮类型设置为&#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>
。
希望这有帮助。