g.win.document is null

Problem ten wynika z próby ponownego utworzenia instancji TinyMCE w miejscu, w którym już istnieje jedna instancja, jednak ponieważ zawartość html została przeładowana, a Tiny nie usuwa automatycznie „siebie”, należy to robić ręcznie.

Aby to zrobić, należy w ustawieniach uruchamiających Tiny, zmienić ‘mode: „textareas”‘ na „none”.

tinyMCE.init({
....
mode : "none",
...
});

Dodawanie

Następnie po tym bloku kodu, należy wywołać dla każdego elementu, który chcemy zamienić na nasz edytor, następującą linie kodu:

tinyMCE.execCommand("mceAddControl", false, "'idElementu");

Gdzie „idElementu” wskazywać będzie na element (może to być zarówno div, jak i textarea jak i niemalże dowolny element DOM).

Usuwanie

Pozostało jeszcze usuwanie. Aby je zrealizować, wystarczy przed dodaniem sprawdzić czy istnieje już w pamięci instancja TinyMCE przypisana do określonego idElementu. Wystarczy zatem przed wcześniej wymienioną linią kodu odpowiedzialną za dodawanie instancji Tiny, dodać następujący fragment kodu:

if (tinyMCE.getInstanceById('idElementu'))
{
tinyMCE.execCommand('mceFocus', false, 'idElementu');
tinyMCE.execCommand('mceRemoveControl', false, 'idElementu');
}

Pobieranie zawartości

Z przydatnych metod, warto jeszcze wiedzieć, jak pobierać w dowolnej chwili zawartość (html) z naszego edytora. Realizuje się to przez następujące polecenie, które zwraca zawartość:

tinyMCE.get('idElementu').getContent()

W przypadku, jeżeli na jednej stronie, mamy wiele instancji TinyMCE równocześnie, wystarczy stworzyć obiekt pełniący rolę listy i przechowywać w nim kolejne id edytora. W ten sposób, wykorzystując foreach, będziemy mogli w łatwy i szybki sposób usuwać wiele instancji Tiny jednocześnie.

pChart

Klasa napisana w PHP, o ogromnych możliwościach konfiguracji, generowanego przez nią wykresu. Szybka, prosta, dobrze udokumentowana i posiadająca wiele przykładów jej zastosowania, udostępnionych przez twórców. Wymaga uruchomionego GD na serwerze.

http://pchart.sourceforge.net

Open Flash Chart

Wykres generowany za pomocą Flash’a, nie oferuje tak wielu możliwości, jeżeli chodzi o typy generowanych wykresów, ale konfiguracja jest również, wysoce dowolna.

Autorzy, jako główną zaletę tego rozwiązania, zachwalają możliwość pobierania informacji na podstawie których będzie generowany wykres, po załadowaniu strony do przeglądarki, zatem można generować różne wykresy dla różnych użytkowników. To zachęcające, ale nie będzie problemem, aby w konkurencyjnych rozwiązaniach osiągnąć podobny efekt.

http://teethgrinder.co.uk/open-flash-chart/

jQchart

Plugin dla jQuery. Rozwiązanie proste i szybkie, zalecane, gdy chcemy wygenerować skromne wykresy na witrynach, już wykorzystujących jQuery. Podstawową wadą, jest język jego dokumentacji, ale obrazkowe omówienie i przykłady kodu, powinny nie sprawiać problemów z jego implementacją.

http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm

Google Visualisation API

Dzięki temu kombajnowi, nie tylko można generować wykresy, ale również tworzyć wiele dodatkowych, bardzo interesujących rzeczy, takich jak mapy, sortowane tabele, a nawet bardzo proste schematy blokowe.

Jednym z jego elementów jest Google Chart API (http://code.google.com/intl/pl/apis/chart/), dzięki któremu można generować obrazy z wykresami, w dodatku w przydatku tego rozwiązania korzystamy z zasobów serwerowych Google, a nie własnych jak w przypadku poprzedników.

http://code.google.com/intl/pl/apis/visualization/

W dzisiejszym artykule skupimy się na bardzo przydatnej metodzie find().

Jeżeli nie miałeś wcześniej do czynienia z tym frameworkiem, zachęcam do zapoznania się z podstawami selektorów, korzystając z oficjalnego API na temat selectorów, lub też z przygotowanego przez Bartosza Medonia kursu podstaw jQuery. Ta wiedza znacznie ułatwi pojmowanie zamieszczonych tutaj rozwiązań.

Najlepiej zajmijmy się jakimś konkretnym przykładem zastosowania tej metody. Na większości stron, jednym z podstawowych elementów służących do nawigacji jest menu. Spróbujemy stworzyć własne animowane menu, korzystając z minimalnej ilości elementów i działające pod każdą przeglądarka obsługującą JavaScript.

1. Przygotowanie elementów

Zacznijmy od stworzenia pustego dokumentu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>
<body>
</body>
</html>

Następnie pobieramy najnowszą wersję jQuery z oficjalnej strony projektu ( production ) i kopiujemy do folderu z naszym plikiem html.

Wewnątrz tego dokumentu, przydałaby się jakaś przykładowa treść, oraz nasze menu. Wykorzystajmy do tego tagi div oraz span. Oczywiście pozycje w naszym menu, powinny być linkami, zatem umieścimy je w bloku a. Całość umieścimy wewnątrz bloku div o id=menu. Dodany również plik z jQuery wykorzystując tag script. Całość powinna wyglądać mniej więcej tak:

<div id="menu">
<div>
<a href="#">#1 Menu</a>
<span>
<a href="#">#1.1 Menu</a>
<a href="#">#1.2 Menu</a>
<a href="#">#1.3 Menu</a>
</span>
</div>
<div>
<a href="#">#2 Menu</a>
<span>
<a href="#">#2.1 Menu</a>
<a href="#">#2.2 Menu</a>
<a href="#">#2.3 Menu</a>
<a href="#">#2.4 Menu</a>
<a href="#">#2.5 Menu</a>
</span>
</div>
<div>
<a href="#">#3 Menu</a>
<span>
<a href="#">#3.1 Menu</a>
<a href="#">#3.2 Menu</a>
<a href="#">#3.3 Menu</a>
<a href="#">#3.4 Menu</a>
</span>
</div>
<div>
<a href="#">#4 Menu</a>
<span>
<a href="#">#4.1 Menu</a>
<a href="#">#4.2 Menu</a>
</span>
</div>
</div><!-- end #menu -->
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
<script type="text/javascript" src="jquery.js"></script>

Specjalnie umieściłem wiele pozycji w menu, aby pokazać jak łatwym, będzie odwołanie się do wielu z nich z poziomu jQuery, w zależności od tego, na który blok najedziemy myszką.

2. Zdefiniowanie wyglądu menu (css)

W tym dziale, zdefiniujemy wygląd wykorzystanych w pliku html, bloków kodu. Ja przygotowałem sobie, następujący fragment kodu ze stylem, umieszczony w sekcji head:

<style type="text/css">
<!--
* { margin: 0px; padding: 0px; }
a { text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif; }
html, body { margin: 10px; }

#menu { top: 0px; float: left; width: 100%; }
#menu div { position: relative; float: left; }
#menu div a:active, #menu div a:link, #menu div a:visited { display: block; position: relative; vertical-align: middle; background: #ccc; color: #fff; padding: 5px 10px; width: 150px; }
#menu div a:hover { background: #999; }
#menu div span { display: none;  position: absolute; top: 100%; left: 0; float: none; }
#menu div span a:active, #menu div span a:link, #menu div span a:visited { position: relative; display: block; float: left; top: 0px; background: #ddd; color: #fff; padding: 5px 10px; width: 150px; }
#menu div span a:hover { background: #999; }
-->
</style>

W naszym przykładzie tworzymy tylko proste dwupoziomowe menu, ale nic nie stoi na przeszkodzie, aby zmodyfikować je i dostosować do dowolnej ilości poziomów.

Jeśli już jesteśmy przy tej kwestii, warto również zapoznać się z frameworkiem do tworzenia css’owego menu.

3. Gwóźdź programu – find.

Tym oto sposobem, mamy przygotowaną całą stronę do implementacji kodu JavaScript. Wiemy także, o czym mowa, mówiąc selektor. W naszym przypadku, przykład jest dość prosty, albowiem mamy tylko 4 menu główne, ale nie trudno sobie wyobrazić, iż może być ich więcej, a każde z nich może mieć wiele rozgałęzień. To dyskwalifikuje metodę pętli, również wyklucza metodę brute-force, uwzględniającą przeanalizowanie wszystkich przypadków osobno. Jednak dzięki metodzie find, problem sprowadza się do jednej, bardzo czytelnej lini kodu, która zrealizuje za nas całe zadanie. Dobrze jest, aby nasz kod JavaScript znajdował się w $(document).ready, co zagwarantuje nam, odwoływanie się do niego, dopiero po załadowaniu strony, wszystkich zewnętrznych skryptów, stylów i innych plików.

<script type="text/javascript">
<!--
// <![CDATA[
$(document).ready(function(){
	$("#menu div").hover(
		function() {
			$(this).find("span").css({opacity:0.98}).slideToggle("fast");
		},
		function() {
			$(this).find("span").slideToggle("fast");
		}
	);
});
// ]]>
-->
</script>

Powyższy kod zalecam umieścić po znaczniku script, w którym odwołujemy się do jQuery, na dole strony.

W głównym selektorze, odwołujemy się do znacznika od id=”menu”, wewnątrz którego znajduje się znacznik div. Metoda .hover(), oznacza zdarzenie najechania myszki, na wybrany element i jako parametry, przyjmuje jedną lub 2 funkcje, które są realizowane podczas zainicjowania tego zdarzenia. Druga funkcja jest opcjonalna i jest wykonywana wówczas, gdy opuścimy kursorem obszar naszego elementu. Postarałem się tak przedstawić kod, aby obie funkcje były przejrzyste dla czytelnika, ale zalecam minimalizację kodu w funkcjonujących projektach.

Przeanalizujmy teraz kod wewnątrz funkcji. Znowu wykorzystujemy tutaj selektor, tym razem odwołujemy się od obiektu, w którym się znajdujemy. Każdy selektor jQuery zwraca obiekt, do którego możemy się odnieść przez klauzulę this. Jednak jeśli chcemy, wewnątrz elementu, odnieść się do elementu znajdującego się wewnątrz danego elementu, wykorzystujemy metodę find, która wyszukuje i zwraca wszystkie pasujące elementy. Należy o tym pamiętać, ponieważ jeśli chcemy odnieść się do jakiegoś konkretnego elementu, należało by zastosować na przykład klasę i odwołać się po przez .find(„.classNazwa”). Oczywiście, wewnątrz find, możemy również odnosić się do bardziej skomplikowanej struktury elementów, tak samo jak w selektorach jQuery.

Pierwsza funkcja jak widać, modyfikuje zwracany przez metodę find obiekt, i zmienia jego przeźroczystość, następnie, korzystając z metody slideToggle(), zainicjowana zostaje animacja, w tym przypadku, jest to animacja „zjeżdżania” na dół, o czym decyduje parametr display ustawiony na none w ustawieniach css elementu ( element jest niewidoczny, więc slide jedyne co może wykonać to pokazanie go ).

W przypadku drugiej funkcji, wszystko wygląda bardzo podobnie, z tą różnicą, że nie musimy już modyfikować opacity, albowiem zostało ono już zmienione. Zrobiliśmy to po przez jQuery, m.in. dlatego, ponieważ w css, nie było by to możliwe, w taki sposób, aby uzyskać pełną zgodność z validatorem w3c, a także, aby przeźroczystość wyświetlana była prawidłowo, na wszystkich nowoczesnych przeglądarkach obsługujących JavaScript.

4. Podsumowanie

Celem tego artykułu, nie było nauczenie się tworzenia animowanego menu, lecz, poznanie wielu ciekawych kwestii dotyczących metody find(), a także samego jQuery. Możliwości jakie niesie, są ogromne i mam nadzieje, że po lekturze tego artykułu, zyska ono kilku entuzjastów.

Natomiast efekt naszej pracy, możemy zobaczyć w demonstracji.