2010-10-25 28 views
5

He estado usando este plugin para bloquear la interfaz de usuario: http://jquery.malsup.com/block/¿Cómo bloqueo la interfaz de usuario usando JQuery UI?

El plugin funciona muy bien, es sólo que me gustaría ser enormemente sorprendido si jQuery UI no hizo tal cosa ya, dado que se debe hacer de hecho, es lo mismo para su función Dialog.

¿Cómo se bloquea la interfaz de usuario con JQuery UI?

+0

¿Qué pasa con solo usar el complemento BlockUI? Es bastante liviano. –

+0

@Alastair: Nada, más un experimento mental es todo. Es un plugin impresionante, –

Respuesta

5

Puede hacer algo hacky - llame al modal, luego en la devolución de llamada onopen, remove() modal.

$("#something").dialog({ 
    open: function(event, ui) { $('.ui-dialog').remove(); } 
}); 

¡Hey! Me dijo que era :) hacky

o

Examine el código modal y ver si se llama a una función para bloquear la interfaz de usuario. Quizás podría agregar una referencia externa para que pueda llamarlo usted mismo.

o

Añadir este código HTML para documentar y llamar show() o hide() en él.

<div class="ui-widget-overlay" style="width: 100%; height: 100%; z-index: 32767;"></div> 

o (si no está seguro de cómo se hacen)

Son simplemente una div (comúnmente) con posición absoluta y el 100% height/width, la máxima z-index y por lo general un opacity (echa un vistazo a cómo hacerlo en IE6 con filtros).

También puede configurarlo en position: fixed para que siempre esté allí si se desplaza. También puede ocultar las barras de desplazamiento si lo desea haciendo $('body').css({ 'overflow-y': 'hidden' }).

+0

+1: varios métodos interesantes diferentes. – Kranu

2

Para "bloquear" la interfaz de usuario, simplemente inserta un div completamente posicionado con un alto índice z y el color de fondo y la opacidad deseados de manera que cubra toda la página.

+0

Creo que sabe * cómo * hacerlo, pero * ¿puede * hacerlo con jQuery UI? es decir, no escribir su propio código y CSS. – alex

+0

@Alex: En realidad, no :(Pero tu punto es válido. –

+0

¡Vaya, error! – alex

0

jQuery solo tiene una barra de progreso como yo sé. Por supuesto, puede hacer todo lo anterior pero parece demasiado complicado de gestionar si compara con lo que ya está utilizando.

Mi recommandation es intentar cambiar jQuery Block UI

realmente limpias y tienen muchas opciones de CSS. Fácil de usar e implementar en cualquier proyecto.

+0

@BillyONeal Creo que no leíste mi respuesta: "lo que estás usando ya" está frente a tus ojos –

+0

La pregunta dice "He estado usando este complemento para bloquear la interfaz de usuario.¿Cómo implementaría tal uso solo de los componentes de jQuery UI (en lugar de este complemento)? Su respuesta es "Intente usar este complemento que explícitamente dijo que no quería usar en la pregunta" –

+0

¿Hablamos de gramática inglesa aquí o de programación? Creo que es grosero votar solo porque no entiendes. –

0
<div id="__messageBox_wait" class="messageBoxArea" style="display: none; cursor: default"> 
       <div> 
        <label id="__messageBox_wait_text" style="vertical-align: middle"> 
         Please wait</label> 
       </div> 
</div> 

function blockUI() { 
     var boxHtml = $('#__messageBox_wait'); 
     var message = "Please wait..."; 
     $('#__messageBox_wait_text').text(message); 
     $.blockUI({ 
      theme: false, 
      title: 'Message', 
      message: boxHtml, 
      css: 'width:15%' 
     }); 
    } 


    $.unblockUI(); -- call to Unblock UI 
    blockUI(); --- call to block UI 
Cuestiones relacionadas