Najlepszy samouczek Przykładem jQuery UI - Dialog (Dialog) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,ożywienie,tryb podstawowy,potwierdzenie Modal,Modal Formularz,komunikat Modal,
Otwórz zawartość interaktywną nakładki.
Więcej informacji na temat elementów dialogowych można znaleźć w dokumentacji API komponenty dialogowe (okno Widget) .
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>
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>
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=""> 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>
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=""> 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>
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> john.doe@example.com </ td> <Td> johndoe1 </ td> </ Tr> </ Tbody> </ Table> </ Div> <Button id = "create-user"> Tworzenie nowego użytkownika </ button> </ Body> </ Html>
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=""> 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>