按钮样式加载等待

Posted 2020-09-23 moumou

使用插件Ladda，基于bootstrap的样式实现加载等待的效果：

首先引用.css以及.js文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>

然后添加按钮样式：

<button class="btn btn-primary ladda-button save-all" data-style="expand-right">
       <span class="ladda-label">保存</span>
</button>

通过js控制UI状态：

　　　　　// 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 );
            }
        });

只用ajax表单，使用语法举例：

　　　　$(‘#save-all‘).click(function() {
            var l = Ladda.create(this);
            l.start();
            
            var data = $(‘#modifyform‘).serialize();
            var url  = $(this).attr(‘href‘);
            $.post(url, data, function(data) {
                if (data.code == 0) {
                    $(‘#error_return‘).text(data.msg);
                } else{
                    $(‘#myModa2‘).modal(‘hide‘);
                    
                    window.location.reload();
                }
            }, ‘json‘).always(
                function() {
                    l.stop();
                }
            );
            return false;
        })