Menu Outlook Bar

Sposób wykorzystania skryptu

Pomimo, że skrypt jest dosyć skomplikowany, to jego praktyczne użycie jest dosyć proste.
Aby wykorzystać skrypt w sposób właściwy należy:

w sekcji <HEAD> zlinkować zewnętrzny plik js
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="menuoutl.js"></SCRIPT>
również w sekcji <HEAD> zdefiniować tablicę trzywymiarową, która stanowi deklarację struktury menu (zobacz komentarze przy deklaracji struktury "menu3" w źródle tej strony).
w sekcji <BODY> utworzyć odpowiedni obiekt np:
menu1=new MenuOutl("menu1",tablica1,0,10,164,40,6,10,"styl1",2,tablica1a);
jeżeli menu ma być widoczne po załadowaniu strony, to należy przypisać wywołanie odpowiedniej metody zdarzeniu onLoad
<BODY onLoad="menu1.pokaz()">

Opis funkcji - konstruktora

Skrypt ten jest przykładem programowania zorientowanaego obiektowo. Całe menu jest obiektem, który tworzy się poprzez wywołanie funkcji MenuOutl(). Funkcja może być wywołana raz lub też wielokrotnie, przez co możemy stworzyć wiele kopii (instancji) tego samego obiektu. Przykładem może być ta strona, gdzie utworzone są trzy instancje obiektu MenuOutl. Jak można zauważyć, każda instancja może mieć zupełnie inną oprawę graficzną jak również zupełnie inną strukturę odnośników. Ponieważ skrypt jest umieszczony w osobnym pliku, może z niego korzystać wiele dokumentów jednocześnie (zobacz menu4)

Jest jeszcze jedna rzecz, o której muszę wspomnieć. Funkcja (konstruktor obiektu), oprócz tworzenia właściwości i metod obiektu, tworzy również dużą część kodu HTML (poprzez metodę document.write), dzięki czemu użytkownik skryptu jest zwolniony z konstruowania skomplikowanej struktury warstwowej potrzebnej do wizualizacji menu. Ze względu na to, funkcja powinna być wywołana wewnątrz sekcji <BODY>. Wprawdzie w większości przeglądarek, skrypt będzie działał prawidłowo również po wywołaniu funkcji w sekcji <HEAD>, lecz w niektórych (np. IE4.0) może pokazać się błąd.

MenuOutl(Inst,t,x,y,szer,wysK,wysP,odl,cl,bo,tZ)

Inst - nazwa zmiennej obiektowej, do której przypisywany jest obiekt. Po prostu, należy tu powtórzyć nazwę znajdującą się przed znakiem przyrównania, obejmując ją w cudzysłów.
t - tablica, w której jest zadeklarowana struktura menu. Od tej tablicy zależy ile będzie klawiszy, ile linków, jak również kolory i grafika (zobacz źródło tej strony).
x - left.
y - top.
szer - szerokość menu.
wysK - wysokość klawisza. Powinniśmy przygotować sobie pliki graficzne klawiszy, których wysokość równa jest temu parametrowi natomiast szerokość równa jest szerokości menu (poprzedniemu parametrowi).
wysP - wysokość pola, na którym znajdują się linki. Jest to wielokrotność liczby 20. Na przykład wartość 5 oznacza wysokość 100 pikseli.
odl - odległość pomiędzy poszczególnymi linkami.
cl - nazwa klasy, za pomocą której możemy formatować wygląd linków (zobacz w źródle tej strony). Jeżeli wstawimy tu pusty łańcuch (""), to linki będą miały domyślny wygląd.
bo - szerokość obramowania (jeżeli obramowania ma nie być, to wstawiamy 0).
tZ - tablica, w której zadeklarowany jest klawisz zamykający menu. Jeżeli takiego klawisza ma nie być, to po prostu pomijamy ten ostatni parametr.

Obiekt posiada następujące metody:

pokaz() - pokazuje menu, jeżeli jest ukryte.

ukryj() - ukrywa menu.

pozycja(x,y) - ustawia menu na pozycji według współrzędnych dokumentu.

cpozycja(x,y) - ustawia menu na pozycji według współrzędnych ekranu przeglądarki.

Na przykład:
menu1.cpozycja(0,0) ustawi menu w lewym górnym rogu ekranu, niezależnie od stopnia przewinięcia dokumentu.
Natomiast menu1.pozycja(0,0) spowoduje powrót menu na początek dokumentu.

plum(nr) - symuluje kliknięcie na klawisz określony numerem, przy czym pierwszy klawisz ma numer 0.

zInd(wartosc) - ustawia z-index obiektu na określoną wartość.