如何在加载状态下将旋转图标添加到按钮?
发布时间:2020-12-17 23:19:16 所属栏目:安全 来源:网络整理
导读:Twitter Bootstrap’s buttons有一个很好的Loading …状态可用。 事情是,它只是显示一个消息,如加载…传递通过data-loading-text属性,如下所示: button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localiza
Twitter
Bootstrap’s buttons有一个很好的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> 看看字体Awesome,你看到现在有一??个animated spinner icon。 我试图集成该旋转图标,当发射像这样的上传操作: $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); 但这没有任何效果,也就是说,我只是看到按钮上的上传…文本。 当按钮处于正在加载状态时,是否可以添加图标?看起来像不知何故Bootstrap只是删除图标< i class =“icon-upload icon-large”>< / i>在加载状态下的按钮内。 这里有一个简单的demo,显示了我上面描述的行为。当你看到它进入加载状态,图标就消失了。它在时间间隔后重新出现。 解决方法
如果你看一下
bootstrap-button.js源代码,你会看到bootstrap插件在调用$(myElem).button(‘loading’)时,用data-loading-text中的任何内容代替按钮内部html。
对于你的情况,我认为你应该只能这样做: <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- angularjs – 如何在Angular2中进行HTTP POST调用并打印响应
- 命令which, whereis, who, w的用法
- 修改bootstrap table 源码实现固定高时自定义滚动条的样式
- angular min js 118 Error ng areq http //errors angularj
- Scala:对于选项[A] – >选项[B]进行隐式转换A-> B工作
- 使用xfire快速发布WebService接口
- angular – 使用TypeScript以编程方式检查Ionic 2单选按钮
- 如何在Scala中实现Future作为应用?
- bash – 在shell脚本中减去字符串(即数字)
- 斯卡拉 – 对守卫的理解