2015-05-21 29 views
0

Ladda UI Bootstrap 3不工作?請看我的代碼並告訴我修復。 以下是我的代碼。引導程序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/

回答

0

剛剛閉幕</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> 
相關問題