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/