Panel YUI y desplazamiento

Question

Tengo un Panel YUI que se puede arrastrar definido de esta forma

new YAHOO.widget.Panel("parameters", {
                        fixedcenter: true,
                        constraintoviewport: true,
                        underlay: "shadow",
                        visible: false,
                        close: true,
                        draggable: true,
                        width: "350px" });

Cuando se muestra el panel, quiero que permanezca siempre visible, incluso cuando se desplaza la ventana. Este también es el caso, gracias a fixedcenter: true . El problema es que cuando la ventana se desplaza, el panel se posiciona en el centro de la ventana, incluso si se arrastró a otro lugar anteriormente.

¿Cómo debo modificar la definición anterior para que la posición del panel permanezca constante en relación con la ventana cuando se desplaza la ventana?

Answer 1

Envuelva su contenedor de panel en un elemento de envoltura que tenga un posicionamiento fijo, por ejemplo,

<div id="wrapper" style="position: fixed">
    <div id="parameters">
        <div class="hd">Header</div>
        <div class="bd">Hello, this is my awesome panel.</div>
        <div class="ft">Footer</div>
    </div>
</div>

Construya su panel sin la propiedad de configuración fixedcenter , y centre el panel inmediatamente después de procesarlo, por ejemplo,

var panel = new YAHOO.widget.Panel("parameters", {
        constraintoviewport: true,
        underlay: "shadow",
        visible: false,
        close: true,
        draggable: true,
        width: "350px"
    });
panel.render();
panel.center();

El panel ahora debe permanecer en la misma posición cuando se desplaza la ventana. Solo probé esto en Firefox 3.0 e Internet Explorer 7 y 8.

He publicado la fuente de un ejemplo autocontenido que demostrará que funciona.

Answer 2

Según la documentación, configure el centro de fijación en:

  

" contenido " Para habilitar el posicionamiento central fijo, al igual que con el verdadero   opción. Sin embargo, a diferencia de establecer la propiedad en true, cuando el   la propiedad se establece en " contenida " ;, si la superposición es demasiado grande para el   ventana gráfica, no se centrará automáticamente cuando el usuario se desplace   o redimensiona la ventana (hasta que la ventana sea lo suficientemente grande como para contener la   cubrir). Esto es útil en los casos en que la Superposición tiene ambos encabezados   y los controles de la interfaz de usuario a pie de página a los que el usuario puede necesitar acceder.

http://developer.yahoo.com/yui/docs/ YAHOO.widget.Overlay.html