Strona Andrzeja Kardasia

Jak załadować część dokumentu będącego odpowiedzią serwera do okna dialogowego jQuery UI.

Buduję swoją stronę, używając CMS Made Simple. Jest to typowy system zarządzania treścią napisany w PHP, z ogromną ilością fajnych i bardzo przydanych plugin-ów. Większość z nich posiada niestety ograniczoną funkcjonalność technologii Ajax. Dodając treść, tworzysz stronę, która zachowuje się w stary sposób: kliknij i czekaj na załadownie całej zawartości strony.

Ajax jest dzisiejszym standardem do budowania serwisów Internetowych i chciałbym aby moja strona przynajmniej w ograniczonym zakresie posiadała funkcjonalność Ajaxa.

Rozwiązanie było bardzo proste. Kiedy poszperałem trochę w Internecie, znalazłem świetne i bardzo poste w użyciu API jQuery Ui, z doskonałą wtyczką dialog, która robi wszystko to czego chciałem. Zdecydowałem się aby ją wykorzystać do zmiany domyślnego zachowania wbudowanej przez YouTube playera zawartości.

Wszystko co muszę zrobić to upewnić się, że cała wbudowana zawartość z serwisu YouTube będzie oznaczona tak samo, tak abym mógł na niej operować używając pojedynczego prostego skryptu.

Postaram się opisać moje rozwiązanie, tak aby nie uwzględniało on specyfiki narzędzie, które ja używam, w ten sposób ty będziesz mógł je zastosować bez względu na to jak budujesz swoją stronę, czy używając cmsa czy czystego htmla.

Pierwsze rzeczą jaką zrobiłem była edycja szablonów wtyczki YouTubePlayer. Wszystko co musiałem zrobić to upewnić się, że każdy znacznik tworzący link do filmu z YouTube będzie oznaczony tą samą klasą. Poniższy przykład pokazuje jak wyglądają odnośniki do filmów:

<a title="The Orgin" class="film_link" href="http://www.kardasa.pl/youtubeplayer/detail/The-Orgin/75.html">
<img width="130" height="97" border="0" style="margin: 1px;" title="The Orgin" alt="The Orgin" src="http://img.youtube.com/vi/8Xi8hmVCZZw/1.jpg"> 
</a>

Jak widzisz są oznaczone klasą film_link. To jest bardzo istotne.

Poza samym linkiem musiałem się upewnić, że strona która ładuje filmy, załaduje je do unikalnie oznaczonego znacznika div. Zrobiłem to także poprzez zmianę szablonu wtyczki, której używam. Możesz porównać z poniższym przykładem wygenerowanych znaczników otaczających wbudowany film.

<div style="text-align: center;" id="film">
<object width="640" height="480">
<param value="http://www.youtube.com/v/8Xi8hmVCZZw?rel=0&amp;fs=1&amp;loop=0" name="movie">
<param value="transparent" name="wmode">
<param value="true" name="allowFullScreen">
<embed width="640" height="480" wmode="transparent" type="application/x-shockwave-flash" allowfullscreen="true" src="http://www.youtube.com/v/8Xi8hmVCZZw?rel=0&amp;fs=1&amp;loop=0">
</object>
</div>

Jak widzisz jest on otoczony znacznikiem div z parametrem id o nazwie film.

Po oznaczania możemy przejść do zasadniczego rozwiązania. Najpierw musisz załadować API jQuery i jQuery Ui API. Dodaj te dwie linie do twojej sekcji head po uprzednim wgraniu skryptów z API na twój serwer.

<script type="text/javascript" src="/scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.8.custom.js"></script>

Powinieneś jeszcze dodać do twojej strony arkusz styli jquery-ui CSS. Przeczytaj dokumentację API.

Następna rzecz do zrobienia to napisanie skryptu, który wykona całą robotę za nas.

$.fx.speeds._default = 1000;
$(document).ready(function() {
        $('a.film_link').each(function() {
                var $link = $(this);
                var $dialog = $('<div id="film_dialog"></div>')
                        .dialog({
                                autoOpen: false,
                                width: 660,
                                height: 'auto',
                                title: $link.attr('title'),
                                resizable: false,
                                modal: true,
                                show: 'blind',
                                hide: 'fold'
                        });
                $link.click(function() {
                        $('#overlay').show();
                        $('#ajax-indicator').show();
                        $dialog.load($link.attr('href')+' #film',function(){
                              $('#ajax-indicator').hide();
                              $('#overlay').hide();
                              $dialog.dialog('open');
                        });
                        return false;
                });
        });});

Jak widzisz sam skrypt jest krótki, oto zaleta używania API.

Pozwól teraz wyjaśnić linijka po linijce jak skrypt działa.

Pierwsza linia ustawia prędkość efektów wizualnych, które wykorzystamy do otwarcia i zamknięcia okien dialogowych.

Następna linia mówi, że kiedy załadujemy stronę zostanie wykonana zdefiniowana funkcja.

Funkcja przetworzy każdy znacznik z linkiem oznaczony klasą film_link (mówiłem, że to będzie istotne), a aktualnie przetwarzany link zostanie przypisany do zmiennej $link.

Następnie stworzymy zmienną nazwaną $dialog, która będzie przechowała nasze okno dialogowe zbudowane ze znaczników div oznaczonych identyfikatorem film_dialog.

Następnie przekażemy parametry do naszego okna dialogowego, będą to szerokość i wysokość, tytuł pobrany z tytułu odnośnika. Powiemy, że okno dialogowe ma być modalne i, że chcemy aby nie otwierało się automatycznie.

Wybieramy także efekty wizualne pokazywania i ukrywania naszego okna dialogowego. Możesz wybrać dowolny efekt. Zalecam sprawdzić dokumentację API aby uzyskać pełną listę dostępnych efektów wizualnych.

Teraz musimy jeszcze stwierdzić kiedy chcemy aby nasze okienko dialogowe się otworzyło. Chcemy aby się otworzyło kiedy użytkownik kliknie link, popatrz na funkcję "$link.click".

Zgodnie z definicją tej funkcji najpierw pojawi się zdefiniowany na stronie "overlay", następnie pojawi się zdefiniowany na stronie "ajax-indicator", tak aby użytkownik wiedział, że coś się ładuje w danym momencie.

Teraz korzystając z funkcji load naszej uprzednio zdefiniowanej zmiennej "$dialog" załadujemy dane z serwera do naszego okna dialogowego.

Jak widzisz pierwszy parametr funkcji load to adres pobrany z naszego linku. Oznaczanie "+ #film" wykluczy załadownie całej strony. Na pewno nie chcemy nagłówka i stopki strony, to co chcemy to zawartość znacznika div oznaczonego identyfikatorem film. I to dokładnie się stanie. Bezpośrednio prosimy funkcję load aby załadowała nam tylko oznaczony element "#film".

Ostatnia linia jest bardzo ważna "return false" zapewni nam, że link nie zostanie przetworzony w tradycyjny sposób, nie zostaniemy przekierowani do strony z filmem.

Oczywiście musimy dodać nasz skrypt do sekcji head naszej strony:

<script type="text/javascript" src="/scripts/youtube_dialog.js"></script>

I to wszystko. Jeśli chcesz to przetestować po prostu podążaj za tym linkiem i kliknij na dowolnym z filmów.

Sugeruje abyś zrobił to dwa razy. Pierwszy raz z wyłączoną obsługą javascript w przeglądarce, aby zobaczyć jak to działa bez skryptu. Następnie odblokowując javascripty aby sprawdzić jak nasz skrypt zmienia sposób w jaki przetwarzana jest strona.

Najlepszą rzeczą w dodaniu funkcjonalności Ajaxa do twojej strony w ten sposób jest to, że jeśli ktoś będzie miał wyłączoną obsługę javascript, strona ciągle będzie działać tyle że w stary i mało fajny sposób.

W podobny sposób ładuję formularze kontaktowe na mojej stronie.

Możesz uzyskać dostęp do skryptu na moim serwerze svn podążając za tym linkiem.

Źródła:

• funkcja click jQuery
• funkcja load jQuery
• API jQuery Ui Dialog
• API jQuery Ui Effects