Strona główna kursu

JavaScript - okna

DZIAŁANIE: Otwórz inną stronę w okienku!
Zamknij okienko!
Okno nawigacyjne
 

Kod:

Kod pliku przykładu :
Kurs JavaScript, Kurs Ajax, Kurs PHP

Kod plików wyświetlanych w okienku :
Kurs JavaScript, Kurs Ajax, Kurs PHP

Ewentualne Objaśnienia:

Teraz zajmiemy się okienkami w JS. Mogą się one przydać w przeróżnych sytuacjach, w końcu nie każdy lubi jak coś mu się otwiera w nowym oknie czy zakładce, a niektóre rzeczy jak na przykład wyniki sondy najlepiej otwierać w takich nowych małych okienkach.
No i popatrzmy na nasz przykład - w pliku tego przykładu otwieramy nowie okienko przez instrukcję window.open - jej 1 parametr to strona, plik jaki ma się otworzyć w tym naszym nowym okienku. Drugi parametr to pewna etykieta, nazwa - dzięki niej dla przykładowego łącza ustalamy parametr TARGET - właśnie tą nazwę i dzięki temu plik 15przyklad2.html otwiera się w tym okienku. 3 parametr to miejsce gdzie ustalamy jak nasze okienko ma wyglądać - w tym przykładzie ustaliłem tylko szerokość i wysokość. Jednak tych właściwości jest więcej tzn. :
- directories - dodaje specjalne przyciski (jedynie Netscape)
- height - wiadomo
- width
- left - umieszcza lewą krawędzi okienka o x pikseli od lewej krawędzi ekranu
- top - jak wyżej tylko od górnej krawędzi
- location - pasek adresu (dla Firefox należy podać jeszcze toolbar)
- menubar - pasek narzędzi
- resizable - możliwość zmian rozmiarów okna
- scroolbars - paski przewijania
- status - paski statusu (stanu)
- toolbar - wyświetlenie standardowego dla danej przeglądarki paska narzędzi

Jeśli chcielibyśmy aby jakiś element nie był wyświetlany możemy albo go nie podawać tak jak w przykładzie, albo wpisać na przykład : toolbar=no. Wyświetlanie okienek w różnych przeglądarkach może nieraz się różnić trzeba sobie z tego zdawać sprawę.

No i teraz kwestia zamknięcia takiego okienka - jest to bardzo proste jeśli mamy łącze w kodzie danego okna, okienka to zamykamy go po prostu windows.close() jednak jeśli chcemy w danym oknie umieścić łącze do zamknięcia innego to musimy wskazać jakie to okna - czyli jak w przykładzie : nazwaokna.close() (tutaj nowe.close) .

Zwróć również uwagę na łącza tutaj nie pisałem już zdarzeń onClick tylko we właściwości HREF elementu A wywoływaliśmy odpowiedni kod JS.

No i nasz kolejny link - wywołuje on okienko (tutaj juz onClick, ale można była tak jak wyżej), które sobie nazywamy nawigacyjne - zwróć uwagę na wpis nawigacyjne.focus() - to kolejna metoda związana z obiektem window - powoduje ona, że otwierane okienko jest umieszczona nad innym okienkami. Inna metoda to metoda blur - umieszcza pod innym oknami.