Przykładem jQuery UI - Dialog (Dialog)
Otwórz zawartość interaktywną nakładki.
Więcej informacji na temat elementów dialogowych można znaleźć w dokumentacji API komponenty dialogowe (okno Widget) .
Domyślną funkcją
Podstawowym okno dialogowe jest umieszczony w strefie widokowej w warstwie wierzchniej, dzięki zawartości iframe i strona oddzielone (jak wybrać elementy). Składa się on z paska tytułowego i skład obszaru zawartości i może być przeniesiony, zmiana rozmiaru, domyślnie ikoną "X", aby zamknąć.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - Domyślna funkcja </ 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 = "Okno podstawowe">
<P> Jest to domyślne okno dialogowe do wyświetlania informacji. Okno dialogowe może zostać przeniesiony, zmiana rozmiaru, domyślnie ikoną "X", aby zamknąć. </ P>
</ Div>
</ Body>
</ Html>
ożywienie
Można określić efekty specjalne pokazać / ukryć właściwości animacji, aby wyświetlić okno dialogowe. Należy odnieść się do osobnego pliku do efektu, jaki chcesz używać efektów specjalnych.
<! DOCTYPE html>
<Html lang = "pl">
<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,
Pokaż: {
Efekt: "w ciemno",
Czas trwania: 1000
}
ukrywać: {
Efekt: "wybuchnąć"
Czas trwania: 1000
}
});
$ ( "#opener") .Kliknij (Function () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialog" title = "Okno Basic">
<P> To jest animowany wyświetlanie okna dialogowego do wyświetlania informacji. Okno dialogowe może zostać przeniesiony, zmiana rozmiaru, domyślnie ikoną "X", aby zamknąć. </ P>
</ Div>
<Button id = "opener"> Otwórz okno </ button>
</ Body>
</ Html>
tryb podstawowy
Reszta Modal dialog strony, aby uniemożliwić użytkownikom spoza okna dialogowego do interakcji, aż okno zostanie zamknięte.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - podstawowy modalne </ 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 ({
wysokość: 140,
modalne: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-modal" title = "podstawowe dialogi modalne">
<P> Add-modalne okno nakładki sprawiają, że wygląd dialogowe bardziej widoczne, ponieważ przyciemnia pozwól innych treści na stronie. </ 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 Lectus. </ p>
</ Body>
</ Html>
potwierdzenie Modal
Potwierdź destrukcyjne działanie może być również możliwe rozsądek. Ustawianie modal opcję true i buttons do przypisania pierwotne i wtórne opcje działań użytkownika.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - modalne potwierdzenia </ 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 potwierdzenia") .dialog ({
resizable: false,
wysokość: 140,
modalne: prawda,
przyciski: {
"Usuń wszystkie elementy": function () {
$ (This) .dialog ( "Zamknij");
}
Cancel: function () {
$ (This) .dialog ( "Zamknij");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-confirm" title = "Opróżnij kosz?">
<P> <span class = "icon-ui ui-icon-alert" style = "pływać: left; margin: 20px 0 0 7px;"> </ span> Te elementy zostaną trwale usunięte i nie mogą być odzyskane. Czy jesteś pewien? </ 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 Lectus. </ p>
</ Body>
</ Html>
Modal Formularz
modalne okno dialogowe poprosić użytkownika o wpisanie danych w wieloetapowym procesie. Osadzony w zawartości formularza obszar tagu ustawić modal opcję true i buttons do przypisania pierwotne i wtórne opcje działań użytkownika.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - Formularze modalne </ 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%;}
etykieta, wejście {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 # użytkowników, zawierają {width: 350px; margin: 20px 0;}
div # użytkowników, zawiera tabela {margin: 0; 1 em border-collapse: collapse; width: 100%;}
div # użytkowników, zawiera tabela td, th div # tabelę użytkowników, zawierają {border: 1px solid #eee; padding: 10px .6em; text-align: left;}
.ui-dialog .ui-state-error {padding: .3em;}
.validateTips {border: 1px solid przejrzyste; padding: 0.3em;}
</ Style>
<Script>
$ (Function () {
Nazwa var = $ ( "#name"),
email = $ ( "#email"),
password = $ ( "#password"),
allFields = $ ([]) .add (Nazwa) .add (email) .add (hasło),
wskazówki = $ ( ".validateTips");
updateTips funkcyjne (t) {
wskazówki
.text (t)
.addClass ( "ui-state-highlight");
setTimeout (function () {
tips.removeClass ( "ui-state-highlight", 1500);
}, 500);
}
Funkcja checkLength (O, N, min, max) {
if (o.val (). length> max || o.val (). length <min) {
o.addClass ( "ui-state-error");
updateTips ( "" + n + "musi być w pozycji" +
min + "pomiędzy". "i" + max +);
return false;
} Else {
return true;
}
}
Funkcja checkRegexp (o, regexp, n) {
if (! (regexp.test (o.val ()))) {
o.addClass ( "ui-state-error");
updateTips (n);
return false;
} Else {
return true;
}
}
$ ( "# Dialog-forma") .dialog ({
AutoOpen: false,
wysokość: 300,
szerokość: 350,
modalne: prawda,
przyciski: {
"Załóż konto": function () {
var bValid = true;
allFields.removeClass ( "ui-state-error");
bValid = bValid && checkLength (nazwa, "username", 3, 16);
bValid = bValid && checkLength (e-mail, "e-mail", 6, 80);
bValid = bValid && checkLength (hasło "password", 5, 16);
bValid = bValid && checkRegexp (nazwa, / ^ [AZ] ([0-9a-Z _]) + $ / i "nazwa użytkownika musi być AZ, 0-9, podkreślenia i musi zaczynać się od litery.");
// Od jquery.validate.js (o Joern), wnoszonych przez 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 ", np ui @ jquery.com ");
bValid = bValid && checkRegexp (hasło, / ^ ([0-9a-zA-Z]) + $ /, "pole hasła dozwolone tylko: az 0-9");
if (bValid) {
$ ( "#users Tbody") .append ( "<tr>" +
"<Td>" + name.val () + "</ td>" +
"<Td>" + email.val () + "</ td>" +
"<Td>" + password.val () + "</ td>" +
"</ Tr>");
$ (This) .dialog ( "Zamknij");
}
}
Cancel: function () {
$ (This) .dialog ( "Zamknij");
}
}
w pobliżu: function () {
allFields.val ( "") .removeClass ( "ui-state-error");
}
});
$ ( "# Tworzenie użytkownika")
.button ()
.Kliknij (function () {
$ ( "# Dialog-forma") .dialog ( "open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog-forma" title = "Utwórz nowe konto">
<P class = "validateTips"> wszystkie pola formularza są wymagane. </ P>
<Form>
<Fieldset>
<Label for = "name"> Nazwa </ label>
<Input type = "text" name = "nazwa" id = "name" class = "text-ui ui widget-content-corner-all">
<Label for = "email"> poczta </ label>
<Input type = "text" name = "email" id = wartość "e" = "" class = "text-ui ui widget-content-corner-all">
<Label for = "password"> Hasło </ label>
<Input type = "password" name = "password" id = wartość "hasło" = "" class = "text-ui ui widget-content-corner-all">
</ Fieldset>
</ Form>
</ Div>
<Div id = "użytkowników, zawierają" class = "UI-widżet">
<H1> istniejący użytkownik: </ h1>
<Table id = class "użytkownicy" = "UI-widżet UI-widget-content">
<THEAD>
<Class Tr = "ui-widget-header">
<Th> Nazwa </ th>
<Th> poczta </ th>
<Th> Hasło </ th>
</ Tr>
</ THEAD>
<Tbody>
<Tr>
<Td> John Doe </ td>
<Td> [email protected] </ td>
<Td> johndoe1 </ td>
</ Tr>
</ Tbody>
</ Table>
</ Div>
<Button id = "create-user"> Tworzenie nowego użytkownika </ button>
</ Body>
</ Html>
komunikat Modal
modalne okno dialogowe w celu potwierdzenia informacji i działań, zanim zostanie wykonana kolejna akcja. Ustawianie modal opcję true, oraz buttons , aby określić główne opcje działania (OK).
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - modalne komunikat </ 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-message") .dialog ({
modalne: prawda,
przyciski: {
Ok: function () {
$ (This) .dialog ( "Zamknij");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Okno-message" title = "Pobieranie zakończone">
<P>
<Span class = "icon-ui ui-icon-circle-check" style = "float: left; margin: 50px 0 0 7px;"> </ span>
Twój plik został pomyślnie pobrane do folderu.
</ P>
<P>
Obecne wykorzystanie przestrzeni magazynowej <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 Lectus. </ p>
</ Body>
</ Html>