jQuery / Twitter Bootstrap 数据加载文本按钮延迟
Posted
技术标签:
【中文标题】jQuery / Twitter Bootstrap 数据加载文本按钮延迟【英文标题】：jQuery / Twitter Bootstrap data-loading-text button with delay 【发布时间】：2012-08-20 12:53:58 【问题描述】：我正在尝试在我的网站上使用这个确切的示例：
http://getbootstrap.com/2.3.2/javascript.html#buttons
但是，只需包含以下 HTML：
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
不起作用。我正在运行 jQuery 1.7.x 并加载了 Bootstrap JS 文件。
具体来说：我希望按钮移动到“加载”文本更改稍有延迟，然后返回常规文本。我的谷歌搜索似乎没有一个很好的在线示例（大多数都要求永久状态更改或切换），并且 Bootstrap 站点本身在此处缺少文档。
【问题讨论】：
我认为，如果您向某人展示某事的示例并包含示例的不完整代码，那么这确实是糟糕的文档。 "BS 是一个演示工具，所以它不应该包含太多的商业内容。"那有什么意思？这不是不在他们提供的不完整代码（仅限 HTML）的特定示例旁边不记录代码的借口。 @AaronLS are you sure?顺便说一句，接受的答案指向示例页面本身背后的脚本-我认为与其抱怨一个不错的[免费]工具，不如稍微挖掘一下就可以解决问题，甚至如果文档至少对我来说很清楚。还是觉得不清楚？提供带有明确示例的拉取请求，社区会很高兴:)) @AaronLS here. 引导文档在这一点上的组织很差。我刚刚经历了同样的事情：认为您所要做的就是将 data-loading-text 添加到要应用的元素中（因为这是文档在继续下一个示例之前所说的，twitter.github.io/bootstrap/javascript.html#buttons）关于 .button('loading') 的部分应该出现在使用它的位置旁边，而不是向下几个屏幕。 【参考方案1】：我的按钮
<button type="submit" id="upgrade-subscription" class="btn btn-primary btn-subscribe" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Payment Processing">upgrade</button>
JQ
$('#upgrade-subscription').click(function ()
$(this).button('loading');
);
【讨论】：
嘿@Manoj，欢迎来到 Stack Overflow！您能否解释一下您做了什么或为什么有效？ 我添加这个是为了防止多次点击支付按钮显示加载器和禁用按钮【参考方案2】：只包含引导库：
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
这是一个例子：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Bootstrap Example</TITLE>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
<button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
<script type="text/javascript">
$(function()
$('#btnD').click(function()
var btn = $(this);
btn.button('loading');
);
);
</script>
</BODY>
</HTML>
【讨论】：
这并不能完全回答问题。 OP 说他们已经在加载引导库和 jquery。对于解决实际问题，您还有其他建议吗？【参考方案3】：或者只是添加它，以便它获取 Twitter Bootstrap 属性。
$('button[data-loading-text]').click(function ()
$(this).button('loading');
);
【讨论】：
这对我来说效果很好。如果还想绑定动态添加的按钮： $(document).on('click', 'button[data-loading-text]', function () $(this).button('loading'); );【参考方案4】：放个小js就行了
onclick="$(this).button('loading');"
【讨论】：
这种内联事件声明被认为是一种不好的做法。您应该改用纯 JS 事件侦听器。【参考方案5】：在运行 button('loading') 之前，记下接受的答案如何将 jQuery 按钮对象转换为 js var，因为虽然这有效，但 button('loading') 直接在jQuery 按钮对象。
【讨论】：
【参考方案6】：另外，jquery 有 .delay() 方法，它可能比 setTimeout 更容易使用。
【讨论】：
对于未来的答案，如果您提供可靠的解决方案示例，您将获得更好的评价。【参考方案7】：在文档页面中，正在加载一个名为 application.js 的文件。 http://twitter.github.com/bootstrap/assets/js/application.js
// button state demo
$('#fat-btn')
.click(function ()
var btn = $(this)
btn.button('loading')
setTimeout(function ()
btn.button('reset')
, 3000)
);
【讨论】：
完美运行，感谢您找到它。将在 5 分钟内接受您的答复。 :) 没问题，很高兴它成功了。有些例子没有很好的记录。 这太烦人了！！ 他们这不是作弊吗？ 这对我有帮助，但事实证明，当前的 (3.1.0) bootstrap.min.js 包括 application.js。我认为真正解决我的问题的是从内联点击处理程序 () 到 JQuery 点击处理程序附加，如示例所示。以上是关于jQuery / Twitter Bootstrap 数据加载文本按钮延迟的主要内容，如果未能解决你的问题，请参考以下文章