如何在 HTML 中单击按钮后将进度条(使用 Ladda）与按钮绑定

How to bind progress bar (use Ladda) with a button after button clicks in HTML?

本文关键字：按钮 使用 Ladda 绑定 HTML 单击      更新时间：2023-09-26

我有一个进度条和一个按钮点击。现在进度条未与按钮链接。那么我该如何确保：当按钮单击时，进度条启动;当从服务器检索结果时，进度条停止？一些身体可以帮忙吗？

我想尝试使用一些隐藏字段作为标志来通知进度条，但还没有时间尝试。

HTML 按钮在这里：

<section class="progress-demo">
            <button id="sendRequest_1" onclick="SendRequest(1)" type="button" class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">Send</span></button></section>

进度条正在使用

<script src="js/spin.min.js"></script><script src="js/ladda.min.js"></script>

进度条在这里：

      <script>
        // Bind normal buttons
       Ladda.bind( 'section:not(.progress-demo) button', { timeout: 2500 } );
        //Ladda.bind( 'input[type=submit]' );
        // Bind progress buttons and simulate loading progress
        Ladda.bind( 'section.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 );
            }
        } );

按钮点击功能在这里。

function SendRequest(i){
alert("button clicked!");
//call post to get server response
... say 1s to get response
//how to bind it to progress bar when server response is back??

}

...
var l = Ladda.bind( 'section:not(.progress-demo) button', { timeout: 2500 } );
...
function SendRequest(i){
  $.ajax({
    url: "some.php",
    success: function(data){
      l.stop();
    }
  });
}
相关文章：