Jak zrobić ładne pływające okno: Różnice pomiędzy wersjami
m (Zabezpieczył Jak zrobić ładne pływające okno ([edit=sysop] (na zawsze) [move=sysop] (na zawsze))) |
m |
||
Linia 3: | Linia 3: | ||
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]]. | 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:// | + | # Zacznij od pobrania [http://chomikuj.pl/free.download/JavaScript/jquery,1447967167.zip paczki (21kB ZIP)] zmodyfikowanej biblioteki. Paczka zwiera dwa pliki: jquery.js i st.css |
# Rozpakuj jej zawartość do katalogu zawierającego pliki strony. | # Rozpakuj jej zawartość do katalogu zawierającego pliki strony. | ||
# W kod strony w sekcji nagłówka (<head> ... </head>) wstaw poniższy kod | # W kod strony w sekcji nagłówka (<head> ... </head>) wstaw poniższy kod |
Wersja z 20:54, 20 lut 2012
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 });
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.