Плагин jQuery BlockUI

Опубликовано: 22 Декабря, 2021

Плагин BlockUI используется для имитации синхронного поведения AJAX. При активации он не позволяет пользователю взаимодействовать со страницей, пока она не будет деактивирована. В DOM (объектная модель документа) добавлены элементы, которые придают приятный внешний вид пользовательскому интерфейсу и его поведение.

Ссылка для скачивания:

<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>

Синтаксис: для блокировки пользовательского интерфейса

$ .blockUI ();

Для разблокировки пользовательского интерфейса

$ .unblockUI ();

Когда мы вызываем blockUI без параметров, на экране отображается сообщение «Подождите». Мы можем изменить сообщения, добавив к ним параметры. Чтобы заблокировать только элемент, а не всю страницу, мы должны сделать несколько другой вызов, заблокировать и разблокировать . Чтобы лучше понять, давайте посмотрим на базовый пример.

Пример:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >BlockUI</ title >
 
    < script src =
 " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " >
    </ script >
 
    < script src =
        " https://malsup.github.io/jquery.blockUI.js " >
    </ script >
 
    < style >
        .btn {
            background-color: white;
            color: black;
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 3rem;
        }
 
        .success {
            border-color: #4CAF50;
            color: green;
        }
 
        .success:hover {
            background-color: #4CAF50;
            color: white;
        }
    </ style >
 </ head >
 
< body >
    < button class = "btn success" id = "blockd" >
        BlockUI default</ button >
    < br >
    < button class = "btn success" id = "blockm" >
        BlockUI with custom message</ button >
    < br >
    < button class = "btn success" id = "blocks" >
        BlockUI with custom style
    </ button >
    < div id = "blockel" >
        < button class = "btn success" id = "blocke" >
            BlockUI Element Blocking</ button >
    </ div >
    < div id = "message" style = "display: none;" >
        < h1 >Loading ...</ h1 >
    </ div >
 
    < script >
        $(document).ready(function () {
            $("#blockd").click(function () {
 
                // Default blockUI code
                $.blockUI();
                setTimeout(function () {
 
                    // Timer to unblock
                    $.unblockUI();
                }, 3000);
            });
 
            $("#blockm").click(function () {
 
                // blockUI code with custom message
                $.blockUI({ message: $('#message') });
                setTimeout(function () {
                    $.unblockUI();
                }, 3000);
            });
 
            $("#blocks").click(function () {
                $.blockUI({
 
                    // blockUI code with custom
                    // message and styling
                    message: "< h3 >GeeksForGeeks loading...< h3 >",
                    css: { color: 'green', borderColor: 'green' }
                });
                setTimeout(function () {
                    $.unblockUI();
                }, 3000);
            });
 
            $("#blocke").click(function () {
                $("#blockel").block({
                         
                    // BlockUI code for element blocking
                    message: "< h3 >GeeksForGeeks loading...< h3 >",
                    css: { color: 'green', borderColor: 'green' }
                });
                setTimeout(function () {
                    $("#blockel").unblock();
                }, 3000);
            });
        });
    </ script >
 </ body >
 
</ html > 

Выход:

Перед активацией BlockUI:

После активации BlockUI:

BlockUI по умолчанию:

BlockUI с настраиваемым сообщением:

BlockUI с настраиваемым стилем:

Блокировка элементов BlockUI:

JQuery HTML CSS jQuery-UI

Плагин jQuery BlockUI

РЕКОМЕНДУЕМЫЕ СТАТЬИ