Twitter Bootstrap的按钮有一个很好的Loading...状态.
问题是它只是显示像这样Loading...传递data-loading-text属性的消息:
<button type="button" class="btn btn-primary start" id="btnStartUploads"
data-loading-text="@Localization.Uploading">
<i class="icon-upload icon-large"></i>
<span>@Localization.StartUpload</span>
</button>
Run Code Online (Sandbox Code Playgroud)
看看Font Awesome,你会看到现在有一个动画微调器图标.
我尝试在触发这样的Upload操作时集成该微调器图标:
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
Run Code Online (Sandbox Code Playgroud)
但这根本没有效果,也就是说,我只看到Uploading...按钮上的文字.
按钮处于加载状态时是否可以添加图标?看起来不知何故Bootstrap只是<i class="icon-upload icon-large"></i>在处于加载状态时删除按钮内的图标.
这是一个简单的演示,显示了我上面描述的行为.当你看到它进入加载状态时,图标就会消失.它会在时间间隔后重新出现.
我在表单的末尾有一个提交按钮.
我在提交按钮中添加了以下条件:
onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"
Run Code Online (Sandbox Code Playgroud)
但是当它移动到下一页时,参数没有通过,并且传递了空值.
button ×1
font-awesome ×1
form-submit ×1
html ×1
icons ×1
javascript ×1
jquery ×1
jsp ×1
loading ×1