Em vários processos de desenvolvimento da Web, o processamento de caixas de diálogo e caixas rápidas é uma tecnologia de processamento de interface muito comum. Se usado bem, pode oferecer aos usuários uma boa experiência de página. O mesmo vale para o desenvolvimento de bootstrap. Muitas vezes usamos camadas de caixa de diálogo pop-up para exibir dados em interfaces, como adicionar, editar e visualizar detalhes. Ao excluir, uma caixa de confirmação rápida pode ser usada. Se a operação for bem -sucedida, podemos usar uma caixa de prompt mais rica para lidar com isso. Este artigo compara principalmente esses pontos técnicos usados no desenvolvimento de bootstrap.
1. Uso da caixa de diálogo Bootstrap
O bootstrap regular possui vários tamanhos de caixas de diálogo, incluindo pequenas caixas de diálogo com estado padrão, caixas de diálogo de largura média e caixas de diálogo de tamanho completo. A interface da caixa de diálogo do bootstrap é muito amigável. Quando usamos a tecla ESC ou clicamos em outros espaços em branco com o mouse, a caixa de diálogo ficará automaticamente oculta.
Suas definições são apenas diferentes, como o seguinte é o código de diálogo pequeno padrão da interface:
<! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle = "validator" ENCTYPE = "Multipart/form-Data"> <div> <div> <div> <div> <div> <belt> ID do pai </elatel> <div> <select id = "pid" name = "PID" type = "text" Text = "Pai ids ..."> </select> </</</" <input id = "name" name = "name" type = "text" placeholder = "name ..."/> </div> </div> </div> <div> <div> <belty> observações </label <input type = "hidden" id = "id" name = "id"/> <button type = "submit"> confirm </button> <botão tipo = "button" data-dismiss = "modal"> cancel </button> </div> </mand> </div> </div> </div> </div>
A interface aproximada é a seguinte:
Preste atenção ao código do estilo de diálogo no código acima, como segue:
<div>
Se for um banco de dados dos outros dois tamanhos, você só precisa modificá -lo aqui. Os dois códigos mostrados abaixo são:
<div>
assim como
<div>
Podemos decidir qual tamanho da definição da camada de diálogo adotar com base no layout dos elementos da interface, mas os métodos de chamada dessas caixas de diálogo são consistentes.
A interface da caixa de diálogo é a seguinte:
// show pode selecionar o cliente $ ("#btnSelectCustomer"). Show ();A interface da caixa de diálogo de fechamento é a seguinte:
$ ("#add"). modal ("hide");De um modo geral, a caixa de diálogo que aparece é um formulário que pode executar operações de envio semelhantes a salvar dados. Portanto, é necessário verificar os dados do formulário. Se houver um erro, talvez seja necessário lembrá -lo na interface. Portanto, quando a página é inicializada, as regras de verificação do formulário precisam ser inicializadas. Abaixo estão nossas operações regulares de inicialização de formulários.
// vinte a função de evento relacionado bindEvent () {// julga se as informações do formulário passam a verificação $ ("#ffadd"). }, Sucesso: function (etiqueta) {Label.closest ('. }, submithandler: function (form) {$ ("#add"). modal ("hide"); Processamento de retrato $ ('#FILE-PORTRAIT'). FileInput ('Upload'); Entre em contato com o administrador para lidar com isso. ");});}}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Mas geralmente esses códigos serão repetidos muito, para que possamos encapsular funções e reutilizar algum código para usar um código de processamento mais simples, mas também podemos atingir a meta.
// Bind Eventos Relacionados Função bindEvent () {// Adicionar e editar registros formalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // envia parâmetros de construção para o cenário var () {"#ffadd). $ .parsejson (json); para lidar com isso. ");});}); }); }2. Exclua o processamento da caixa de diálogo de confirmação
1) Uso do plug-in de inicialização
Além da caixa de diálogo regular acima, geralmente encontramos uma caixa de diálogo de confirmação concisa. Embora o código acima também possa ser usado para criar uma caixa de diálogo de confirmação, não é necessário ser tão problemático em geral. Você pode usar a caixa de diálogo de confirmação da caixa de inicialização do plug-in para lidar com isso.
O BootBox.js é uma pequena biblioteca JavaScript que ajuda você a criar rapidamente uma caixa de diálogo ao usar a estrutura de bootstrap e também pode ajudá -lo a criar, gerenciar ou excluir todos os elementos DOM ou manipuladores de eventos JS necessários.
O BootBox.js usa três métodos para projetar imitar seu JavaScript nativo Alguns métodos. Sua assinatura exata do método é flexível para cada um deles pegando vários parâmetros para personalizar o rótulo e especificar os valores padrão, mas são frequentemente chamados de mesma coisa:
bootbox.alert (mensagem, retorno de chamada)
bootbox.prompt (mensagem, retorno de chamada)
bootbox.confirm (mensagem, retorno de chamada)
Os únicos parâmetros necessários estão alertas é a mensagem; O retorno de chamada é necessário para confirmar e solicitar chamadas para determinar a resposta do usuário. Mesmo ao ligar, o retorno de chamada de alarme é determinado quando o usuário rejeita a caixa de diálogo porque nosso método de embalagem não pode bloquear como seu idioma nativo é útil: eles são assíncronos e não síncronos.
Esses três métodos chamam um quarto de um método público, que você também pode criar usando sua própria caixa de diálogo personalizada:
bootbox.dialog (opções)
Para mais documentação da API Ajuda, consulte: http://bootboxjs.com/documentation.html
Alerta
bootbox.alert ("Hello World!", function () {exemplo.show ("Hello World Callback");});Confirmar
bootbox.confirm ("Você tem certeza?", function (resultado) {exemplo.show ("Confirmar resultado:"+resultado);});Ou código:
bootbox.confirm ("Tem certeza de que exclui o registro selecionado?", function (resultado) {if (resultado) {// finalmente remova a última vírgula, ids = ids.substring (0, ids.length - 1); // envia as informações de solicitação assíncrona para excluir os dados. PostData, função (JSON) {VAR Data = $ .Parsejson (JSON); }});Incitar
bootbox.prompt ("Qual é o seu nome?", function (resultado) {if (resultado === null) {Explet.show ("prompt demitido");} else {exemplo.show ("hi <b>"+resultado+"</b>");});Diálogo personalizado
O efeito de usar o código e a interface é o seguinte:
bootbox.dialog (…)
[2)
2) Uso de plug-in sweetalert
Embora o efeito acima seja muito consistente com o estilo de bootstrap, a interface é um pouco monótona. O efeito acima não é o que eu gosto muito, encontrei um efeito que parece mais bonito, como mostrado abaixo.
Este efeito é implementado pela introdução do plugin Sweetalert (http://t4t5.github.io/sweetalert/).
Swal ({Title: "Operação Prompt", Text: NewTips, Tipo: "Aviso", ShowCancelButton: True, ConfirmButtonColor: "#dd6b55", cancelButtonText: "Cancel), confirmbuttonText:" Sim, Execute Delte! ", CloseOnConfirm:"O código de implementação com efeitos semelhantes de interface acima é o seguinte:
Geralmente, seu código pop-up pode ser muito simples, como mostrado abaixo.
3. Processamento da caixa Prompt de informação
O processamento acima é implementado usando caixas de diálogo pop-up e bloqueia a interface. Geralmente, fazemos instruções de informação, esperando que não afetem nossas operações adicionais ou, pelo menos, forneçam um efeito de desaparecimento automático muito curto.
Então, aqui vamos introduzir o plug-in e o plug-in do JNOTIFY.
1) Uso da caixa de prompt jnotify
Jnotify Prompt Box, um excelente plug -in de caixa de pront de resultados do JQuery. Depois de enviar o formulário, respondemos ao plano de fundo através do Ajax e retornamos os resultados e exibimos as informações de retorno em primeiro plano. O JNOTIFY pode exibir as informações do resultado da operação com muita elegância. O JNOTIFY é um plug-in de prompt de informações baseado em jQuery, que suporta três métodos de prompt de informações: sucesso da operação, falha da operação e lembrete de operação. O JNOTify Browser possui uma compatibilidade muito boa, suporta a alteração do conteúdo rápido, suporta o posicionamento da localização das caixas rápidas e pode configurar parâmetros de plug-in.
jsuccess (mensagem, {option}); jerror ("A operação falhou, tente novamente !!"); jnotify ("Nota: melhore sua <strong> informações pessoais! </strong>");Configuração detalhada dos parâmetros jNotify:
Autohide: True, // Se deve ocultar automaticamente a barra de barra de cliques: falsa, // se deve clicar na camada de máscara para fechar a fase de barra imediata: 200, // Largura mínima Times: 1500, // Exibir tempo: MillisEconds ShowtimeEffect: 200, // TEMPO A PÁGINA: MILHONSENCONSENSENSENSENSEFENHETS: 200, Página de tempo / / MillisEarts: MillishiSeftime: 200: 200, MillisEliStime: MillishiSeftime: 200, 2000: 15, // deslocamento quando a barra prompt é exibida e oculta HorizontalPosition: "Direita", // Posição horizontal: esquerda, centro, RightVericalPosition: "Bottom", // Posição vertical: top, central, parte inferior da máscara de máscara: "000 000", // define a cor de uma folha de máscara: a máscara de layer: "#000", // define a coroa, //, se a máscara da máscara: "" 000 ", // define a colina. Camada de máscara ONCLOSED: FN // Após o fechamento da caixa Prompt, execute a função, você pode ligar para outro jnotify novamente. Como mencionado acima, as três chamadas são chamadas em sequência.
Abaixo está o método público que encapsulou na classe de script para obter a exibição de efeitos rápidos.
// Mostrar erro ou mensagem imediata (requer o arquivo relacionado ao jNotify) SHOWSROR (TIPS, TIMES ONDO, Autohide) {Jerror (pontas, {AutoHide: AutoHide || True, // Adicionado em V2.0 TimesHown: TimesHown || 1500, HorizontalPosition: 'Centre', verticalPosition: oCompleted: function () {// adicionado em v2.0 // alert ('jnofity está concluído!'); 'Center', VerticalPosition: 'Top', showoverlay: true, coloroverlay: '#000', oncompleto: function () {// adicionado em v2.0 // alert ('jnofity está concluído!');Dessa forma, quando usamos o método de postagem do Ajax, podemos solicitar de acordo com diferentes necessidades.
var postData = $ ("#ffadd"). Serializearray (); $ .post (url, pós-dados, função (json) {var data = $ .parsejson (json); if (data.success) {// adicione o processamento de upload de retrato $ ('#file-portrait'). {SHOWRROR ("Salvar falhou:" + data.errorMessage, 3000);2) Uso de plug-in do Toastr
O Toastr é uma biblioteca JavaScript para criar lembretes de mensagens de página sem bloqueio de Gnome/Growl, que não bloqueiam. , o TOASTR pode definir quatro modos de notificação: sucesso, erro, aviso e prompt. A localização da janela imediata e os efeitos da animação pode ser definida pelo número de energia. No site oficial, você pode selecionar parâmetros para gerar JS, o que é muito conveniente de usar.
O endereço do plug -in é: http://codeseven.github.io/toastr/
Ele pode criar os seguintes efeitos: aviso, perigo, sucesso, informações de diálogo imediatos, o efeito é o seguinte.
Seu código JS de uso é mostrado abaixo.
// Mostro um aviso, sem título Toastr.warning ('Meu nome é inigo Montoya. Você matou meu pai, prepare -se para morrer!') // Mostra um sucesso, o título Toastr.success ('Divirta -se com o castelo! toastr.clear ()A definição de parâmetro deste plug-in é a seguinte.
//Setting parameters, if the default value is used, the following generation of toastr.options = { "closeButton": false, //Whether to display the close button "debug": false, //Whether to use debug mode "positionClass": "toast-top-full-width", //The position of the pop-up window "showDuration": "300", //The animation time displayed "hideDuration": "1000", //The animation time disappearing "timeOut": "5000", //The display time "extendedTimeOut": "1000", //Extended display time "showEasing": "swing", //The animation buffering method during display "hideEasing": "linear", //Animation buffering method when disappearing "showMethod": "fadeIn", //Animation method when displaying "hideMethod": "fadeOut" // Método de animação ao desaparecer}; // SUCESSO DE SUCCESSO PARA VINGAR $ ("#SUCCESSO"). Clique (function () {Toastr.Success ("Parabéns pelo seu sucesso");})O exposto acima é o meu resumo da minha experiência em processamento e otimização de caixas de diálogo e caixas rápidas no projeto. Espero que seja útil que todos aprendam e melhorem a interface da web. Se você quiser saber mais informações, preste atenção ao site wulin.com!