Bootstrap 3的Ladda UI无法正常工作？ 请查看我的代码并告诉我修复
[英]Ladda UI for Bootstrap 3 is not working ? Please see my code and tell me fix
问题描述
Ladda UI for Bootstrap 3 is not working ? 
Bootstrap 3的Ladda UI无法正常工作？ Please see my code and tell me fix. 请查看我的代码并告诉我解决方法。 Below is my code. 下面是我的代码。
<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>
Now button is coming on screen but on click of button nothing is happening but am expecting one spinning span near to button text. 现在，按钮出现在屏幕上，但是单击按钮时什么也没有发生，只是期望按钮文本附近有一个旋转的跨度。 See here: http://msurguy.github.io/ladda-bootstrap/ 看到这里： http : //msurguy.github.io/ladda-bootstrap/
1 个解决方案
解决方案1
0 已采纳 2015-05-21 12:01:37
Include these script references just before the closing </body> tag make sure they are in proper order, 在</body>标记之前添加这些脚本引用，以确保它们的顺序正确，
You are missing the Ladda.bind in your script section. 您在脚本部分中缺少 Ladda.bind 。 add that inside <script></script> then the Ladda for Bootstrap should work sample code: 在<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.