Jak zrobić ładne pływające okno: Różnice pomiędzy wersjami
Z ToProste
m |
m |
||
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 ([http://my-example.cz.cc/przyklady/popup-2/ zobacz demo]), oparte o | + | 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://www.megaupload.com/?d=KX0RSMWN 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> | ||
+ | |||
== Zobacz też == | == Zobacz też == |
Wersja z 14:34, 15 sie 2011
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 (zobacz demo), oparte o modyfikację impromptu biblioteki jquery, dzięki której okno jest efektowniejsze i również nie da się go zablokować w przeglądarkach.
- Zacznij od pobrania 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
<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 });