Patryk Matlak - Blog

Robiąc nie dawno temu aplikację w php, opartą na frameworku o nazwie takiej jak w.w. kategoria miałem dodać dodatkową funkcjonalność w postaci wyskakujących dymków. Pierwsze co zrobiłem to sprawdziłem czy ktoś już zrobił bibliotekę obsługi takiego elementu w CodeIngiter. Niestety nie znalazłem. Za to znalazłem gotowe narzędzie do samego wyświetlania moich dymków.

Na stronę tego "wynalazku" można wejść tutaj. Tam wszystko przystępnie jest napisane (w języku angielskim).

Ja stworzyłem prostą bibliotekę dla CI obsługującą tworzenie dymków. Dzięki tej bibliotece nie musimy się martwić o jakikolwiek kod JavaScript czy html, nasza biblioteka wygeneruje nam wszystko co potrzebujemy do wyświetlenia Baloników.

Do poprawnego działania dymków potrzebujemy:

(według zaleceń podanych na stronie projektu)

• prototype.js
• balloons.js
• yahoo-dom-event.js
• Obrazki balonika

Oczywiście do tego moją bibliotekę: Balloon.zip

Wszystko wrzucamy do folderów strony nam odpowiadających. Domyślnie dostęp do poszczególnych plików jest następujący:

• Dla plików JavaScript:
  

• • ./js/ext/prototype.js
  • ./js/ext/balloons.js
  • ./js/ext/yahoo-dom-event.js
  • ./img/balloon/baloon
• Dla plików obrazków (wszystkie wrzucamy do jednego folderu):
  • ./img/balloon/

• Dla pliku Balloon.php:
  • ./[twoj folder aplikacji]/libraries/Balloon.php
  • domyślnie dla CI: /system/application/Balloon.php

Teraz wystarczy zainicjować bibliotekę w naszym kontrolerze:

$this->load->library('Balloon');

Od tej chwili mamy dostę do obiektu klasy Ballon w $this->balloon. Aby wygenerować balonik z domyślnymi ustawieniami wystarczy teraz zainicjować dwie funkcje:

• $this->balloon->generate_config();
• $this->balloon->generate();

Funkcja generate_config() służy do wygenerowania kodu JS z konfiguracją dymków. Nie wymaganym paramestrem jest tablica asocjacyjna z ustawieniami dymka. Tablica zawiera identyczne elementy konfiguracji jakie zostały przedstawione na stronie projektu. Dla przykładu żeby zmienić wielkość tekstu oraz czas opóźnienia pojawiania się dymka, tworzymy następującą tablicę i wywołujemy metodę:

$config = array (

'balloonTextSize' => '90%',

'delayTime' => '500'

);

$this->balloon->generate_config($config);

Metoda generate($a_inner_text, $a_balloon_text[, $a_attributes = null]) wygeneruje nam kod html wraz z inicjacją dymka. Domyślnie, jeżeli nie znieminy ustawień wygeneruje nam się kod na wzór podanego poniżej:

<span onmouseover="JavaScript.balloon.showTooltip(event, "[Tekst pokazujący się w dymku]", 1)" >[Tekst na stronie]</span>

Parametry $a_inner_text oraz $a_balloon_text to odpowiednio: tekst który pojawi się w znaczniku oraz tekst który będzie się pojawiać w dymku. Dodatkowym parametrem jest $a_attributes którym definiujemy dodatkowe parametry znacznika.

Żeby zmienić znacznik do którego chcemy wrzucić dymek używamy metody set_html_markup($a_fix) gdzie $a_fix to znacznik jakiego chcemy użyć.

Z kolei do zmiany parametru działania myszki na inną niż onmouseover wykorzystujemy metodę set_mouse_event($a_event).

To tyle co do mojej biblioteki. W miarę upływu czasu i detekcji błędów postaram się umieszczać poprawione wersje tej nieskomplikowanej bibloteki.

Jeszcze jedna uwaga: oczywiście nie zapominamy w nagłówku html dodać ścieżki do plików JavaScript wymienionych wyżej