Podstawowe okna dialogowe w JavaScript

Stronę tą wyświetlono już: 230 razy

Wstęp

W JavaScript dostępne są podstawowe okna dialogowe, które wywoływane są za pomocą metod obiektu window. Dla ułatwienia życia programistów umożliwiono korzystanie z tych metod bez konieczności wywoływania ich z poziomu tego obiektu.

Okno dialogowe alert box (ostrzeżenia)

Okno dialogowe alert box umożliwia wyświetlenie jakiegoś komunikatu. Okienko to dysponuje jednym przyciskiem OK a do jego wywołania służy metoda alert. Oto przykład z tworzonym w JavaScript przyciskiem:

Listing 1
  1. var button = document.createElement("BUTTON"); // tworzę przycisk w locie
  2. button.onclick = function(){
  3. alert("Kliknąłeś przycisk, ty draniu!"); // wywołuję okno dialogowe
  4. }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia
  5. button.id = "alert"; // ustawiam mu id
  6. var text = document.createTextNode("Kliknij by zobaczyć alert box"); // tworzę tekst node dla przycisku
  7. button.appendChild(text); // ustawiam tekst przycisku (dodaję text node)
  8. document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę

Oczywisty rezultat:

Okno dialogowe confirm box (potwierdzenia)

Wszędzie tam, gdzie użytkownik musi coś zatwierdzić z odsieczą pędzi okno dialogowe confirm box, które dysponuje aż dwoma przyciskami: OK i Anuluj. Metoda ta zwraca true gdy kliknięty zostanie przycisk OK, zaś false, gdy wciśnięty zostanie przycisk Anuluj. Do wywołania tego zacnego okna dialogowego służy metoda confirm. Oto przykładowy kod:

Listing 2
  1. var button = document.createElement("BUTTON"); // tworzę przycisk w locie
  2. button.onclick = function(){
  3. var confirmValue = confirm("Przyznaj się, przyznaj, że głosowałeś na Komorowskiego!"); // wywołuję okno dialogowe
  4. if(confirmValue){
  5. alert("Wiedziałem!!!");
  6. }else{
  7. alert("To bardzo dobrze, tak trzymaj.");
  8. }
  9. }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia
  10. button.id = "confirm"; // ustawiam mu id
  11. var text = document.createTextNode("Kliknij by zobaczyć confirm box"); // tworzę tekst node dla przycisku
  12. button.appendChild(text); // ustawiam tekst przycisku (dodaję text node)
  13. document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę

Oczywisty rezultat:

Okno dialogowe input box (pobierania danych)

Jeśli potrzebne ci jest okienko do wprowadzania danych przez użytkownika, to input box jest twoim rozwiązaniem. Okno to można wywołać za pomocą metody prompt, która zwraca wpisaną przez użytkownika wartość. Oto przykład:

Listing 3
  1. var button = document.createElement("BUTTON"); // tworzę przycisk w locie
  2. button.onclick = function(){
  3. var name = prompt("O twą godność cię poproszę:"); // wywołuję okno dialogowe
  4. var from = prompt("A więc " + name + " się nazywasz, powiedz jeszcze skąd przybywasz:");
  5. alert("Jesteś " + name + " z " + from + ". Tak więc grzecznie witam cię.");
  6. }; // dodaję mu funkcję uruchamianą na zdarzenie kliknięcia
  7. button.id = "confirm"; // ustawiam mu id
  8. var text = document.createTextNode("Kliknij by zobaczyć confirm box"); // tworzę tekst node dla przycisku
  9. button.appendChild(text); // ustawiam tekst przycisku (dodaję text node)
  10. document.getElementById("strona").appendChild(button); // wrzucam przycisk na moją stronę

Komentarze