navegadores - jquery requirements

Problema de la barra de desplazamiento con el diálogo de la interfaz de usuario jQuery en Chrome y Safari

Question

Estoy usando el diálogo jQuery UI con modal=true . En Chrome y Safari, esto deshabilita el desplazamiento a través de la barra de desplazamiento y las teclas del cursor (desplazarse con la rueda del mouse y la página hacia arriba / abajo todavía funciona).

Esto es un problema si el diálogo es demasiado alto para caber en una página: los usuarios de una computadora portátil se sienten frustrados.

Alguien planteó esto hace tres meses en el rastreador de errores jQuery - http://dev.jqueryui.com/ticket/4671 - no parece que arreglarlo sea una prioridad. :)

Entonces, ¿alguien?

1. tener una solución para esto?
2. tener una solución sugerida que daría una experiencia de usabilidad decente?

Estoy experimentando con mouseover / scrollto en bits del formulario, pero no es una gran solución :(

EDITAR: apunta a Rowan Beentje (que no está en SO afaict) para encontrar una solución a esto. jQuery UI evita el desplazamiento al capturar los eventos mouseup / mousedown. Entonces, el código siguiente parece arreglarlo:

$("dialogId").dialog({
    open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind(''mousedown.dialog-overlay'')
                            .unbind(''mouseup.dialog-overlay'');
        }, 100);
    },
    modal: true
});

Usar bajo su propio riesgo, no sé qué otro comportamiento unmodal que pueda desencadenar esto.

Answer 1

¿Probaste mi extensión al Diálogo? http://plugins.jquery.com/project/jquery-framedialog

Answer 2

Creo que tener diálogos demasiado grandes va en contra de su requisito de "experiencia de usabilidad decente". Incluso si no tuviera que tener una solución temporal debido al error de jQuery UI Dialog, me desharía de tales diálogos grandes. De todos modos, entiendo que puede haber algunos casos "extremos" en los que necesitas adaptarte, así que ...

Dicho esto, sin duda sería útil adjuntar alguna captura de pantalla: estás haciendo una pregunta sobre un diseño, pero no podemos verlo. Pero entiendo que es posible que no pueda / quiera mostrar el contenido, así que está bien. Estas son mis conjeturas ciegas ; Espero le hayan sido de ayuda:

• Pruebe con un diseño diferente para su diálogo. Si haces esto, hazlo para todos los cuadros de diálogo, no solo para aquellos con los que tienes problemas (a los usuarios no les gusta aprender muchas UI diferentes).
• Si no puede encontrar un diseño diferente, intente ampliar su diálogo primero. SI tiene muchas opciones para elegir, puede encontrar una buena solución dividiéndolas en dos columnas.
• Sabiendo que ya está usando la interfaz de usuario de jQuery, intente usar pestañas . Si tiene demasiadas opciones, un panel con pestañas suele ser una buena solución: los usuarios son ''utilizados'' para ese widget.
• Usted habló sobre ''elementos'' en el diálogo, pero no sabemos qué es un artículo. ¿Es posible mostrarlos de una manera "resumida", como una pequeña lista a la izquierda y una vista ampliada a la derecha cuando hace clic en ellos? Por ejemplo, tener una lista con los títulos de los artículos a la izquierda, y cuando hace clic en ellos, obtiene la visualización completa a la derecha.

Sin poder ver el diseño, supongo que es todo lo que puedo hacer.

Answer 3

Este es un error que se ha corregido desde entonces: http://bugs.jqueryui.com/ticket/4671

Answer 4

Estoy de acuerdo con los carteles anteriores en que si el diálogo no funciona para usted, puede ser bueno reconsiderar su diseño. Sin embargo, puedo ofrecer una sugerencia.

¿Podrías poner el contenido del diálogo dentro de un div desplazable? De esa manera, en lugar de que toda la página necesite desplazarse, solo el contenido dentro del div debería desplazarse. Esta solución también debería ser bastante fácil de lograr.

Answer 5

Hay una solución alternativa que desvincula el evento vinculado. Esto agrega lo siguiente al abrir: evento del diálogo:

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind(''mousedown.dialog-overlay'').unbind(''mouseup.dialog-overlay''); }, 100);
    }
});

Esto funciona ... pero esto es feo

--desde https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

Funcionó como un encanto en mi caso.

Answer 6

Puede usar este código: jquery.ui.dialog.patch.js

Me solucionó el problema. Espero que esta es la solución que estás buscando.

Answer 7

Si bien estoy de acuerdo con que la gente del grupo no haga un diálogo que sea más grande que la ventana gráfica, creo que hay casos en que puede ser necesario el desplazamiento. Un diálogo puede verse muy bien en una resolución mayor a 1024 x 768, pero cualquier cosa menos se ve arrugada. O digamos, por ejemplo, que nunca desea que aparezca un cuadro de diálogo en el encabezado de su sitio. En mi caso, tengo anuncios que ocasionalmente tienen problemas con el índice flash z, por lo que nunca quiero que se muestren cuadros de diálogo sobre ellos. Finalmente, es malo en general quitar cualquier tipo de control común, como el desplazamiento, lejos del usuario. Este es un problema separado de cuán grande es el diálogo.

Me gustaría saber por qué los eventos mousedown y mouseup están ahí en primer lugar.

Probé la solución que proporcionó alexis.kennedy y funciona sin romper nada que pueda ver en cualquier navegador.

Answer 8

Soluciono esta situación deshabilitando el modo modal de diálogo y mostrando la superposición de forma manual:

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog(''option'', ''modal'', false);

        // show overlay div manually
        var tempDiv = $("<div id=''tempOverlayDiv''></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind(''dialogclose'', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

Answer 9

Usa el código a continuación. Funcionará bien.

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind(''mousedown.dialog-overlay'')
                        .unbind(''mouseup.dialog-overlay'');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map(''focus,keydown,keypress''.split('',''), function(event) { return event + ''.dialog-overlay''; }).join('' '');
               }
 }(jQuery))
});