8
votes

Exemple simple pour .blockui en jQuery

Veuillez me guider dans le but de Blockui avec une simple démonstration.

jquery blockui

0 commentaires

6 Réponses :

15
votes

Jetez un coup d'œil au démos sur la page du plug-in .

Vous devez avoir ce qui suit dans une page (dans cet ordre)

Ajoutez une référence au JQuery Core script
Ajoutez une référence au Block UI Script
ajoutez le code JQuery requis pour obtenir la superposition quand elle est requise

0 commentaires

1
votes

du Page d'accueil :

Le plugin JQuery Blockui vous permet de simuler le comportement synchrone lorsque en utilisant ajax, sans verrouiller le Browser 1 . Lorsqu'il sera activé, il sera Empêcher l'activité de l'utilisateur avec la page (ou une partie de la page) jusqu'à ce qu'il soit désactivé. Blockui ajoute des éléments à le dom pour lui donner à la fois le Apparence et comportement de blocage Interaction utilisateur.
Si vous voulez avoir AJAX, mais vous souhaitez également bloquer l'entrée de l'utilisateur pendant que une longue demande AJAX se produit, alors Blockui est pour vous.

1 commentaires

Bonjour, j'aimerais une simple démonstration de votre part depuis que je suis nouveau à JQuery, cela me serait plus utile. --Merci

2
votes

Pour créer un fichier JS jquery.blockui.js à partir de ce lien.et Placez-le dans votre projet où les fichiers JS inclu

et dans HTML écrivent ce code: P>

    <div id="throbber" style="display:none;">
        <img src="/static/image/gears.gif" /><h4>Please..</h4>
    </div>
    {% block customjs %}
    <script type="text/javascript">
        $(document).ajaxStop($.unblockUI);
        $(document).ready(function() {
    $.blockUI({ message:$('#throbber') }); 
       });
    </script>

0 commentaires

2
votes

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo10').click(function() { 
        $.blockUI({ 
            message: '<h1>Auto-Unblock!</h1>', 
            timeout: 2000 
        }); 
    }); 
}); 
</script>

0 commentaires

2
votes

Je viens de recevoir de l'aide de la marque Adrian et a fait travailler ...
Donc, si quelqu'un d'autre cherche un échantillon de travail:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>

<button onclick="alertUser()">Alert</button>
<button onclick="block()">Block!</button>
<button onclick="unBlock()">UnBlock!</button>

0 commentaires

0
votes

Voici un exemple très basique:

<!DOCTYPE html>
<html>
<head>
    <title>Jquery BlockUi Plugin</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="http://malsup.github.io/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
    <button class="btn">
        Click me to block UI
    </button>

</body>
<script type="text/javascript">
    $('.btn').click(function(argument) {
        $.blockUI({message:"Ui is blocked"});
        setTimeout($.unblockUI,2000)
    })
</script>

</html>

0 commentaires