jQuery UI Beispiel - Dialog (Dialog)
Offene Inhalte in einer interaktiven Overlay.
Weitere Informationen zu den Dialogkomponenten, die API - Dokumentation Dialogkomponenten (Dialog das Widget) .
Die Standardfunktion
Das grundlegende Dialogfenster wird in einer Beobachtungszone in der Deckschicht, durch einen iframe und Seiteninhalt getrennt (wie wählen Elemente) positioniert ist. Es besteht aus einer Titelleiste und einen Inhaltsbereich Zusammensetzung und kann bewegt werden, die Größe neu bestimmt, Standard von "x" -Symbol zu schließen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 = "Dialog" title = "basic Dialog">
<P> Dies ist das Standarddialogfeld zur Anzeige von Informationen. Dialogfenster bewegt werden kann, der Größe verändert, Standard von "x" -Symbol zu schließen. </ P>
</ Div>
</ Body>
</ Html>
Animation
Sie können eine spezielle Effekte für Ein- / Ausblenden der Animationseigenschaft um das Dialogfeld angezeigt werden soll. Sie müssen für den Effekt in eine separate Datei verweisen Sie Spezialeffekte verwenden möchten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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,
Show: {
Effekt: "blind",
Dauer: 1000
},
verstecken: {
Effekt: "explodieren",
Dauer: 1000
}
});
$ ( "#opener") .click (Function () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog" title = "Grund Dialog">
<P> Dies ist eine animierte Darstellung des Dialogfeld zur Anzeige von Informationen. Dialogfenster bewegt werden kann, der Größe verändert, Standard von "x" -Symbol zu schließen. </ P>
</ Div>
<Button id = "Opener"> Öffnen-Dialog </ button>
</ Body>
</ Html>
Basismodus
Modal Dialog Rest der Seite verhindern, dass Benutzer außerhalb des Dialogfelds zu interagieren, bis das Dialogfeld geschlossen wird.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - modale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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-modal") .dialog ({
Höhe: 140,
modal: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialog-modal" title = "modale Dialoge">
<P> Add-modalen Overlay-Bildschirm, machen den Dialog sieht mehr im Vordergrund, weil es andere Inhalte auf der Seite dimmt lassen. </ P>
</ Div>
<P> Sed vel diam 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 ein lectus. </ p>
</ Body>
</ Html>
Modal Bestätigung
Bestätigen Sie eine zerstörerische Wirkung auch möglich, sinnvoll sein kann. Einstellung modal Option auf true, und durch buttons primären und sekundären Benutzeraktionen Optionen zuweisen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - modal Bestätigung </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
resizable: false,
Höhe: 140,
modal: true,
Tasten: {
"Alle Elemente löschen": function () {
$ (This) .dialog ( "close");
},
Abbrechen: function () {
$ (This) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-confirm" title = "Papierkorb leeren?">
<P> <span class = "ui-ui-Symbol-Symbol-Alarm" style = "float: left; margin: 0 7px 20px 0;"> </ span> Diese Posten werden dauerhaft gelöscht werden und nicht wiederhergestellt werden können. Sind Sie sicher? </ P>
</ Div>
<P> Sed vel diam 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 ein lectus. </ p>
</ Body>
</ Html>
Modal Form
Modal Dialogfeld den Benutzer aufzufordern, Daten in einem mehrstufigen Prozess zu gelangen. Eingebettet in den Inhaltsbereich Form - Tag - Satz modal Option auf true, und durch buttons primären und sekundären Benutzeraktionen Optionen zuweisen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - Modal Forms </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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%;}
Etikett, 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 # Benutzer-enthalten {width: 350px; margin: 20px 0;}
div # Benutzer-Tabelle enthalten {margin: 1em 0; border-collapse: collapse; width: 100%;}
div # Tabelle td Benutzer-enthalten, div # Benutzer-Tabelle enthalten th {border: 1px solid #Eee; padding: .6em 10px; text-align: left;}
.ui-Dialog .ui-State-Fehler {padding: .3em;}
.validateTips {border: 1px solid transparent; padding: 0.3em;}
</ Style>
<Script>
$ (Function () {
var name = $ ( "# Name"),
E-Mail = $ ( "#email"),
password = $ ( "#password"),
allFields = $ ([]) .ADD (name) .add (E-Mail) .add (Passwort),
Tipps = $ ( ".validateTips");
Funktion updateTips (t) {
Tipps
.text (t)
.addClass ( "ui-state-Highlight");
setTimeout (function () {
tips.removeClass ( "ui-state-Highlight", 1500);
}, 500);
}
Funktion checkLength (o, n, min, max) {
if (o.val (). length> max || o.val (). Länge <min) {
o.addClass ( "ui-State-Fehler");
updateTips ( "" + n + "unter sein muss" +
min + "zwischen". "und" + max +);
return false;
} Else {
return true;
}
}
Funktion checkRegexp (o, regexp, n) {
if (! (regexp.test (o.val ()))) {
o.addClass ( "ui-State-Fehler");
updateTips (n);
return false;
} Else {
return true;
}
}
$ ( "# Dialog-Form") .dialog ({
AutoOpen-: false,
Höhe: 300,
Breite: 350,
modal: true,
Tasten: {
"Erstellen Sie ein Konto": function () {
var bValid = true;
allFields.removeClass ( "ui-State-Fehler");
bValid = bValid && checkLength (Name, "username", 3, 16);
bValid = bValid && checkLength (E-Mail, "E-Mail", 6, 80);
bValid = bValid && checkLength (Passwort "password", 5, 16);
bValid = bValid && checkRegexp (Name, / ^ [az] ([0-9a-z _]) + $ / i ", muss der Benutzername az, 0-9, unterstreicht, und muss mit einem Buchstaben beginnen.");
// Von jquery.validate.js (von joern), trugen durch 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 ", zB ui @ jquery.com ");
bValid = bValid && checkRegexp (Passwort, / ^ ([0-9a-zA-Z]) + $ / "nur Passwort-Feld erlaubt: az 0-9");
if (bValid) {
$ ( "#Nutzer TBODY") .append ( "<tr>" +
"<Td>" + name.val () + "</ td>" +
"<Td>" + email.val () + "</ td>" +
"<Td>" + password.val () + "</ td>" +
"</ Tr>");
$ (This) .dialog ( "close");
}
},
Abbrechen: function () {
$ (This) .dialog ( "close");
}
},
schließen: function () {
allFields.val ( "") .removeClass ( "ui-State-Fehler");
}
});
$ ( "# Create-user")
.Taste ()
.click (function () {
$ ( "# Dialog-Form") .dialog ( "open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-Form" title = "Neuen Benutzer erstellen">
<P class = "validateTips"> alle Formularfelder sind erforderlich. </ P>
<Form>
<Fieldset>
<Label for = "name"> name </ label>
<Input type = "text" name = "name" id = "name" class = "text ui-Widget-Inhalt ui-Ecke-all">
<Label for = "E-Mail"> Postfach </ label>
<Input type = "text" name = "email" id = "E-Mail" value = "" class = "text ui-Widget-Inhalt ui-Ecke-all">
<Label for = "password"> Passwort </ label>
<Input type = "password" name = "Passwort" id = "Passwort" value = "" class = "text ui-Widget-Inhalt ui-Ecke-all">
</ Fieldset>
</ Form>
</ Div>
<Div id = "Benutzer-enthalten" class = "ui-Widget">
<H1> vorhandenen Benutzer: </ h1>
<Table id = "Benutzer" class = "ui-ui-Widget-Widget-content">
<Thead>
<Tr class = "ui-Widget-header">
<Th> Name </ th>
<Th> Postfach </ th>
<Th> Passwort </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> John Doe </ td>
<Td> [email protected] </ td>
<Td> johndoe1 </ td>
</ Tr>
</ Tbody>
</ Table>
</ Div>
<Button id = "create-user"> Erstellen Sie einen neuen Benutzer </ button>
</ Body>
</ Html>
Modal Nachricht
Modalen Dialogfeld, um die Informationen und die Aktion zu bestätigen, bevor die nächste Aktion ausgeführt wird. Einstellung modal Option auf true, und durch buttons die wichtigsten Handlungsoptionen (Ok) angeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery UI-Dialog (Dialog) - modal Nachricht </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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-Meldung") .dialog ({
modal: true,
Tasten: {
Ok: function () {
$ (This) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-Meldung" title = "Download beendet">
<P>
<Span class = "ui-ui-Symbol-Symbol-Kreis-check" style = "float: left; margin: 0 7px 50px 0;"> </ span>
Ihre Datei wurde in den Ordner erfolgreich heruntergeladen.
</ P>
<P>
Die aktuelle Nutzung von Speicherplatz <b> 36% </ b>.
</ P>
</ Div>
<P> Sed vel diam 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 ein lectus. </ p>
</ Body>
</ Html>