exemplo jQuery UI - Dialog (Diálogo)
conteúdo aberto em uma sobreposição interativa.
Para mais detalhes sobre os componentes de diálogo, consulte a documentação da API componentes de diálogo (Dialog o Widget) .
A função padrão
A janela de diálogo básica está posicionado em uma zona de observação na camada de cobertura, através de um conteúdo iframe ea página separada (como selecionar elementos). Ele consiste de uma barra de título e uma composição de área de conteúdo, e pode ser movido, redimensionado, padrão ícone 'x' por ser fechado.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (Dialog) - A função padrão </ 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 = "diálogo" title = "diálogo básica">
<P> Esta é a caixa de diálogo padrão para exibição de informações. janela de diálogo pode ser movido, redimensionado, padrão ícone 'x' por ser fechado. </ P>
</ Div>
</ Body>
</ Html>
animação
Você pode especificar um de efeitos especiais exibir / ocultar a propriedade de animação para exibir a caixa de diálogo. Você deve se referir a um arquivo separado para o efeito que você deseja usar efeitos especiais.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (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: {
efeito: "cego",
duração: 1000
},
esconder: {
efeito: "explodir",
duração: 1000
}
});
$ ( "#opener") .click (Function () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "diálogo" title = "diálogo Basic">
<P> Esta é uma animação da caixa de diálogo, para exibir informações. janela de diálogo pode ser movido, redimensionado, padrão ícone 'x' por ser fechado. </ P>
</ Div>
<Button id = "abridor"> diálogo Abrir </ button>
</ Body>
</ Html>
O modo básico
Modal resto de diálogo da página para impedir que os usuários fora da caixa de diálogo para interagir até que a caixa de diálogo é fechada.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (Dialog) - modal básico </ 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 ({
height: 140,
modal: true
});
});
</ Script>
</ Head>
<Body>
<Div id = título "diálogo-modal" = "caixas de diálogo básicas modais">
<P> Adicionar-modal tela de sobreposição, faça o olhar de diálogo mais proeminente porque escurece deixe outro conteúdo na página. </ 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 um lectus. </ p>
</ Body>
</ Html>
confirmação modal
Confirmar uma ação destrutiva também pode ser possível sentido. Configuração modal opção de verdade, e por buttons para atribuir opções de ações do usuário primário e secundário.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (Dialog) - confirmação modal </ 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 () {
$ ( "Diálogo-confirm #") .dialog ({
redimensionável: false,
height: 140,
modal: true,
botões: {
"Apagar todos os itens": function () {
$ (Este) .dialog ( "close");
},
Cancelar: function () {
$ (Este) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "caixa de diálogo de confirmação" title = "Esvaziar o lixo?">
<P> <span class = "ui-ui-icon-ícone de alerta" style = "float: left; margin: 0 7px 20px 0;"> </ span> Estes itens serão excluídos permanentemente e não pode ser recuperado. Tem certeza? </ 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 um lectus. </ p>
</ Body>
</ Html>
modal Form
caixa de diálogo modal para solicitar que o usuário insira dados em um processo de várias etapas. Embutidos no conteúdo tag form área definida modal opção de verdade, e por buttons para atribuir opções de ações do usuário primário e secundário.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (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%;}
etiqueta, de entrada {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 # usuários-conter {width: 350px; margin: 20px 0;}
div # usuários-conter a tabela {margin: 1em 0; border-collapse: colapso; width: 100%;}
div # usuários-conter td mesa, div # usuários-conter a tabela th {border: 1px solid #eee; padding: 10px .6em; text-align: left;}
.ui-de diálogo .ui-estado-de erro {padding: .3em;}
.validateTips {border: 1px solid transparente; padding: 0.3em;}
</ Style>
<Script>
$ (Function () {
var name = $ ( "# nome"),
email = $ ( "#email"),
password = $ ( "#password"),
allFields = $ ([]) .add (nome) .Add (e-mail) .Add (password),
dicas = $ ( ".validateTips");
updateTips função (t) {
dicas
.text (t)
.addClass ( "ui-state-destaque");
setTimeout (function () {
tips.removeClass ( "ui-state-destaque", 1500);
}, 500);
}
função checkLength (o, n, min, max) {
if (o.val (). length> max || o.val (). length <min) {
o.addClass ( "ui-state-erro");
updateTips ( "" + n + "deve estar sob" +
min + "entre". "e" + max +);
return false;
} Else {
return true;
}
}
função checkRegexp (o, regexp, n) {
if (! (regexp.test (o.val ()))) {
o.addClass ( "ui-state-erro");
updateTips (n);
return false;
} Else {
return true;
}
}
$ ( "Dialog-forma #") .dialog ({
AutoOpen: false,
height: 300,
width: 350,
modal: true,
botões: {
"Criar uma conta": function () {
var bValid = true;
allFields.removeClass ( "ui-state-erro");
bValid = bValid && checkLength (nome, "username", 3, 16);
bValid = bValid && checkLength (e-mail, "e-mail", 6, 80);
bValid = bValid && checkLength (senha, "password", 5, 16);
bValid = bValid && checkRegexp (nome, / ^ [az] ([0-9a-z _]) + $ / i ", o nome de usuário deve ser az, 0-9, sublinhados e deve começar com uma letra.");
// De jquery.validate.js (por Joern), contribuíram por Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (email, / ^ ((([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 ", por exemplo, ui @ jquery.com ");
bValid = bValid && checkRegexp (password, / ^ ([0-9a-zA-Z]) + $ / ", campo de senha só é permitido: az 0-9");
Se (bValid) {
$ ( "#users Tbody") .append ( "<tr>" +
"<Td>" + name.val () + "</ td>" +
"<Td>" + email.val () + "</ td>" +
"<Td>" + password.val () + "</ td>" +
"</ Tr>");
$ (Este) .dialog ( "close");
}
},
Cancelar: function () {
$ (Este) .dialog ( "close");
}
},
close: function () {
allFields.val ( "") .removeClass ( "ui-state-erro");
}
});
$ ( "# Cria-user")
.button ()
.click (function () {
$ ( "# Dialog-forma") .dialog ( "open");
});
});
</ Script>
</ Head>
<Body>
<Div id = "-forma de diálogo" title = "Criar Novo Usuário">
<P class = "validateTips"> todos os campos do formulário são obrigatórios. </ P>
<Form>
<Fieldset>
<Label for = "name"> nome </ label>
<Input type = "text" name = "nome" id = "nome" class = "text-ui-widget conteúdo ui-canto-all">
<Label for = "email"> caixa de correio </ label>
<Input type = "text" name = "email" id = valor "email" = "" class = "text-ui-widget conteúdo ui-canto-all">
<Label for = "senha"> Senha </ label>
<Input type = "password" name = "password" id = valor "password" = "" class = "text-ui-widget conteúdo ui-canto-all">
</ Fieldset>
</ Form>
</ Div>
<Div id = "usuários-contém" class = "ui-widget">
<H1> usuário existente: </ h1>
<Table id = "usuários" class = "ui ui-widget-widget-content">
<Thead>
<Class = Tr "ui-widget-header">
<Th> Nome </ th>
<Th> caixa de correio </ 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 = "criar-usuário"> Criar um novo usuário </ button>
</ Body>
</ Html>
mensagem modal
caixa de diálogo modal para confirmar a informação e ação antes da próxima ação é executada. Configuração modal opção de verdade, e por buttons para especificar as principais opções de ação (OK).
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI diálogo (Dialog) - mensagem modal </ 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-mensagem #") .dialog ({
modal: true,
botões: {
Ok: function () {
$ (Este) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = título de "caixa de diálogo de mensagem" = "download completo">
<P>
<Span class = "ui ui-icon-icon-círculo-check" style = "float: left; margin: 0 7px 50px 0;"> </ span>
Seu arquivo foi baixado com êxito para a pasta.
</ P>
<P>
O uso atual de espaço de armazenamento <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 um lectus. </ p>
</ Body>
</ Html>