• Domowa
• Opis tagów
  • default
  • metatagi
• HTML DOM
• imiona
• stałe tło
• budzik ||
• javascript
  • Fancy Zoom
• php odniesienia
• css odniesienia
• Emocje
  • Podstawy
  • Wprowadzenie
  • Uskrzydlenie
  • Empatia
  • Kontakty
  • Małżeństwo
  • Kierowanie
  • Zdrowie
  • Dzieci

wszystko

Biblioteki programistyczne (frameworks) dla JavaScript. JQuery i wtyczka (plugin) Fancy Zoom.

Szczegółowy opis użycia Fancy Zoom dla początkujących autorów stron.

JQuery

Autor: John Resig z USA i współpracownicy. Licencja GNU: MIT oraz GPL.

• Artykuł napisałem w końcu września 2009r.
• Najnowsza wersja jQuery to jquery-1.3.2.js. Można pobrać wersję typu 'Development'- z komentarzami, lub wersję 'Production'- zminimalizowaną i skompresowaną.

Opis biblioteki jQuery

Biblioteka programistyczna (nazwa odpowiada ang. 'framework') to zbiór klas, funkcji itp., które same w sobie nie są programami, ale mogą być użyte przez programy. Jquery, jak inne biblioteki, nie rozszerza języka javascript. Kod czy program, który można napisać używając jQuery, można równie dobrze stworzyć bez jej użycia. Tyle, że będzie długi i skomplikowany. Przykład:

Po kliknieciu tutaj, link powoli zniknie. To efekt zastosowania jQuery.

Oto zapis powyższej akcji:

  <script type="text/javascript">
        $(document).ready(function(){
        $("a.proba ").click(function(event){
        event.preventDefault();
        $(this).hide("slow");
        });
        });
   </script>
	

Bez jQuery musielibyśmy się trochę więcej napracować...To nie znaczy, że biblioteki trzeba stosować zawsze i wszędzie. Jeśli celem miałoby być 'ozdabianie strony', to wywołany efekt może być przeciwny do zamierzonego, czyli spowodować irytację oczekiwanych przez nas użytkowników strony. Wracając do jQuery. Biblioteka umożliwia łatwy dostęp do DOM. Przy wykorzystaniu jQuery core, czyli jądra można m.in. dodawać dynamicznie elementy wraz z zawartością do body, wykonywać funkcje wewnątrz określonych elementów oraz tworzyć wtyczki. Wtyczka to dodatek do istniejącej biblioteki lub programu, rozszerzający jego możliwości, czy automatyzujący powtarzalne czynności.

Omówmy w skrócie Application Programming Interface, czyli jQuery API reference:

Selektory (Selectors) pozwalają wyszukać elementy dokumentu, czyli elementy DOM według np id, nazwy, klasy,hierarchii, różnych filtrów (np :first, czyli pierwszy element danego typu), wszystkie elementy w celu zmiany ich np.stylu. Przykład z filtrem :odd:

rząd z indeksem #0

rząd z indeksem #1

rząd z indeksem #2

rząd z indeksem #3

Zapis powyższego:

  <script type="text/javascript">
       $(document).ready(function(){
       $("tr:odd").css("background-color", "#00ff00");
       });

  </script>
    //oraz w style  i body:
     <style> table { background:#99ff00; margin-left:40px}</style>
  <table border="1">
    <tr><td>rząd z indeksem #0</td></tr>
    <tr><td>rząd z indeksem #1</td></tr>
    <tr><td>rząd z indeksem #2</td></tr>
    <tr><td>rząd z indeksem #3</td></tr>
  </table>
  

Atrybuty (Attributes) pozwalają na dostęp do atrybutów elementów, ich dodawanie oraz usuwanie i zmienianie

Wyszukiwanie (Traversing) umożliwia znajdowanie i operacje (np. zmianę klasy, usuwanie, zmianę kolejności) na znalezionych wg założonej reguły elementach.

Manipulowanie(Manipulation) pozwala na wstawianie i pobieranie zawartości typu 'innerHtml' z elementów, wstawianie zawartości wewnątrz, zewnątrz i wokół elementów oraz zamianę, usuwanie i kopiowanie (klonowanie) elementów DOM.

CSS (CSS) zawiera metody (funkcje) zwracające styl elementów, pozwalające wprowadzić styl, określić położenie i wielkość elementów.

Zdarzenia (Events) mogą wiązać zdarzenia z procedurami, które je wykorzystują (handler), uruchamiać (trigger) zdarzenia, symulować najazd myszy (hover), przełączać handlery danego zdarzenia między sobą.

Efekty (Effects) zawierają metody podstawowe: Show(); hide();toggle();toggle(switch) z parametrami i bez oraz metody przesuwające (sliding) elementy, powodujace ich zanikanie (fading) i animowanie.

Ajax (AJAX = Asynchronous JavaScript and XML. Z Ajaxem kod JavaScript może wymieniać dane między przegladarką a serwerem, bez przeładowywania strony.) Metody tu zawarte pozwalają ładować strony używając HTTP request z użyciem get lub post przyłączać (attach) i wykonywać funkcje w odpowiedzi na różne zdarzenia związane z AJAX.

Narzędzia (Utilities) ustalają typ i dane przeglądarki, pracują z tablicami (arrays), obiektami i łańcuchami (strings).

Teraz w jeszcze większym skrócie o interfejsie użytkownika -jQuery UI reference. UI = User interface.

Wtyczki do interakcji (interactions) pozwalają użytkownikowi przesuwać, przeciągać i upuszczać, rozddzielać, wybierać, zmieniać rozmiary elementów dla których je zastosowano. Wtyczki do gadżetów (widgets) pozwalają konstruować harmonijkę (Accordion), wskaźnik daty (Datapicker), okno dialogowe, (Dialog), pasek postępu, (Progressbar), suwak (slider), zakładki (Tab). Wtyczki do efektów umożliwiają dodanie do elementów różnych efektów, uruchamianych przez użytkownika. Wszystkie te wtyczki mają gotowe pliki ui.theme.css , ustalające podstawowy styl prezentacji. Autorzy przygotowali też ThemeRoller. Można pobrać ten zbiór i po rozpakowaniu uzyskać CSS oraz wszelkie obrazki, niezbędne do utworzenia gadżetów wspomnianych wcześniej.

Strona domowa jQuery:

Strona domowa jQuery

O wtyczkach do jQuery:

Niezależnie od rzeczy, w tym wtyczek omówionych wyżej, które są rezultatem pracy zespołu kierowanego przez p.Resig, wielu autorów opracowało, kilkaset w sumie, wtyczek do tej biblioteki. Owe wtyczki są dostępne ze strony głównej jQuery - patrz Wtyczki do jQuery. Poniżej przedstawiam jedną z nich -Fancy Zoom.

 

Wtyczka Fancy Zoom

Autor: DFC Engineering. Licencja GNU:GPL.

• Artykuł napisałem we wrześniu 2009r.
• Najnowsza wersja Fancy Zoom 1.5 pochodzi z września 2009 r.

Opis wtyczki Fancy Zoom

Wtyczka(plugin) Fancy Zoom rozszerza zastosowanie jQuery o efekt animowanego powiększania się obrazka do jego pełnych rozmiarów. Efekt jest wykonywany na tej samej stronie, na której zamieszczono ikonę obrazka, czyli jego miniaturę (thumb image). Centrum obrazka o pełnych rozmiarach jest w centrum (widocznej na ekranie części) okna przeglądarki. Według danych autora, działa we wszystkich przeglądarkach, oczywiście pod warunkiem, że użytkownik nie wyłączył javascriptu. Sprawdziłem działanie wtyczki w IE8, Firefox 1.3.5 oraz Google Chrome. Na wtyczkę składają się:

• plik jquery.js
• plik jquery.fancyzoom. js lub plik jquery.fancyzoom.min.js
• opcjonalnie można dodać pliki; jquery.shodow.js (nie działa w IE) i jquery.ifxpng.js
• folder zawierający ikonki itp. używane we wtyczce, nazwany przez autora: ressources (może dlatego, że to Francuz ?)
• własne, czyli właścicielki(la) strony, obrazki, które mają być animowane, we własnym folderze
• krótki kod wpisany na stronie pod <script>
• tagi <a> z odpowiednio wpisanymi adresami animowanych obrazków , lub tagi <img> z odpowiednimi atrybutami

Jak uzyskać wtyczkę?

Kompletną, najnowszą wersję wtyczki można pobrać tu: DFC ENGINEERING Uzyskamy ją jako fancyzoom-1.5.tar.gz, czyli skompresowaną. Do dekompresji może posłużyć np. Win Zip. Można również skopiować ją, już w gotowej postaci ode mnie.

Autor podaje też stronę: fancy zoom effect z której można pobrać wtyczkę. Jest to jednak wersja nieco starsza, bo 1.1 z sierpnia 2008r.

Ja wprowadzić wtyczkę na stronę?

Do nagłówka strony, czyli <head></head> wpisujemy src odpowiednich plików javascript:

    //koniecznie
        <script type="text/javascript" src="folder/jquery.js"></script>
        <script type="text/javascript" src="folder/jquery.fancyzoom.js"></script>
    //ewentualnie
        <script type="text/javascript" src="folder/jquery.shadow.js"></script>
        <script type="text/javascript" src="folder/jquery.ifixpng.js"></script>
     

Dodajemy na stronę (do <body> oczywiście ) obrazki, które chcemy animować:

    //Pierwszy sposób, wpisujemy obrazek (image)pod <a>
      <a href="image1.jpg"><img src="image1_small.jpg" alt="" /></a>
    //Drugi sposób, wpisujemy obrazek jako taki, czyli w tagu <img />
      <img class="dlaefektu" src="img/elemiah.jpg" alt="Światło solne" width="100" />   			
		

Pod <head>wpisujemy kod określający które obrazki i jak mają być animowane, czyli płynnie powiększane po kliknięciu w nie :

<script type="text/javascript"> $(function() { //Ewentualnie wpisujemy, jeśli zmieniamy nazwę folderu z ikonkami, tu 'resources/' //(ważne jest zamknięcie przez ukośnik /) $.fn.fancyzoom.defaultsOptions.imgDir='resources/'; //Poniżej zapis działający na tej stronie. Wyjaśnienia niżej, obok miniatur obrazków. $('.dlaobrazow > a:first').fancyzoom({Speed:400,showoverlay:true,overlay:0.2,overlayColor:'#C4D1E1'}); $('.dlaobrazow > a:last').fancyzoom({Speed:400,showoverlay:false}); $('#nooverlay').fancyzoom({Speed:400,showoverlay:false}); $('img.fancyzoom').fancyzoom(); $('img.dlaefektu').fancyzoom({Speed:400,showoverlay:true,overlay:0.7,overlayColor:'#B64702'}) //Rekomendowany przeze mnie wpis. Obrazki powinny być zapisane pod <a class="nazwa_klasy">. //Przy wyłączonym javascript, użytkownik też obejrzy duże obrazki. $('.dlaobrazow > a.nazwa_klasy').fancyzoom({ewentualne parametry}); }); </script>

Wtyczka w akcji

Kliknij w obrazek, by zobaczyć go w powiększeniu:

Dostępne opcje:

• imgDir: Folder, w którym przechowujemy niezbędne ikonki i in, jeśli nazwiemy go inaczej niż autor.
• Speed:Prędkość animacji w milisekundach, jeśli Speed:0, nie ma animacji.
• showoverlay:Domyślnie:true, jeśli false, nie pojawi się przeźroczysta, kolorowa warstwa na stronie.
• overlayColor:Domyślnie:#000. Kolor przeźroczystej warstwy.
• overlay:Domyślnie:0.6. Stopień przezroczystości warstwy.
• imagezindex:Domyślny:100. Z-index powiększonego obrazka.

• Kod zawarty w pliku jquery.shadow.js działa tylko w przeglądarkach innych niż Internet Explorer, tworząc cień pod powiększonym obrazkiem.

Kompatybilność

Wtyczka jest kompatybilna z IE8, Firefox 1.3.5, Google Chrome. Według zapewnień autora, po dodaniu jquery.ifxpng.js jest w pełni kompatybilna także z IE6; IE7 oraz Safari3 i Firefox2.

Kontakt z autorem

• mvilaplanaarobasedfc-e.com
• http://www.dfc-e.com (Strona w języku francuskim)