Latest web development tutorials

jQuery UI API - componente di dialogo (dialogo Widget)

categoria

Widget (Widget)

uso

Descrizione: contenuti Open in un overlay interattivo.

Nuova versione: 1.0

Dialog è una finestra mobile che include una barra del titolo e una zona del contenuto. finestra di dialogo può essere spostata, ridimensionata, di default icona 'x' per chiudere.

Se la lunghezza del contenuto supera l'altezza massima, una barra di scorrimento apparirà automaticamente.

Una barra dei pulsanti in basso, e una modalità di sovrapposizione semitrasparente è comune per aggiungere opzioni.

fuoco

Quando si apre una finestra di dialogo, l'attenzione si sposterà automaticamente per soddisfare i criteri di seguito la prima voce:

  1. Con autofocus primo elemento entro la finestra delle proprietà
  2. I primi contenuti all'interno della finestra di dialogo :tabbable elemento
  3. Il primo pannello all'interno del pulsante di dialogo :tabbable elemento
  4. finestra di dialogo, il pulsante Chiudi
  5. La finestra di dialogo in sé

Una volta aperto, i componenti di dialogo (dialogo Widget) assicurano le caselle per passare attenzione tra gli elementi dalla scheda, la finestra di dialogo non include gli elementi al di fuori. dialogo modale impedisce l'utente fa clic del mouse gli elementi al di fuori della finestra di dialogo.

Quando si chiude la finestra di dialogo, l'attenzione ritorna automaticamente alla finestra di dialogo precedente si apre sul fuoco elemento.

Nascondi pulsante di chiusura

In alcuni casi, si potrebbe desiderare di nascondere il pulsante di chiusura, ad esempio, una pulsantiera ha un pulsante per chiudere il caso. La soluzione migliore è attraverso i CSS. A titolo di esempio, è possibile definire una regola semplice, come ad esempio: 

.no-vicino .ui-dialogo-barra del titolo-stretta {
  display: none;
}

Quindi, è possibile aggiungere no-close , classe per la finestra di dialogo arbitrario, utilizzato per nascondere il pulsante di chiusura: 

$ ( "#dialog") .dialog ({
  dialogClass: "no-close",
  pulsanti: [
    {
      testo: "OK",
      clicca: function () {
        $ (This) .dialog ( "close");
      }
    }
  ]
});

tematizzazione

componenti finestra di dialogo (dialogo Widget) utilizzando jQuery UI framework CSS per definire l'aspetto del suo stile. Se è necessario utilizzare la finestra di dialogo per specificare lo stile, è possibile utilizzare il seguente nome della classe CSS:

  • ui-dialog : contenitore esterno dialogo.
    • ui-dialog-titlebar : finestra di dialogo contiene il titolo e il pulsante di chiusura della barra del titolo.
      • ui-dialog-title : testo del titolo Dialogo intorno al contenitore.
      • ui-dialog-titlebar-close : il pulsante per chiudere la finestra di dialogo.
    • ui-dialog-content : Finestra di contenuti intorno al contenitore. Questo è anche parte dell'elemento viene creata un'istanza.
    • ui-dialog-buttonpane : contiene pulsantiera di dialogo. Solo quando il set buttons quando le scelte sono presentati.
      • ui-dialog-buttonset : bottoni in tutto il contenitore.

Inoltre, quando impostare modal opzioni di tempo, con un ui-widget-overlay nome della classe elemento viene aggiunto al <body> .

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Una semplice finestra di dialogo UI jQuery (finestra di dialogo). 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> Componenti di dialogo (dialogo Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Button id = "opener"> finestra di dialogo Apri </ button>
<Div id = "finestra" title = "Dialog titolo"> Sono un dialogo </ div>
 
<Script>
$ ( "#dialog") .dialog ({AutoOpen: true});
$ ( "#opener") .Click (Function () {
  $ ( "#dialog") .dialog ( "Open");
});
</ Script>
 
</ Corpo>
</ Html>