Dojo “chargement en cours”message

Je suis nouveau Dojo, j'ai donc besoin d'un peu d'aide.

Certains de mes liens prend un certain temps (lorsque l'utilisateur clique, il faut plusieurs secondes avant que la page commence à charger), et je voudrais ajouter un "chargement en cours"message.

Je peux faire de la "old fashion", mais je veux apprendre la nouvelle, plus simple, plus intelligente Dojo-chemin.

Exactement comment il fonctionne, c'est pas important pour l'instant, mais j'imagine quelque chose comme ceci:

Un rectangle s'affiche au milieu de l'explorateur windows. (Pas au milieu du document.) Il a un gif animé, et un message du genre "Veuillez patienter...".

Tous les autres éléments sont désactivés, peut-être "disparu" un peu. Peut-être un grand blanc 50% rectangle transparent, qui se trouve entre le "chargement"-message et dans le reste du document.

InformationsquelleAutor myplacedk | 2009-01-28
  1. 8

    Ce que vous décrivez suppose que dojo lui-même a déjà été chargé par le temps que le modal dijit.Dialog s'affiche avec le message de chargement.

    Maintenant, normalement, dojo commence à s'exécuter une fois que votre page est complètement chargée, et que vous auriez normalement mettre votre dojo code à l'intérieur d'une fonction anonyme transmise en tant que paramètre de dojo.addOnLoad().

    Qui implique que la partie restante de votre page (ce que vous appelez votre "liens") devra être chargé via ajax (en utilisant, par exemple, dijit.layout.ContentPane). De cette façon, dojo pouvez exécuter avant que le contenu est téléchargé, et votre message "waiting" peut apparaître plus tôt.

    Il pourrait ressembler à ceci:

    <html>

<head>
<link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" />
<script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
/* make sure that you shrinksafe together your libraries and dojo's for faster loading... */
<script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script>
<script type="text/javascript">
   var dialog;
   dojo.addOnLoad(function(){
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.Dialog");
      dialog = new dijit.Dialog();
      dialog.setContent("<p>This page will be available in a tick!</p>");
      dialog.show();
   });
</script>
</head>

<body class="tundra">
   <div id="delayedContent" 
        dojoType="dijit.layout.ContentPane" 
        href="/myContentUrl"
        onLoad="dialog.hide()">
   </div>
</body>

</html>

    Le seul défaut de ce plan est de dojo lui-même: attendre de votre shrinksafed bibliothèque de peser plus de 90K (peut-être jusqu'à 300 K, en fonction de la quantité de choses que vous mettez là). Sur une connexion lente, qui prend toujours un certain temps à télécharger. Cela dit, nous parlons d'un statique 90K --- le même utilisateur ne télécharger qu'une seule fois par session, et encore moins souvent que si vous prenez le temps d'établir les cache/expire en-têtes lorsque ces fichiers statiques sont servis.

    • Vous avez mal compris un peu. Pas d'attente alors que le chargement de la page. Il faut du temps avant la prochaine page commence à charger, car une servlet doit faire quelques trucs qui prennent un certain temps. Mais la bibliothèque dijit.Boîte de dialogue de l'air sympa. Je vais vérifier...
    • Eh bien, vous pourriez adapter ma solution et de charger tout le contenu du lien en remplaçant le contenu actuel de la ContentPane, tout en affichant le Dialogue de Chargement. Mais c'est très impliqué à mettre en œuvre dans l'ensemble du site, auquel cas GWT serait une meilleure option que le dojo.
    InformationsquelleAutor pierdeux
  2. 7

    Dojo a un tel composant déjà: Dojox Occupé Bouton. Vous pourriez aussi être intéressé par les articles suivants par Sitepen: Dojo: les Blocs de Construction de sur le Web (montre bloquant le contenu de la page) et La mise en œuvre d'une Application Web de Préchargement de Superposition.

    • Le occupé boutons semble intéressant pour d'autres utilisations. Mais pour cela, il n'est pas suffisamment visible (si vous soumettez un formulaire sans l'aide du bouton, vous ne remarquerez probablement pas), et il ne tient pas à l'utilisateur de travailler sur une page qui va disparaître à tout moment. Mais merci pour les liens, je vais le lire plus tard.
    InformationsquelleAutor Maine
  3. 5

    je suis en utilisant dojox.widget de.Veille à cet effet:
    http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

    dojo.require("dojox.widget.Standby");

var standby = new dojox.widget.Standby({
                                 target: "target-id-toStandby",
                                 color: "white",
                                 image: "/images/loading-ajax.gif"
                             });
                             document.body.appendChild(standby.domNode);
                             standby.startup();
                             standby.show();

    lorsque votre contenu est prêt à l'utilisation...

    standby.hide();

    "target-id-toStandby" est l'id de la div que vous voulez, de "geler"

    InformationsquelleAutor jacktrade
  4. 4

    J'ai mis en place une telle chose de cette façon:

    D'abord, sur chaque page, ajouter un gestionnaire d'événements pour toute href classe "lente" ci-jointe:

     dojo.addOnLoad(function() { 
dojo.query('un.lente").onclick(function() {chargement(); return true;}); 
});

    La fonction de chargement ressemble à ceci:

     fonction de chargement() { 
var sous-couche = nouvelle bibliothèque dijit.DialogUnderlay({'class': 'chargement'}); 
la sous-couche.show(); 
}

    Le CSS pour le "chargement" de la classe ressemble à ceci:

    div.chargement { 
background-image: url(/images/loading.gif); 
background-repeat: no-repeat; 
background-position: center; 
}

    Où loading.gif est un joli GIF animé.

    InformationsquelleAutor Chris KL
  5. 2

    pierdeux m'a mis sur la piste avec celui-ci. C'est mon code pour l'instant:

    dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

function displayWait(txtContent) {
    if (!txtContent) {
        txtContent = "Please wait...";
    }
    txtContent = "<img src=\"loading.gif\" alt=\"\" /> " + txtContent;
    var thisdialog = new dijit.Dialog({ title: "", content: txtContent });
    dojo.body().appendChild(thisdialog.domNode);
    //thisdialog.closeButtonNode.style.display='none';
    thisdialog.titleBar.style.display='none';
    thisdialog.startup();
    thisdialog.show();
}

    C'est un modal de la boîte de message qui ne peut pas être fermé, de sorte que l'utilisateur ne peut pas utiliser d'autres éléments sur la page. C'est exactement ce que j'ai demandé, donc je vais accepter pierdeux de réponse.

    InformationsquelleAutor myplacedk