[Prototype] Menu :) Opcje

[phpion]

Witam
Chciałbym dać Wam do oceny moje menu wykonane z użyciem Prototype.

http://phpworkstation.com/prototype/menu.html

Natchnieniem do jego wykonania było to menu napisane w jQuery. Jak widać mój kod jest nieco dłuższy
Jest to mój pierwszy kontakt z Prototype więc prosiłbym o wytknięcie wszelkich błędów tudzież nakierowanie co można było rozwiązać inaczej, lepiej. W sumie kod dostępny jest bezpośrednio w pliku jednak pozwolę go sobie wkleić również tutaj:

[HTML] pobierz, plaintext 
var currentDd = null;
 
var SlideMenu = Class.create();
SlideMenu.prototype = {
	initialize: function(id) {
		this.id = id;
		this.elements = new Array();
 
		var childs = $(this.id).childElements();
		var childsLength = childs.length;
 
		var dt;
		var dd;
 
		for (var i=0; i<childsLength; i++) {
			var child = childs[i];
 
			switch (child.tagName.toLowerCase()) {
				case "dt":
					dt = (child.className != "empty") ? new SlideMenu_Dt(child) : null;
 
					break;
				case "dd":
					dd = new SlideMenu_Dd(child);
					child.hide();
 
					if (dt instanceof SlideMenu_Dt && dd instanceof SlideMenu_Dd) {
						this.elements.push(new SlideMenu_Pair(dt, dd));
 
						dt = null;
						dd = null;
					}
 
					break;
			}
		}
	}
}
 
var SlideMenu_Pair = Class.create();
SlideMenu_Pair.prototype = {
	initialize: function(dt, dd) {
		this.dt = dt;
		this.dd = dd;
 
		dt.element.onclick = function() {
			if (dd != currentDd) {
				if (!dd.isOpened) {
					dd.open();
				}
				else {
					dd.close();
				}
 
				currentDd = dd;
			}
		}
	}
}
 
var SlideMenu_Dt = Class.create();
SlideMenu_Dt.prototype = {
	initialize: function(element) {
		this.element = element;
	}
}
 
var SlideMenu_Dd = Class.create();
SlideMenu_Dd.prototype = {
	initialize: function(element) {
		this.element = element;
		this.isOpened = false;
	},
 
	open: function() {
		if (currentDd != null) {
			currentDd.close();
		}
 
		if (!this.isOpened) {
			new Effect.SlideDown(this.element, {duration:0.1});
			this.isOpened = true;
		}
	},
 
	close: function() {
		if (this.isOpened) {
			new Effect.SlideUp(this.element, {duration:0.1});
			this.isOpened = false;
		}
	}
}
 
function initMenu() {
	var menu = new SlideMenu("root");
}
 
 
Event.observe(window, "load", initMenu, false);
[HTML] pobierz, plaintext 

Równocześnie prosiłbym o zgłaszanie ewentualnych problemów w działaniu (testowałem na Operze i FireFoxie).

Pozdrawiam: pion

[parzol]

Super!

Naprawde swietne menu. Znacznie lepsze niz oryginal (który ma pewne problemy pod IE u mnie).

[phpion]

Hehe, dzięki Parzi

Ten post edytował phpion.com 21.11.2007, 20:41:17

[axel_pl]

jak dla mnie bomba

[skowron-line]

@phpion.com dobra robota ale mam jedno ale.. zwijanie moglo by byc deczko wolniejsze

[sf]

Trochę za bardzo skacze.. tzn. inaczej powinna być opcja umożliwiająca określenie jak szybko się rozwija / zwija.

[AxZx]

no i nie ma opcji ze jak klikniesz w rozwinieta pozycje menu zostanie ona zwinieta.

[c3zi]

Fajnie nawet wyglada. W mootools 4 linijki ;-)

[phpion]

jak dla mnie bomba

Cieszę się

@phpion.com dobra robota ale mam jedno ale.. zwijanie moglo by byc deczko wolniejsze

Akurat dla mojego zastosowania (nie jako menu z krwi i kości) jest dobre. Dalsze rozważania -> patrz punkt niżej.

Trochę za bardzo skacze.. tzn. inaczej powinna być opcja umożliwiająca określenie jak szybko się rozwija / zwija.

Dodam konfig do ustalania prędkości i może innych dupereli. Co do skakania - nie zaobserwowałem.

no i nie ma opcji ze jak klikniesz w rozwinieta pozycje menu zostanie ona zwinieta.

Wyłączenie możliwości zwinięcia aktualnej opcji również była mi potrzebna; po niewielkich zmianach można to "wyłączyć".

Fajnie nawet wyglada. W mootools 4 linijki ;-)

Dzięki Co do linku: pod IE6 wogóle mi się nie ładuje (może wina serwera) :/ Porównując mój kod z tym z jQuery różnica w ilości linijek jest zasadnicza hehe

Z ciekawostek: menu działa poprawnie na Operze, FireFoxie oraz IE od wersji 5.55 (szaleństwo! )