2010-10-25 5 views
5

Sto usando questo plugin per bloccare l'interfaccia utente: http://jquery.malsup.com/block/Come blocco l'interfaccia utente utilizzando l'interfaccia utente JQuery?

Il plugin funziona in modo eccellente, è solo che sarei enormemente sorpreso se jQuery UI non ha fatto una cosa del genere già, dato che si deve fare efficacemente la stessa cosa per la sua funzione Dialog.

Come si blocca l'interfaccia utente utilizzando l'interfaccia utente JQuery?

+0

Cosa c'è che non va usando il plug-in BlockUI? È piuttosto leggero –

+0

@Alastair: Niente - più di un esperimento mentale è tutto. È un fantastico plugin, –

risposta

5

Si potrebbe fare qualcosa di hacky: chiamare il modale, quindi sul callback onopen, remove() stesso.

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

Ehi! Ho detto che era :) hacky

o

Esaminare il codice modale e vedere se si chiama una funzione per bloccare l'interfaccia utente. Forse potresti aggiungere un riferimento esterno per poterlo chiamare tu stesso.

o

Aggiungere questo HTML per documentare, e chiamare show() o hide() su di esso.

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

o (se non si è sicuri come sono fatti)

Sono semplicemente un div (comunemente) posizionato in modo assoluto e il 100% height/width, con un alto z-index e di solito un opacity (scopri come farlo in IE6 con i filtri).

È inoltre possibile impostarlo su position: fixed in modo che sarà sempre lì se si scorre. Puoi anche nascondere le barre di scorrimento se lo desideri facendo $('body').css({ 'overflow-y': 'hidden' }).

+0

+1: diversi metodi interessanti. – Kranu

2

Per "bloccare" l'interfaccia utente, basta inserire un div in posizione assoluta con un alto indice z e il colore di sfondo e l'opacità desiderati in modo che copra l'intera pagina.

+0

Penso che sappia * come * a, ma * può * farlo con l'interfaccia utente di jQuery? non scrivere il proprio codice e CSS. – alex

+0

@Alex: In realtà, non l'ho fatto :(Ma il tuo punto è valido –

+0

Whoops, mio ​​errore! – alex

0

jQuery ha solo una barra di avanzamento come so. Ovviamente puoi fare tutto quanto sopra ma sembra troppo complicato da gestire se si confronta con quello che si sta già utilizzando.

mio recommandation è quello di provare a cambiare jQuery Block UI

davvero pulite e hanno molte opzioni CSS. Facile da usare e implementare su qualsiasi progetto.

+0

@BillyONeal Penso che tu non abbia letto la mia risposta: "quello che stai già usando" è davanti ai tuoi occhi –

+0

La domanda dice "Ho usato questo plugin per bloccare l'interfaccia utente.Come potrei implementare tale usando solo componenti dell'interfaccia utente jQuery (piuttosto che questo plugin) "La tua risposta dice" Prova a usare questo plugin che hai detto esplicitamente di non voler usare nella domanda " –

+0

Discutiamo qui la grammatica inglese o la programmazione? Penso che sia scortese votare giù solo perché non hai capito il punto: –

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 
Problemi correlati