jQuery UI esempio - Dialog (Dialogo)
Aprire il contenuto in un overlay interattivo.
Per maggiori dettagli sui componenti di dialogo, consultare la documentazione API di dialogo componenti (la finestra di dialogo Widget) .
La funzione di default
La finestra di dialogo di base è posizionato in una zona trasparente dello strato di copertura, attraverso un contenuto iframe e pagina separati (come selezionare gli elementi). Si compone di una barra del titolo e una composizione area di contenuto, e può essere spostata, ridimensionata, di default icona 'x' per chiudere.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ();
});
</ Script>
</ Head>
<Body>
<Div id = "finestra" title = "finestra di dialogo di base">
<P> Questa è la finestra di dialogo predefinita per la visualizzazione di informazioni. finestra di dialogo può essere spostata, ridimensionata, di default icona 'x' per chiudere. </ P>
</ Div>
</ Corpo>
</ Html>
animazione
È possibile specificare una effetti speciali mostrare / nascondere la proprietà di animazione per visualizzare la finestra di dialogo. È necessario fare riferimento a un file separato per l'effetto che si desidera utilizzare gli effetti speciali.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ({
AutoOpen: false,
Mostra: {
Effetto: "alla cieca",
Durata: 1000
},
nascondere: {
Effetto: "esplodere",
Durata: 1000
}
});
$ ( "#opener") .Click (Function () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "finestra" title = "finestra di dialogo di base">
<P> Si tratta di un display animato della finestra di dialogo, per la visualizzazione di informazioni. finestra di dialogo può essere spostata, ridimensionata, di default icona 'x' per chiudere. </ P>
</ Div>
<Button id = "opener"> finestra di dialogo Apri </ button>
</ Corpo>
</ Html>
modalità di base
dialogo modale resto della pagina per evitare che gli utenti al di fuori della finestra di dialogo di interagire fino a quando la finestra di dialogo viene chiusa.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - modale di base </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Dialog-modali") .dialog ({
altezza: 140,
modal: true
});
});
</ Script>
</ Head>
<Body>
<Div id = titolo "dialogo modale" = "finestre di dialogo modali di base">
<P> Add-modale schermo di sovrapposizione, rendere il look dialogo più prominente perché offusca lasciare gli altri contenuti della pagina. </ P>
</ Div>
<P> sed diam vel id libero <a href="http://www.w3cschool.cc"> rutrum Convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor Elit eros un lectus. </ p>
</ Corpo>
</ Html>
conferma modale
Confermare una azione distruttiva può anche essere possibile senso. Impostazione modal opzione per vero, e buttons per assegnare le opzioni azioni dell'utente primarie e secondarie.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - conferma modale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Dialog-confirm #") .dialog ({
ridimensionabile: false,
altezza: 140,
modal: true,
pulsanti: {
"Eliminare tutti gli elementi": function () {
$ (This) .dialog ( "close");
},
Annulla: function () {
$ (This) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "finestra-conferma" title = "Svuota cestino?">
<P> <span class = "ui ui-icon-icon-alert" style = "float: left; margin: 0 7px 20px 0;"> </ span> Questi elementi saranno eliminati in modo permanente e non possono essere recuperati. Sei sicuro? </ P>
</ Div>
<P> sed diam vel id libero <a href="http://www.w3cschool.cc"> rutrum Convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor Elit eros un lectus. </ p>
</ Corpo>
</ Html>
form modale
finestra di dialogo modale per richiedere all'utente di inserire i dati in un processo multi-step. Incorporato nel contenuto tag form zona impostare modal opzione per vero, e buttons per assegnare le opzioni azioni dell'utente primarie e secondarie.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - Forme modali </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {font-size: 62,5%;}
label, input {display: block;}
input.text {margin-bottom: 12px; width: 95%; padding: .4em;}
fieldset {padding: 0; border: 0; margin-top: 25px;}
h1 {font-size: 1.2em; margin: .6em 0;}
div # utenti-contengono {width: 350px; margin: 20px 0;}
div # utenti-contengono table {margin: 1em 0; border-collapse: crollo; width: 100%;}
div # utenti-contengono tavolo td, div # tavolo th utenti-contengono {border: 1px solid #eee; padding: 10px .6em; text-align: left;}
.ui-finestra .ui-stato-error {padding: .3em;}
.validateTips {border: 1px solid trasparente; padding: 0.3em;}
</ Style>
<Script>
$ (Function () {
Nome var = $ ( "# nome"),
email = $ ( "#email"),
password = $ ( "#Password"),
allFields = $ ([]) .Add (nome) .add (e-mail) .add (password),
punte = $ ( ".validateTips");
updateTips funzione (t) {
suggerimenti
.text (t)
.addClass ( "ui-stato-evidenziare");
setTimeout (function () {
tips.removeClass ( "ui-stato-highlight", 1500);
}, 500);
}
Funzione checkLength (O, N, min, max) {
if (o.val (). length> max || o.val (). length <min) {
o.addClass ( "ui-stato-error");
updateTips ( "" + n + "deve essere sotto" +
min + "tra". "e" + max +);
return false;
} Else {
return true;
}
}
Funzione checkRegexp (o, regexp, n) {
if (! (regexp.test (o.val ()))) {
o.addClass ( "ui-stato-error");
updateTips (n);
return false;
} Else {
return true;
}
}
$ ( "Dialog-forma #") .dialog ({
AutoOpen: false,
altezza: 300,
Larghezza: 350,
modal: true,
pulsanti: {
"Crea un account": function () {
var bValid = true;
allFields.removeClass ( "ui-stato-error");
bValid = bValid && checkLength (nome, "username", 3, 16);
bValid = bValid && checkLength (e-mail, "email", 6, 80);
bValid = bValid && checkLength (password, "password", 5, 16);
bValid = bValid && checkRegexp (nome, / ^ [az] ([0-9a-z _]) + $ / i ", il nome utente deve essere az, 0-9, sottolinea, e deve iniziare con una lettera.");
// Da jquery.validate.js (da Joern), hanno contribuito da Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (e-mail, / ^ ((([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} !? ~] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0d \ x0a)) (\ x20 |? \ X09) +) (([\ x01- \ x08 \ x0b \ x0c \ x0e- \ x1f \ x7F] |? \ x21 | [\ x23- \ X5b] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7F] | [\ u00A0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0d \ x0a)) (\ x20 | \ X09) +) (\ x22? ))) @ ((([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ d | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i ", ad esempio, ui @ jquery.com ");
bValid = bValid && checkRegexp (password, / ^ ([0-9a-zA-Z]) + $ /, "campo password ammessi solo: az 0-9");
if (bValid) {
$ ( "#Gli Utenti tbody") .Append ( "<tr>" +
"<Td>" + name.val () + "</ td>" +
"<Td>" + email.val () + "</ td>" +
"<Td>" + password.val () + "</ td>" +
"</ Tr>");
$ (This) .dialog ( "close");
}
},
Annulla: function () {
$ (This) .dialog ( "close");
}
},
In prossimità: function () {
allFields.val ( "") .removeClass ( "ui-stato-error");
}
});
$ ( "# Create-utente")
apri un ()
.Click (function () {
$ ( "# Dialog-forma") .dialog ( "aperto");
});
});
</ Script>
</ Head>
<Body>
<Div id = titolo di "dialogo-forma" = "Crea nuovo utente">
<P class = "validateTips"> tutti i campi del modulo sono obbligatori. </ P>
<Form>
<Fieldset>
<Label for = "nome"> nome </ label>
<Input type = "text" name = "nome" id = "nome" class = "text-ui-widget di contenuti ui-angolo-all">
<Label for = "email"> casella di posta </ label>
<Input type = "text" name = "e-mail" id = valore "e-mail" = "" class = "text-ui-widget di contenuti ui-angolo-all">
<Label for = "password"> password </ label>
<Input type = "password" name = "password" id = valore "password" = "" class = "text-ui-widget di contenuti ui-angolo-all">
</ Fieldset>
</ Form>
</ Div>
<Div id = "utenti-contengono" class = "ui-widget di">
<H1> utente esistente: </ h1>
<Table id = "utenti" class = "ui-ui-widget di widget di-content">
<Thead>
<Class = Tr "ui-widget di-header">
<Th> Nome </ th>
<Th> casella e-mail </ th>
<Th> Password </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> John Doe </ td>
<Td> [email protected] </ td>
<Td> johndoe1 </ td>
</ Tr>
</ Tbody>
</ Table>
</ Div>
<Button id = "creare-utente"> Crea un nuovo utente </ button>
</ Corpo>
</ Html>
messaggio modale
finestra di dialogo modale per confermare l'informazione e l'azione prima che venga eseguita l'azione successiva. Impostazione modal opzione per vero, e buttons per specificare le principali opzioni di azione (OK).
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Dialog (Dialogo) - messaggio modale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Dialog-messaggio #") .dialog ({
modal: true,
pulsanti: {
Ok: function () {
$ (This) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = titolo di "dialogo-message" = "scarica completa">
<P>
<Span class = "ui ui-icon-icon-cerchio-check" style = "float: left; margin: 0 7px 50px 0;"> </ span>
Il file è stato scaricato con successo alla cartella.
</ P>
<P>
L'uso corrente di spazio di archiviazione <b> 36% </ b>.
</ P>
</ Div>
<P> sed diam vel id libero <a href="http://www.w3cschool.cc"> rutrum Convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor Elit eros un lectus. </ p>
</ Corpo>
</ Html>