JavaScript implementează 3 metode care vă permit să afișați utilizatorului casete de dialog: alertează, confirmă, solicită.

Caracteristici ale metodelor de alertă, confirmare, prompt: Locul specific în care este afișată fereastra modală– de obicei acesta este centrul browserului și aspect ferestrele sunt selectate de browser. Dezvoltatorul nu poate influența acest lucru. Nu puteți afișa o fereastră în propriul design, mai ales frumos. Dar acesta este cel mai simplu mod de a afișa un mesaj sau de a obține informații de la un vizitator. Prin urmare, ele sunt folosite în cazurile în care simplitatea este importantă și tot felul de „lucruri frumoase” nu joacă un rol special.

Scurt rezumat:

alertă - afișează un mesaj.

prompt - afișează un mesaj și așteaptă ca utilizatorul să introducă text, apoi returnează valoarea introdusă sau nulă dacă introducerea este anulată (CANCEL/Esc).

confirmare - afișează un mesaj și așteaptă ca utilizatorul să apese „OK” sau „CANCEL” și returnează adevărat/fals.

Metoda de alertă este utilizată pentru a afișa o casetă de dialog simplă care conține textul mesajului și un singur buton „Ok”. Formatul pentru apelarea acestei funcții este:

Alerta ("Textul mesajului");

Funcția de confirmare permite utilizatorului să afișeze o casetă de dialog care conține textul mesajului și butoanele „Ok” și „Anulare”. Folosit în cazurile în care utilizatorul trebuie să facă o alegere. Formatul pentru apelarea acestei funcții este:

Var rezultat=confirm("Text întrebare"); //construcție condiționată pentru verificarea rezultatului if(rezult) ( /* acțiuni */ ) else ( /* acțiuni */ )

Funcția de confirmare returnează o valoare booleană în funcție de butonul apăsat de utilizator: „Ok” corespunde valorii true, „Cancel” corespunde valorii false. De regulă, rezultatul funcției este atribuit unei variabile pentru o analiză ulterioară, așa cum se arată în exemplul de mai sus.

Funcția prompt vă permite să afișați o casetă de dialog care cere utilizatorului să introducă date. Folosit în cazurile în care utilizatorul trebuie să introducă o linie de text. Formatul pentru apelarea acestei funcții este:

Var str=prompt("Solicitați introducerea datelor", default_value);

Este important să rețineți că funcția prompt returnează rezultatul tip șir. Prin urmare, înainte de a-l folosi în expresii aritmetice, este necesar să se efectueze o conversie de tip în numeric. Acest lucru se poate face folosind următoarele funcții:

ParseInt("șir") - convertește un șir într-un număr întreg; parseFloat("șir") - convertește un șir într-un număr în virgulă mobilă.

Cu toate acestea, conversia unui șir într-un număr nu este posibilă în toate cazurile. Prin urmare, pentru a vă salva de o potențială eroare, trebuie mai întâi să verificați dacă o astfel de conversie poate fi efectuată. În aceste scopuri, este utilizată funcția isNaN(șir). Această funcție returnează true dacă șirul nu poate fi convertit într-un număr și false dacă altfel.

Prin urmare, dacă luați codul dat la începutul articolului și pur și simplu înlocuiți apelul confirm() cu ls.modal.confirm() și codul va trebui rescris cam așa: Șterge totul!$(function())( $("js-delete-all").click(ls.modal.confirm("Ești sigur?", function()( location.href="site.com/delete/all/ "; )););));

Toate aceste trei metode aparțin obiectului fereastră (Fereastra browserului). Și pot fi numite astfel: window.method_name(); Dar JavaScript ne permite să nu specificăm acest obiect fereastră, ci să scriem pur și simplu numele metodei.

Vom începe cu metoda alert(). Această metodă, iesiri mesajul specificatîn fereastra browserului utilizatorului. Această fereastră va apărea în partea de sus a întregii pagini, iar până când utilizatorul face clic pe butonul OK, nu se va închide.

Pentru a demonstra, să afișăm un mesaj folosind metoda alert().

Var today_is = "luni"; alert("Astăzi" + azi_este);

În interiorul metodei putem specifica orice șir, dar fără etichetă html ov. Acestea nu sunt procesate aici, ci sunt afișate așa cum sunt.

Dacă șirul pe care vrem să-l specificăm este foarte lung și vrem să sărim linie nouă, atunci aici este eticheta html
nu va funcționa. Aici trebuie să utilizați caracterul „\n”.

Alerta ("Loooooooooong \nStringgggggg");

Această metodă este adesea folosită pentru a găsi erori în cod.

Procesul de procesare a codului merge de sus în jos, așa că pentru a detecta o eroare, pur și simplu scriem metoda alert() în zona așteptată în care se află eroarea. Și dacă alert() a funcționat, atunci nu există erori până la linia în care este scris.

Apoi, trebuie să-l mutați cu o linie sau mai jos. Salvăm modificările, reîmprospătăm pagina în browser și vedem dacă alerta() a funcționat, atunci nu există erori până la linia în care se află, altfel, dacă nu a funcționat, eroarea este localizată în linie deasupra liniei unde se află în prezent . Acesta este modul în care puteți găsi o eroare în cod.

Această metodă este folosită pentru a confirma răspunsul la o întrebare. Există doar două opțiuni de răspuns, da (OK) sau nu (Anulare). Dacă utilizatorul răspunde da, atunci metoda returnează true, în caz contrar returnează false.

De exemplu, vom afișa o fereastră folosind metoda confirm(), unde vom întreba utilizatorul „Sunteți sigur că doriți să părăsiți pagina?” Dacă utilizatorul răspunde da, atunci prin metoda alert() vom afișa următorul mesaj „Utilizatorul dorește să părăsească pagina”, în caz contrar vom afișa un alt mesaj „Utilizatorul NU dorește să părăsească pagina”.

Var user_answer = confirm("Sunteți sigur că doriți să părăsiți pagina?"); if(user_answer) alert("Utilizatorul dorește să părăsească pagina"); else alert("Utilizatorul NU dorește să \npărăsească pagina");

Acesta este modul în care funcționează metoda confirm(). Poate fi folosit în cazuri diferite. De exemplu, înainte de a elimina ceva de pe un site, se obișnuiește să întrebați utilizatorul dacă are încredere în acțiunile sale. Sau, înainte de a trimite formularul, puteți întreba și utilizatorul „Ați completat totul corect?” Dacă acesta răspunde da, atunci formularul va fi trimis, altfel nu va fi trimis.

ŞI ultima metoda Cea pe care o vom studia este metoda prompt(). Această metodă este utilizată mai rar decât celelalte două metode. Vă permite să primiți câteva informații de la utilizator, pe care le va introduce într-un câmp de text.

Ca rezultat, metoda prompt() returnează fie șirul introdus dacă utilizatorul a făcut clic pe butonul OK, fie null dacă utilizatorul a făcut clic pe butonul de anulare.

Ca parametru, adică în parantezele acestei metode, putem scrie o linie orientativă sau o întrebare pentru ca utilizatorul să știe ce informații trebuie introduse.

De exemplu, să-i cerem utilizatorului să răspundă la întrebarea „Cum te cheamă?” Numele introdus de utilizator va fi afișat pe ecran folosind metoda alert().

Var name = prompt("Care este numele tău?"); alert("Numele tău este " + nume);

Salvați și deschideți pagina în browser.

Desigur, puteți introduce orice informație în câmpul text din metoda prompt(). Aceste informații vor fi returnate ca șir, chiar și în cazul numerelor sau al altor caractere speciale.

De exemplu, să cerem utilizatorului să introducă două numere și apoi să le înmulțească. Va exista un fel de calculator pentru înmulțirea numerelor.

Var x = prompt("Introduceți primul număr:"); var y = prompt("Introduceți al doilea număr:"); //Conversia numerelor introduse dintr-un tip șir într-un tip numeric x = Number(x); y = Număr(y); document.write(x + " * " + y + " = " + (x * y));

Numerele introduse sunt șiruri, așa că pentru rezultatul corect al înmulțirii, aceste numere trebuie trecute prin funcția Number(), care le convertește din tipul șirului în numere normale.

Ei bine, asta-i tot. Acum știi încă trei metode: alert(), confirm() și prompt(). Pe care îl puteți folosi în siguranță în practică.

Continuăm seria noastră de articole educaționale despre îndrumarea și managementul frumuseții setări standard browsere, astăzi vă invităm să dezvoltați un dialog de confirmare între browsere, cu un dialog ușor de utilizat plugin jQuery. Puteți selecta text, butoane și acțiuni care vor fi efectuate după un clic.

cod HTML

Deși inițial ar trebui să ne concentrăm pe fereastra de confirmare, mai întâi să vă spunem puțin despre pagina pe care o vom folosi. Daca vrei sa vezi cod sursă plugin, puteți sări peste acest pas și să derulați în jos la partea din articol care vorbește despre jQuery.

Index.php

Înlocuirea casetei de dialog de confirmare jQuery cu CSS3 | Tutorialzine Demo

În partea de sus a documentului am inclus fontul Cuprum de la jQuery.confirm.css ( mese în cascadă stiluri pentru caseta de dialog), precum și styles.css – foi de stil în cascadă ale paginii noastre.

În partea de jos a corpului documentului am inclus biblioteca jQuery, jquery.confirm.js (fișierul principal de plugin), precum și script.js, care ascultă evenimentul clic pe butonul și rulează pluginul. În pasul final al tutorialului nostru de astăzi, vă vom spune despre aceste două fișiere.

Pentru a include o fereastră de confirmare pe site-ul dvs., va trebui să copiați folderul jquery.confirm din arhiva descărcată și să includeți jquery.confirm.css în capul codului, precum și fișierul jquery.confirm.js înainte de etichetă care încheie corpul documentului + biblioteca jQuery.

Dialogul în sine nu este altceva decât câteva rânduri de cod HTML. Mai jos puteți vedea codul introdus de plugin pentru a afișa caseta de dialog.

Exemplu de cod de casetă de dialog

Codul este adăugat în corpul documentului. confirmOverlay este afișat deasupra restului paginii, ceea ce împiedică orice interacțiune cu elementele paginii în timp ce caseta de dialog este afișată. Butoanele de confirmare h1, p și div sunt aranjate în conformitate cu structura specificată în setările pluginului. Mai târziu în articol veți afla mai multe despre acest lucru.

Cod CSS

Designul casetei de dialog este conținut în fișierul jquery.confirm.css. Acest lucru simplifică foarte mult procesul de integrare în existente proiect finalizat, iar stylingul se face în așa fel încât să fii sigur că stilurile nu se vor amesteca cu cele deja de pe pagină.

jquery.confirm.css

#confirmOverlay(
latime:100%;
inaltime:100%;
poziție:fixă;
sus:0;
stânga:0;
background:url ("adică.png");
fundal: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
fundal:-webkit-gradient(liniar, 0% 0%, 0% 100%, de la(rgba(11,11,11,0.1)), la(rgba(11,11,11,0.6))) repetare-x rgba(11,11,11,0,2);
indicele z: 100000;
}

#confirmBox(
background:url("body_bg.jpg") repetă-x stânga jos#e5e5e5;
lățime: 460px;
poziție:fixă;
stânga:50%;
sus:50%;
margine:-130px 0 0 -230px;
chenar: 1px rgba solid (33, 33, 33, 0,6);

Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox h1,
#confirmBox p(
font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") repetă-x stânga jos #f5f5f5;
umplutură: 18px 25px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0,6);
culoare:#666;
}

#confirmBox h1(
spațiere între litere: 0,3 px;
culoare:#888;
}

#confirmBox p(
fundal: niciunul;
dimensiunea fontului: 16px;
înălțimea liniei: 1,4;
padding-top: 35px;
}

#confirmButtons(
umplutură: 15px 0 25px;
text-align:center;
}

#confirmBox .button(
display:inline-block;
culoare:alb;
poziție:relativă;
înălțime: 33px;

Font: 17px/33px „Cuprum”, „Lucida Sans Unicode”, „Lucida Grande”, sans-serif;

Marja-dreapta: 15px;
umplutură: 0 35px 0 40px;
text-decor:niciuna;
chenar:niciuna;
}

#confirmBox .button:last-child( margin-right:0;)

#confirmBox .button span(
poziție: absolut;
sus:0;
dreapta:-5px;
background:url("buttons.png") fără repetare;
lățime: 5px;
înălțime: 33px
}

#confirmBox .blue( background-position:stânga sus;text-shadow:1px 1px 0 #5889a2;)
#confirmBox .blue span( poziție de fundal:-195px 0;)
#confirmBox .blue:hover( poziție de fundal:stânga jos;)
#confirmBox .blue:hover span( fundal-poziție:-195px jos;)

#confirmBox .gray( poziție fundal:-200px sus;text-shadow:1px 1px 0 #707070;)
#confirmBox .grey span( poziție de fundal:-395px 0;)
#confirmBox .gray:hover( background-position:-200px jos;)
#confirmBox .gray:hover span( fundal-poziție:-395px jos;)

Acest lucru profită de noul CSS3. În definiția #confirmOverlay, folosim gradații CSS3 (care funcționează numai în Firefox, Safari și Chrome) cu rezervă furnizată sub forma unui PNG transparent.

Apoi, în #confirmBox situat în centrul afișajului, am adăugat umbra interioara bloc (ceva similar cu strălucirea interioară din Photoshop). Am folosit și fontul Cuprum, care a fost adăugat din directorul de fonturi Google.

Împreună cu umbrele textului, puteți vedea stilul butoanelor. Acestea sunt implementate folosind uși glisante. Pe în acest moment Există două tipuri de modele disponibile - albastru și gri. Puteți adăuga culoare nouă butoane prin adăugarea de noi declarații la cod.

jQuery

Înainte de a intra în codul sursă al pluginului, să privim mai întâi puțin mai departe. În script.js puteți vedea pluginul rulând.

Script.js

$(document).gata(funcție())(

$(".item .delete").click(function())(

Var elem = $(this).closest(".item");

$.confirm((
"title" : "Confirmare ștergere",
"message" : "Sunteți pe cale să ștergeți acest articol.
Nu poate fi restaurat ulterior! Continua?"
"butoane" :(
"Da" :(
"class": "albastru",
„acțiune”: funcție())(
elem.slideUp();
}
},
"Nu" :(
"class" : "gri",
„acțiune”: function()() // Nimic de făcut în acest caz. De asemenea, puteți omite proprietatea de acțiune.
}
}
});

Când se face clic pe div .deleted în exemplul nostru, scriptul execută funcția $.confirm definită de plugin. Mai jos este titlul casetei de dialog, o descriere și un obiect cu butoane. Fiecare buton are un nume de clasă CSS, precum și un parametru de acțiune. O acțiune este o funcție care rulează atunci când se face clic pe un buton.

Acum să trecem la partea interesantă. În jquery.confirm.js puteți vedea codul sursă pentru dialogul nostru.

Jquery.confirm.js

$.confirm = function(params)(

Dacă($("#confirmOverlay").lungime)(
// O confirmare este deja afișată pe pagină:
returnează fals;
}

Var buttonHTML = "";

// Generarea de markup pentru butoane:

Dacă(!obj.acțiune)(
obj.action = function())(;
}
});

Markup var = [
"

„,params.message,”

",
butonul HTML,
"

$(markup).hide().appendTo("corp").fadeIn();

Butoanele Var = $("#confirmBox .button"),
i = 0;

$.each(params.buttons,function(nume,obj)(
buttons.eq(i++).click(function())(

// Apelarea atributului de acțiune când a
// apare un clic și se ascunde confirmarea.

Obj.action();
$.confirm.hide();
returnează fals;
});
});
}

$.confirm.hide = function())(
$("#confirmOverlay").fadeOut(funcție())(
$(acest).eliminare();
});
}

Pluginul nostru definește o metodă $.confirm(). Această metodă procesează datele pe care le-ați introdus, construiește marcajul și apoi le adaugă pe toate paginii. Deoarece div-ul #confirmOverlay are o poziție fixă ​​prin declarația CSS, vom lăsa procesul de centrare a acestuia în browser și apoi îl vom muta pe măsură ce utilizatorul derulează pagina.

După adăugarea marcajului, scriptul distribuie pârghii de evenimente pentru evenimentele de clic pe buton, efectuând acțiunea corespunzătoare butonului apăsat.

Aceasta încheie caseta noastră de dialog!

Să rezumam

Puteți edita aspectul casetei de dialog folosind fișierul jquery.confirm.css. Deoarece atributul mesajului din caseta de dialog utilizează cod HTML, puteți adăuga imagini sau pictograme acolo.

Puteți chiar să utilizați un plugin pentru a implementa casetele cu mesaje de eroare - trebuie doar să adăugați un singur buton fără un set de atribute de acțiune.

Atenţie! Nu aveți permisiunea de a vizualiza text ascuns.

Bună ziua, dragi vizitatori ai umilului meu blog pentru dezvoltatorii web începători și web masters. Aceasta este prima mea publicație în secțiune. Vreau să spun că resursa mea modestă nu a făcut, nu pretinde și nu va pretinde a fi cuprinzătoare, iar autorul însuși nu a fost niciodată și nu va fi un guru web. Pe paginile blogului meu, fac o încercare de a vorbi despre elementele de bază ale diverselor tehnologii web. Și această secțiune va fi dedicată unui limbaj de programare interpretat cu capabilități orientate pe obiecte JavaScript.

În plus față de cele de mai sus, JavaScript este un limbaj algoritmic (adică atunci când Ajutor JavaScriptîi instruim browserului cum să reacționeze la anumite acțiuni ale utilizatorului). În secțiunea Note despre HTML, și în special în articolul despre , am vorbit deja despre ce trei elemente de bază constau în paginile noastre: HTML, HEAD și BODY.

Dar static simplu Pagini HTML este atât de plictisitor și neinteresant, dar am dori să adăugăm puțină dinamică și să creștem numărul de moduri de a interacționa cu vizitatorii noștri.