Jak zrobić ładne pływające okno: Różnice pomiędzy wersjami

Z ToProste
Skocz do: nawigacji, wyszukiwania
m (Utworzył nową stronę „Nie da się ukryć, że to proste pływające okno jest mało efektowne, choć może znaleźć zastosowanie i swoich zwolenników. W...”)
 
m
 
(Nie pokazano 7 pośrednich wersji utworzonych przez tego samego użytkownika)
Linia 1: Linia 1:
 
Nie da się ukryć, że to [[Jak zrobić pływające okno| proste pływające okno]] jest mało efektowne, choć może znaleźć zastosowanie i swoich zwolenników.  
 
Nie da się ukryć, że to [[Jak zrobić pływające okno| proste pływające okno]] jest mało efektowne, choć może znaleźć zastosowanie i swoich zwolenników.  
  
−
W tym artykule przedstawię pływające okno - pop-up, oparte o bibliotekę [http://jquery.com/ jquery], dzięki której okno jest efektowniejsze i również nie da się go zablokować w [[Przeglądarka| przeglądarkach]].
+
W tym artykule przedstawię pływające okno - pop-up <!--([http://my-example.cz.cc/przyklady/popup-2/ zobacz demo])-->, oparte o modyfikację [http://trentrichardson.com/Impromptu/index.php impromptu] biblioteki [http://jquery.com/ jquery], dzięki której okno jest efektowniejsze i również nie da się go zablokować w [[Przeglądarka| przeglądarkach]].
 +
 
 +
# Zacznij od pobrania [http://files4you.uni.me/index.php?&direction=0&order=nom&directory=java%20script/jquery paczki (21kB ZIP)] zmodyfikowanej biblioteki. Paczka zwiera dwa pliki: jquery.js i st.css
 +
# Rozpakuj jej zawartość do katalogu zawierającego pliki strony.
 +
# W kod strony w sekcji nagłówka (<head> ... </head>) wstaw poniższy kod
 +
 
 +
 
 +
== Pływające okno - kod ==
 +
<syntaxhighlight lang="html4strict">
 +
<link media="screen" rel="stylesheet" type="text/css" href="st.css" /> <!-- Zalaczenie arkusza stylu biblioteki -->
 +
<script type="text/javascript" src="jquery.js"></script> <!-- Zalaczenie funkcji zawartych w bibliotece -->
 +
 
 +
<script type="text/javascript"> <!-- Wywolanie okna -->
 +
$(window).load(function() {
 +
$.prompt("Treść okna",{ overlayspeed: 5 });
 +
});
 +
</script>
 +
 
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== Opis ===
 +
Ciąg znaków '''Treść okna''' możesz zastąpić swoim tekstem lub dowolnym kodem [[HTML]], pamiętaj tylko aby zamienić cudzysłów ( " ) na apostrof ( ' ), tak jak na przykładzie załączonym niżej.
 +
 
 +
Wstawienie w okno obrazu będącego odnośnikiem:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
$.prompt("<a title='Tyuł' href='http://url_linku' target='_blank'><img src='http://url_img' border='0' /></a>",{ overlayspeed: 5 });
 +
</syntaxhighlight>
 +
 
 +
O wyglądzie okna decydują definicje stylów w st.css, które można dowolnie modyfikować. Więcej informacji o możliwościach i dodatkowych funkcjach znajdziesz na [http://trentrichardson.com/Impromptu http://trentrichardson.com/Impromptu].
 +
 
 +
== Zobacz też ==
 +
<htmlet>zobacz-tez</htmlet>
 +
* [[Baner]]
 +
* [http://my-example.cz.cc/przyklady/plywajace-okno-1/ Przykład użycia pływającego okna]
 +
* [[Jak zrobić pływające okno]]
 +
* [[Jak zrobić wyskakujące okno]]
 +
 
 +
[[Kategoria:JavaScript]]
 +
[[Kategoria:Jak to zrobić]]
 +
[[Kategoria:Uzupełnić]]

Aktualna wersja na dzień 22:10, 2 mar 2013

Nie da się ukryć, że to proste pływające okno jest mało efektowne, choć może znaleźć zastosowanie i swoich zwolenników.

W tym artykule przedstawię pływające okno - pop-up , oparte o modyfikację impromptu biblioteki jquery, dzięki której okno jest efektowniejsze i również nie da się go zablokować w przeglądarkach.

  1. Zacznij od pobrania paczki (21kB ZIP) zmodyfikowanej biblioteki. Paczka zwiera dwa pliki: jquery.js i st.css
  2. Rozpakuj jej zawartość do katalogu zawierającego pliki strony.
  3. W kod strony w sekcji nagłówka (<head> ... </head>) wstaw poniższy kod


Pływające okno - kod

<link media="screen" rel="stylesheet" type="text/css" href="st.css" /> <!-- Zalaczenie arkusza stylu biblioteki -->
<script type="text/javascript" src="jquery.js"></script> <!-- Zalaczenie funkcji zawartych w bibliotece -->
 
<script type="text/javascript"> <!-- Wywolanie okna -->
 $(window).load(function() {
 $.prompt("Treść okna",{ overlayspeed: 5 });
 });
</script>


Opis

Ciąg znaków Treść okna możesz zastąpić swoim tekstem lub dowolnym kodem HTML, pamiętaj tylko aby zamienić cudzysłów ( " ) na apostrof ( ' ), tak jak na przykładzie załączonym niżej.

Wstawienie w okno obrazu będącego odnośnikiem: 

 $.prompt("<a title='Tyuł' href='http://url_linku' target='_blank'><img src='http://url_img' border='0' /></a>",{ overlayspeed: 5 });

O wyglądzie okna decydują definicje stylów w st.css, które można dowolnie modyfikować. Więcej informacji o możliwościach i dodatkowych funkcjach znajdziesz na http://trentrichardson.com/Impromptu.

Zobacz też

<htmlet>zobacz-tez</htmlet>

Źródło „http://to.proste.info.pl/index.php?title=Jak_zrobić_ładne_pływające_okno&oldid=2740”