Jak zrobić ładne pływające okno: Różnice pomiędzy wersjami
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 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://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 | # 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 | ||
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.
- 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.
Zobacz też
<htmlet>zobacz-tez</htmlet>
