JQueryUI boîte de Dialogue position ne fonctionne pas,

Je suis à l'aide de JQueryUI Dialogue et créé cette fonction ci-dessous:

<script>
    $(document).ready(function() {
        $('#dialog').dialog({
                autoOpen:false,
                width:100,
                height:200,
                position:[2250,50]
           });


        $('.class112').click(function() {
           var msg = $(this).attr('id');
           $('#dialog').load('classSource/' + msg + '.html', function() {
           $('#dialog').dialog('open');
           });
        });
    });
</script>

et le code HTML:

<p class="class112" id="class1">click!</p>

<div id="dialog" style="display: none;"></div>

Il fonctionne très bien mais il crée une boîte de dialogue après l'appel à "ouvrir" quelle que soit la fonction de positionnement. Disons que mon écran de l'ordinateur a x:1280 et y:760 pixels et la largeur du corps et la hauteur sont mis à 3000px chacun dans un fichier CSS. Lorsque la "ouvrir" de la fonction de dialogue est viré, il ne reçoit pas de position X à partir de quand il a été initialisé avant, souvenez-vous :

position:[2250,50]

Comme un résultat, il crée la boîte de dialogue de droite de la fenêtre n'est pas exactement à où X a été déclarée. Mais Y sort correctement car 50px est à la portée de la résolution de mon écran.

Tout ce que je veux, c'est quand je clique sur "click!" paragraphe, je veux la boîte de dialogue apparaît dans la initialisée position et je pourrais être capable de le voir après de défilement horizontale.
Que dois-je faire?

InformationsquelleAutor buri kuri | 2011-11-19
  1. 7

    Je pense que la boîte de Dialogue widget utilise la Position de l'utilitaire de position de lui-même. En regardant la documentation, vous pouvez être en mesure d'utiliser la collision option pour contrôler ce comportement:

    Lorsque l'élément positionné déborde de la fenêtre dans une certaine direction,
    le déplacer vers une autre position. Semblable à ma et à, cet accepte
    une valeur unique ou une paire horizontale/verticale, par exemple. "flip", "ajustement",
    "fit flip", "ne conviennent à personne".

    http://jqueryui.com/demos/position/#option-collision

    EDIT:

    Oui, en regardant la source de 1.8.16 l'option par défaut est "apte":

        position: {
        my: 'center',
        at: 'center',
        collision: 'fit',
        //ensure that the titlebar is never outside the document
        using: function(pos) {
            var topOffset = $(this).css(pos).offset().top;
            if (topOffset < 0) {
                $(this).css('top', pos.top - topOffset);
            }
        }
    },

    Vous voulez remplacer le "aucun" probablement.

    • Ok, voici une autre question, quand j'ai faites défiler la fenêtre horizontalement et le feu .la boîte de dialogue ("ouvert") de la fonction, il crée un dialogue dans x+(défilement horizontal montant). Je veux qu'il ne sera créée qu'en x et y spécifiées position. Pouvez-vous svp m'aider?
    • Peut-être, au lieu de spécifier x et y, vous devrez également prendre en compte le montant de défilement et de le soustraire. N'hésitez pas à poster une nouvelle question.
    • Oui, je le pensais en soustrayant xscroll montant. Savez-vous comment obtenir xscroll montant?
    InformationsquelleAutor Dave L.
  2. 2

    Cela devrait le faire jQuery au-dessus de 1.8:

    //Overriding collision detection default settings of the jQuery dialog.
$.extend($.ui.dialog.prototype.options.position, { collision: 'none' });

    Malheureusement, il n'existe aucun moyen de modifier ce paramètre sur une boîte de dialogue séparée de l'élément, en raison de la façon dont le '_position' fonction dans le code source. Sens la suivante ne fonctionnera PAS:

    $('#elem').dialog({
position: {
    collision: 'none'
    }
});

    Cependant, vous pouvez également perdre avec le code source de l'INTERFACE utilisateur de la boîte de dialogue, si l'avenir de la maintenance du code n'est pas un problème.

    • Vérifié. Dans 1.8.21 fonctionne très bien. Étrange, mais sans aucun résultat dans 1.8.9.
    InformationsquelleAutor Andrei