blocks|key|275582|text|在文档页面中，加载了一个名为application.js的文件。http://twitter.github.com/bootstrap/assets/js/application.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|275583|//+button+state+demo
$('#fat-btn')
++++.click(function+()+{
++++++++var+btn+=+$(this)
++++++++btn.button('loading')
++++++++setTimeout(function+()+{
++++++++++++btn.button('reset')
++++++++},+3000)
++++});|code-block|syntax|javascript|275584|entityMap|0|LINK|mutability|MUTABLE|url|http://twitter.github.com/bootstrap/assets/js/application.js^0|W|1O|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>In the documentation page, there is a file being loaded called application.js. <a href="http://twitter.github.com/bootstrap/assets/js/application.js">http://twitter.github.com/bootstrap/assets/js/application.js</a></p>

<pre><code>// button state demo
$('#fat-btn')
    .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });
</code></pre>


blocks|key|492566|text|此外，jquery有.delay()方法，它可能比setTimeout更容易使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|492567|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>also, jquery has .delay() method which may be easier to work with than setTimeout.</p>


blocks|key|275820|text|在运行button('loading')之前，请注意accepted是如何将jQuery按钮对象转换为js变量的，因为，虽然此方法有效，但直接在jQuery+button对象上使用时，button('loading')将不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|275821|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Make a note of how the accepted answer converted the jQuery button object to a js var before running button('loading') on it because, while this works, button('loading') will not work when used directly on the jQuery button object.</p>


blocks|key|492805|text|只要把一个小的js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|492806|onclick="$(this).button('loading');"|code-block|syntax|javascript|492807|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just put a small js</p>

<pre><code>onclick="$(this).button('loading');"
</code></pre>


blocks|key|492884|text|或者只是添加这个，这样它就会获得Twitter+Bootstrap属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|492885|$('button[data-loading-text]').click(function+()+{
++++$(this).button('loading');
});|code-block|syntax|javascript|492886|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Or just add this so it picks up the Twitter Bootstrap attribute.</p>

<pre><code>$('button[data-loading-text]').click(function () {
    $(this).button('loading');
});
</code></pre>


blocks|key|276022|text|只需包含bootstrap库：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|276023|<script+src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js+"></script>|code-block|syntax|javascript|276024|这是一个示例：|276025|<!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>|276026|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>just include the bootstrap library: </p>

<pre><code>&lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "&gt;&lt;/script&gt;
</code></pre>

<p>This is an example:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
    &lt;TITLE&gt;Bootstrap Example&lt;/TITLE&gt;
    &lt;link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css "&gt;
&lt;STYLE&gt;
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
    &lt;button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)"&gt;hola!!!&lt;/button&gt;


    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(function(){
            $('#btnD').click(function(){
                  var btn = $(this); 
                  btn.button('loading');
            });
        });
    &lt;/script&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</code></pre>


blocks|key|492956|text|我的按钮|type|unstyled|depth|inlineStyleRanges|entityRanges|data|492957|<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>|code-block|syntax|javascript|492958|JQ|492959|$('#upgrade-subscription').click(function+()+{
++++$(this).button('loading');
});|492960|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>My Button </p>

<pre><code>&lt;button type="submit" id="upgrade-subscription" class="btn btn-primary btn-subscribe" data-loading-text="&lt;i class='fa fa-circle-o-notch fa-spin'&gt;&lt;/i&gt; Payment Processing"&gt;upgrade&lt;/button&gt;
</code></pre>

<p>JQ</p>

<pre><code>$('#upgrade-subscription').click(function () {
    $(this).button('loading');
});
</code></pre>


<p>I'm trying to get this exact example working on my website:</p>

<p><a href="http://getbootstrap.com/2.3.2/javascript.html#buttons" rel="noreferrer">http://getbootstrap.com/2.3.2/javascript.html#buttons</a></p>

<p>However, simply including this HTML:</p>

<pre><code>&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
</code></pre>

<p>Does not work. I'm running jQuery 1.7.x and have loaded the Bootstrap JS files.</p>

<p>To be specific: I want the button to move to the "loading" text change for a slight delay, then go back to the regular text. There doesn't seem to be a good example available online from my Googling (most are asking for a permanent state change or toggle), and the Bootstrap site itself is lacking in documentation here.</p>


jQuery / Twitter Bootstrap data-loading-text button with delay

jQuery

我正在尝试让这个例子在我的网站上运行：但是，只需包含此HTML：<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>不起作用。我正在运行jQuery 1.7.x，并且已经加载...

问jQuery / Twitter Bootstrap数据加载-带延迟的文本按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery / Twitter Bootstrap数据加载-带延迟的文本按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery / Twitter Bootstrap数据加载-带延迟的文本按钮
EN