Bootstrap 3的Ladda UI无法正常工作?请查看我的代码并告诉我解决方法。
下面是我的代码。

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/ladda-themeless.css" rel="stylesheet" />
<link href="~/Content/prism.css" rel="stylesheet" />
<link href="~/Content/ladda.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/ladda.js"></script>
<script src="~/Scripts/ladda.jquery.js"></script>
<script src="~/Scripts/prism.js"></script>
<script src="~/Scripts/spin.js"></script>
<h2>Test Page</h2>
<body>
    <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
</body>


现在,按钮即将出现在屏幕上,但是在单击按钮时什么也没有发生,只是期望按钮文本附近有一个旋转的跨度。
看到这里:http://msurguy.github.io/ladda-bootstrap/

最佳答案

在关闭</body>标记之前添加这些脚本引用
确保它们的顺序正确,

您在脚本部分中缺少Ladda.bind。在<script></script>内添加该代码,则Ladda for Bootstrap应该可以运行示例代码:

<script src="~/Scripts/jquery-1.11.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/ladda.js"></script>
<script src="~/Scripts/ladda.jquery.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


 <script type="text/javascript" src="js/prism.js"></script>



     <script>
                ///your are missing this part
                // Bind normal buttons
                Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );
                // Bind progress buttons and simulate loading progress
                Ladda.bind( '.progress-demo button', {
                    callback: function( instance ) {
                        var progress = 0;
                        var interval = setInterval( function() {
                            progress = Math.min( progress + Math.random() * 0.1, 1 );
                            instance.setProgress( progress );
                            if( progress === 1 ) {
                                instance.stop();
                                clearInterval( interval );
                            }
                        }, 200 );
                    }
                } );
                // You can control loading explicitly using the JavaScript API
                // as outlined below:

            </script>

关于javascript - Bootstrap 3的Ladda UI无法正常工作?请查看我的代码并告诉我修复,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30372886/

10-12 07:07