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