Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Prototypejs, Event.Observe en Radiobtns (weergeven van DIV)

liquido - 30/01/2008 14:53

Nieuw lid

Hoi mensen,

Ik ben een beetje aan het spelen met prototypejs. Ik ben op dit moment bezig om dingen beter te stroomlijnen. Ik wil Event.Observe gebruiken voor mijn radiobuttons.Wanneer de gebruiker een radiobutton aanklikt dan moet de desbetreffende DIV worden weergegeven (niet alle radiobuttons hoeven perse een div weer te geven).

Ik heb het nu gedeeltelijk voor elkaar. Ik vind de code nog een beetje crappy, ik wil graag jullie mening hebben en de code met jullie delen. Hoe doen jullie zoiets (zonder prototypejs mag ook), geef jullie mening?

Ik vind het belangrijk dat ik de code kan hergebruiken (bijv. dat ik de elementen/waardes dynamisch uit de DB kan halen). De code moet makkelijk toepasbaar zijn voor zowel radio als checkbox.

Groet,
liquido

Dit heb ik nu:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radiobutton Test</title>
<script language="javascript" src="js/prototype.js" type="text/javascript"></script>
<script language="javascript" src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
  <label><input name="send_type" id="send_type.register" type="radio" value="register"/>geregistreerde</label>
  <label><input name="send_type" id="send_type.unknown" type="radio" value="unknown"/> onbekende</label>
</form>

<div id="register" style="display:none">Inside register..</div>
<div id="unknown" style="display:none">Inside unknown..</div>

<script type="text/javascript">
    new Form.Element.EventObserver(
        'send_type.register',
        function(element, value) {
            hide_all();
            $('register').show();
            alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value);
        }
    );
   
    new Form.Element.EventObserver(
        'send_type.unknown',
        function(element, value) {
            hide_all();
            $('unknown').show();
            alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value);
        }
    );
   
    function hide_all(){
        $('register', 'unknown').invoke('hide');
    }
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radiobutton Test</title>
<script language="javascript" src="js/prototype.js" type="text/javascript"></script>
<script language="javascript" src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
  <label><input name="send_type" id="send_type.register" type="radio" value="register"/>geregistreerde</label>
  <label><input name="send_type" id="send_type.unknown" type="radio" value="unknown"/> onbekende</label>
</form>
 
<div id="register" style="display:none">Inside register..</div>
<div id="unknown" style="display:none">Inside unknown..</div>
 
<script type="text/javascript">
    new Form.Element.EventObserver(
        'send_type.register',
        function(element, value) {
            hide_all();
            $('register').show();
            alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value);
        }
    );
 
    new Form.Element.EventObserver(
        'send_type.unknown',
        function(element, value) {
            hide_all();
            $('unknown').show();
            alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value);
        }
    );
 
    function hide_all(){
        $('register', 'unknown').invoke('hide');
    }
</script>
</body>
</html>

7 antwoorden

Gesponsorde links

Ontani - 30/01/2008 15:11
-1		op welk event reageert die EventObserver precies? of is dat eender welk event op die inputvelden?

liquido - 30/01/2008 16:38 (laatste wijziging 30/01/2008 16:43)
Nieuw lid		De event reageert wanneer ik op een bepaalde id (radiobutton) klik. Dus: send_type.unknown send_type.register Je kunt de code als het goed is zo copy pasten. Alleen heb je de library van prototypejs nodig. http://www.prototypejs.org/download

Ontani - 31/01/2008 08:08

-1

dus bij elke klik op een radio button wordt een actie uitgevoerd.

ik werk altijd met mootools en zou het op deze manier gedaan hebben:

javascript code - Bekijk de code zonder highlighting - Klap code in

                $A($('send_type.unknown'),$('send_type.register')).addEvent('click',function(event) {
 event = new Event(event);
 var element = event.target;
 hideAll();
 alert(element.getProperty('id') + ", " + element.getProperty('name') + ", value: " + element.value);
});

            
$A($('send_type.unknown'),$('send_type.register')).addEvent('click',function(event) {
 event = new Event(event);
 var element = event.target;
 hideAll();
 alert(element.getProperty('id') + ", " + element.getProperty('name') + ", value: " + element.value);
});
 

BramBo - 31/01/2008 13:09 (laatste wijziging 31/01/2008 13:34)

JS gevorderde

Zelf gebruik ik geen frameworks vooral niet in javascript(behalve dan mijn eigen microFramework), je eigen code kan dan wel korter geformuleerd worden maar in 99% van de gevallen gebruik je nog niet de helft van de framework methoden.

Het is trouwens altijd een slecht idee om je script in je body te plaatsen!

Anyhoo, ik zou het als volgt aanpakken:
Allereerst stel ik dat de Radio buttons alleen in een form voorkomen.
ik zou ervoor kiezen om een class te definiëren om de radios af te bakenen maar de IDs werken ook goed genoeg.

Nu, een eventlistener om de onclick listeners te binden. Window.onload lijkt me het best hier (hoewel DOMLoaded een beter alternatief is..) ook om de eenvoud.

php code - Bekijk de code zonder highlighting - Klap code in

// ge-edite functie uit mijn microFW
function hookOnload(eventName, callback) {
	if(window.addEventListener) window.addEventListener(eventName, callback, false);
	else if(window.attachEvent) window.attachEvent("on"+eventName, callback);
}

var radioCache = new Array(); 
function windowLoaded() {
	if(!document.forms) return false;

	var x = document.forms;
	for(var i=0, j=x.length; i<j;i++) {
		for(var e=0, f=x[i].elements.length;e<f;e++) {
			if(x[i].elements[e].type=="radio") {
				if(!radioCache[i]) radioCache[i] = new Array();
				radioCache[i][e] 	= new RadioListener(x[i].elements[e]);
				radioCache[i][e].prefix = "sendtype_(.+?$)";
				radioCache[i][e].bind();
			 }
		 }
	 }

	return true;
}

hookOnload("load", windowLoaded);

// ge-edite functie uit mijn microFW
function hookOnload(eventName, callback) {
	if(window.addEventListener) window.addEventListener(eventName, callback, false);
	else if(window.attachEvent) window.attachEvent("on"+eventName, callback);
}
 
var radioCache = new Array(); 
function windowLoaded() {
	if(!document.forms) return false;
 
	var x = document.forms;
	for(var i=0, j=x.length; i<j;i++) {
		for(var e=0, f=x[i].elements.length;e<f;e++) {
			if(x[i].elements[e].type=="radio") {
				if(!radioCache[i]) radioCache[i] = new Array();
				radioCache[i][e] 	= new RadioListener(x[i].elements[e]);
				radioCache[i][e].prefix = "sendtype_(.+?$)";
				radioCache[i][e].bind();
			 }
		 }
	 }
 
	return true;
}
 
hookOnload("load", windowLoaded);

Zoals je ziet doe ik niet bij iedere click een nieuwe fetch(document.getElementById) dit omdat het gewoon sneller is om elementen te cachen en getElementById met rust te laten.
De RadioCache wordt op gebouwd in 2D n.l. : radioCache[FORMVOLGNUMMER].elements[ELEMENTVOLGNUMMER]

je ziet dat ik in de loop de prefix verander, dit is alleen ten demostratie - om te laten zien dat het eenvoudig te veranderen is.

En nu een associatief object voor de radio buttons(hierna staat al gerefereerd in windowLoaded().

php code - Bekijk de code zonder highlighting - Klap code in

                function RadioListener(ele) { 
	var self	= this;
	this.prefix	= "sendtype_(.+?$)"; 	// Alles na sendtype is de id van de assoc div
	this.re		= new RegExp(this.prefix);
	this.ele	= ele || null;
	this.id		= this.ele.id || -1;
	this.assocDiv	= null;			// Element Cache, geen nieuwe fetches!
	this.showing	= true;
	this.bind 	= function() {
				if(this.assocDiv==null) this.assocDiv	= document.getElementById((new String((this.id.replace(this.re, "$1")))));
				if(this.ele==null||this.assocDiv==null) return false;				// Safety checks..

				this.ele.onclick = this.click;
				this.hideAssoc();
				return true;
		   	   };

	this.showAssoc	= function() { 
				self.assocDiv.style.visibility  = "visible";
				self.assocDiv.style.display	= "block";
				self.showing			= true;
	 		  };

	this.hideAssoc	= function() { 
				self.assocDiv.style.visibility  	= "hidden";
				self.assocDiv.style.display		= "none";
				self.showing				= false;
	 		   };

	this.click	= function(e) { 
				if(self.showing==false) self.showAssoc(); 
				else			self.hideAssoc(); 
			  };
}
            
function RadioListener(ele) { 
	var self	= this;
	this.prefix	= "sendtype_(.+?$)"; 	// Alles na sendtype is de id van de assoc div
	this.re		= new RegExp(this.prefix);
	this.ele	= ele || null;
	this.id		= this.ele.id || -1;
	this.assocDiv	= null;			// Element Cache, geen nieuwe fetches!
	this.showing	= true;
	this.bind 	= function() {
				if(this.assocDiv==null) this.assocDiv	= document.getElementById((new String((this.id.replace(this.re, "$1")))));
				if(this.ele==null||this.assocDiv==null) return false;				// Safety checks..
 
				this.ele.onclick = this.click;
				this.hideAssoc();
				return true;
		   	   };
 
	this.showAssoc	= function() { 
				self.assocDiv.style.visibility  = "visible";
				self.assocDiv.style.display	= "block";
				self.showing			= true;
	 		  };
 
	this.hideAssoc	= function() { 
				self.assocDiv.style.visibility  	= "hidden";
				self.assocDiv.style.display		= "none";
				self.showing				= false;
	 		   };
 
	this.click	= function(e) { 
				if(self.showing==false) self.showAssoc(); 
				else			self.hideAssoc(); 
			  };
}
 

En tada je hebt clickable radio buttons. Reusable en geen frameworks

Let wel: niet getest

Edit: ik was een hideAll functie vergeten, even toevoegen:

php code - Bekijk de code zonder highlighting - Klap code in

Array.prototype.hideAll = function() {
	for(var i=0, j=this.length; i<j;i++) {
		for(var e=0, f=this[i].length;e<f;e++) {
			this[i][e].hideAssoc();
		 }
	 }
}

Array.prototype.hideAll = function() {
	for(var i=0, j=this.length; i<j;i++) {
		for(var e=0, f=this[i].length;e<f;e++) {
			this[i][e].hideAssoc();
		 }
	 }
}

en natuurlijk op de juiste plek aanroepen(showAssoc) met radioCache.hideAll();

Ontani - 31/01/2008 14:03
-1		en dan heb je zo'n code geschreven en kom je tot de conclusie dat het weer niet werkt in Internet Explorer of andere rot browser, mootools is compact 42 Kb groot en daarmee de moeite nog niet om te gaan discussieren dat je de helft niet gebruikt. je kan zelfs de modules die je nodig hebt appart samenstellen en downloaden op de site.

BramBo - 31/01/2008 14:16
JS gevorderde		dan nog is en blijft het ~40x zo groot als deze code. Wanneer ik hem door een javascript obfuscator haal is hij slechts ~1100Bytes groot. Plus voor crossbrowser oplossingen heb ik het miniframeworkje. Maar waarschijnlijk heb je gelijk 42kb is ook weer zo groot nog niet, maar dat is alleen de core functies ? Hoewel ik het in de hand houden van mijn eigen code misschien nog wel van groter belang vind, zo kun je op de meest efficiënt mogelijke wijze programmeren zonder dat andermans methode je in de weg zitten en uiteindelijk tot de conclusie komt dat het toch beter is om deze te herschrijven. En, er zitten vaak strict javascript errors in dit soort frameworks, zoals variable hiding, single returns etc.

Ontani - 01/02/2008 09:37
-1		Die 42 KB is zelfs de volledige mootools library, uitgebreider als dat zul je het niet vinden . De core functie is zo'n 2KB groot. En idd sommige frameworks beperken je mogelijkheden om je eigen stijl in scripten door te trekken maar met mootools heb ik tot nu toe hier geen enkel probleem gehad. Je kent het lightbox effect wel zo'n div die op mysterieuze wijze over alles springt en fade naar zwart. met mootools maak je zoiets op 6 regels. Dit kan nog korter maar wordt het in mijn ogen onduidelijk. javascript code - Bekijk de code zonder highlighting - Klap code in $('lightbox_div').effect('opacity').start(0,0.8); $('lightbox_div').addEvent('click',function(event) { event = new Event(event); var element = event.target; element.effect('opacity').start(0.8,0); }); $('lightbox_div').effect('opacity').start(0,0.8); $('lightbox_div').addEvent('click',function(event) { event = new Event(event); var element = event.target; element.effect('opacity').start(0.8,0); });

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten