prototype.js - lehet egyszerűbben?
Ismerkedem a prototype-al, csináltam benne 2-3 diszkrét js példát, de lehet, hogy lehetne egyszerűbben/jobban is. Szóval az alábbiak működnek, de könnyen lehet, hogy a prototype lehetőségeit nem használtam ki, vagy nem illeszkedik a megoldásom a prototype filozófiájához.
Először csináltam két egyszerű fv-t:Aztán a window.onload eseményhez írtam egy fv. Ebben három funkciót szerettem volna megvalósítani:
1. Adott elemen kattintva más elem(ek) kinyitását/becsukását.
2. Egy select változásakor (onchange) az ót tartalmazó form submit eseménye fusson le
3. Egy elemre (mondjuk egy button-ra) kattintva az őt tartalmazó form submit eseményének jóváhagyására kérdezzünk rá (a kérdés szövege a title paraméterbe kerül)És végül a myLoader eseményhez csatolása:Minden értékes javaslatot, javítást szívesen vennék.
----
Babar
■ Először csináltam két egyszerű fv-t:
// egy elem első adott típusú szülőjét adja vissza - az elemet magát is beleértve
// pl: getParentNode(getElementById('new'),'FORM');
getParentNode = function(element, nodeName) {
e = element;
while(e.nodeName != nodeName && e.parentNode)
e = e.parentNode;
return e;
}
// egy elem első adott class-ú szülőjét adja vissza - az elemet magát is beleértve
// pl: getParentNodeByClassName(getElementById('new'),'anyClass');
getParentNodeByClassName = function(element, myClassName) {
e = element;
while(!Element.hasClassName(e, myClassName) && e.parentNode) {
e = e.parentNode;
}
return e;
}
1. Adott elemen kattintva más elem(ek) kinyitását/becsukását.
2. Egy select változásakor (onchange) az ót tartalmazó form submit eseménye fusson le
3. Egy elemre (mondjuk egy button-ra) kattintva az őt tartalmazó form submit eseményének jóváhagyására kérdezzünk rá (a kérdés szövege a title paraméterbe kerül)
function myLoader(evt) {
// Az onClickHideShow elem kattintásra becsukja/kinyitja az őt tartalmazó
// hideShowContainer elemen belüli openable elemeket
var OpenerObject = Class.create();
OpenerObject.prototype = {
initialize: function(opener) {
this.opener = $(opener);
this.container = getParentNodeByClassName(this.opener,'hideShowContainer');
this.openable = document.getElementsByClassName('openable',this.container);
this.opener.onclick =
this.openClose.bindAsEventListener(this);
},
openClose: function(evt, extraInfo) {
$A(this.openable).each(
function(element, index) {
Element.toggle(element);
}
);
}
};
var openers = new Array();
$$('.onClickHideShow').each(
function (elem, index) {
openers.push(new OpenerObject(elem));
}
);
// Az onChangeSubmit select elemre megváltozása a form sumbit-jét is magával vonja
var OnChangeSubmitObject = Class.create();
OnChangeSubmitObject.prototype = {
initialize: function(selectElement) {
this.selectElement = $(selectElement);
this.formElement = getParentNode(this.selectElement,'FORM');
this.selectElement.onchange =
this.submitForm.bindAsEventListener(this);
},
submitForm: function(evt, extraInfo) {
this.formElement.submit();
}
}
var submitSelects = new Array();
$$('.onChangeSubmit').each(
function (elem, index) {
submitSelects.push(new OnChangeSubmitObject(elem));
}
);
// A confirm elemre kattintva a form jóváhagyását előbb jóvá kell hagyni
var ConfirmObject = Class.create();
ConfirmObject.prototype = {
initialize: function(element) {
this.element = $(element);
this.formElement = getParentNode(this.element,'FORM');
this.element.onclick =
this.confirmSubmit.bindAsEventListener(this);
},
confirmSubmit: function(evt, extraInfo) {
if (confirm(this.element.getAttribute('title'))) this.formElement.submit();
else return false;
}
}
var confirmElements = new Array();
$$('.confirm').each(
function (elem, index) {
confirmElements.push(new ConfirmObject(elem));
}
);
}
Event.observe(window, 'load', myLoader, false);
----
Babar
szvsz
getParentNodeByClassName(this.opener,'hideShowContainer')
>
this.opener.up('.hideShowContainer');
- eséménykezelésre miért a DOM Level 0-ás eseménykezelő modelt?
this.opener.onclick = this.openClose.bindAsEventListener(this);
>
this.opener.observe('click',this.openClose.bindAsEventListener(this));
http://www.prototypejs.org/api/element/observe
- szvsz érdemesebb az 1.5-el bevezett 'chain method' használni, egységesen a kódban
Element.toggle(element);
>
element.toggle();
http://www.prototypejs.org/api/element
üdv t
Épp ilyenekre gondoltam...
Az up metódus teljesen elkerülte a figyelmemet, pedig gyanítottam, hogy kell legyen ilyen funkció.
A másik kettő is hasznos, bár inkább formai, szemlélet beli kérdés - de megfogadom a tanácsot!
----
Babar