[szukam] strona z zakładkami Opcje

[eMatys]

Witam. Poszukuje javascriptu, który otwierałby zakładki wewnątrz strony, a nie wywoływał dodatkowych stron.
za okazane zainteresowanie dziekuje.

[dr_bonzo]

Ze co robil?
Co rozumiesz prze pojecie zakladki wewn. strony?

[eMatys]

Już daje przykład: Coś jak Piu` visti na stronie http://www.html.it/ Mam do wyboru kilka zakładek które są zdefiniowane w js a nie w kilku plikach tekstowych.

[Cysiaczek]

Witaj.

Zainteresuj się DHTML'em i DOM'em (oczywiście JavaScript również w to wchodzi)
W ten sposób szybko zrobisz takie zakładki, cho trochę się pomęczysz :/

[eMatys]

A nikt nie widzial gdzies gotowca, bo szczerze mówiąc dhtml, JS jest dla mnie nieco obcy...

[Cysiaczek]

Poszukaj. Choc wątpię, aby gotowiec Ci się przydał - wszystko zależy od potrzeb twojej strony www, technologii z jakich korzystasz etc. Lepiej się tym zainteresuj mimo wszystko. Mozesz jednak z gotowc 'zerżnąc' co nieco. Nietty i tak musisz poznac javascript tym wypadku.

[eMatys]

na tyle JS znam by go edytowac, niestety nie znam się na funkcjach, no moze poza popupami

[Cysiaczek]

spoko. to nie jest takie trudne Po prostu musisz nuczy się manipulowac elementami strony za pomocą JavaScriptu i DOM oraz CSS

[eMatys]

Jeszcze jakbys przyblizył mi co to jest DOM - CSSa akurat znam. I jak masz jakis kurs do polecenia, o w necie jest tego tyle...

Jeszcze jakbys przyblizył mi co to jest DOM - CSSa akurat znam. I jak masz jakis kurs do polecenia, o w necie jest tego tyle...

[Cysiaczek]

DOM = Document Object Model
http://www.w3.org/DOM/

[eMatys]

DOM = Document Object Model
http://www.w3.org/DOM/

Dzięki za pomoc ale juz znalazłem .js

[HTML] pobierz, plaintext 
function individuaOggetto(e){ //individua l'oggetto da cui e' partito l'evento
 
		// questa prima parte serve per avere una gestione degli oggetti comune
		if (!e) var e = window.event;
		// e gives access to the event in all browsers
 
		//questa seconda parte individua l'elemento che ha scatenato l'oggetto
		var targ;
 
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;
 
		if (targ.nodeType == 3) // defeat Safari bug
			targ = targ.parentNode;
 
		//restituisce l'elemento
		return targ;
 
	}
 
 
 
 
/***************************** funzione che crea i menu   *****************/
 
function Menu(menu_id,attivaClick,position,attivaOver,defaultGroup) { //creo una classe menu
 
		/** proprieta' della classe 
		menu_id e' il nome del menu: sempre obbligatorio
		attivaClick, attiva l'evidenziazione del menu al click del moude
		attivaOver, attiva l'effetto di visualizzione contenuto al mouse over
		position, indica la posizione del tab attivo
 
		**/
		this.menu_id=menu_id;
		this.attivaClick=attivaClick;
		this.position=position;
		this.attivaOver=attivaOver;
		this.defaultGroup=defaultGroup;
 
		/*** metodi della classe ***/
 
		this.Menu=function Menu() { //costruttore
			/*** lancio funzioni che costruiscono la classe***/		
			this.inizializzaMenu();
		}
 
 
 
		this.inizializzaMenu=function inizializzaMenu() {
 
					//se il click e' attivato ed e' il primo elemento, all'inzializzazione del menu,
					//evidenzio il primo tab
 
					//con position specifico, l'elemento che deve essere attivato
 
					var elementoEvidenziato=0; //di default l'elemento evidenzato e' il primo
					if (this.position) {
							elementoEvidenziato=this.position;
					}
 
 
				varGlobMenu=eval(this.menu_id+'varGlob=new Array()');
				 //creo una variabile globale che ha come nome
				//il nome del menu, e contiene la posizione dell'elemento evidenziato
 
				//se il menu non necessita mouse over la variabile globale e' settata a 'no'
 
				varGlobMenu[0]=this.position;		//posizione iniziale		
				varGlobMenu[1]='no';		//elemento evidenziato
				varGlobMenu[2]='no';		//gruppo di default
 
				if (this.attivaOver) {
 
					varGlobMenu[1]=this.position;  
 
 
					if (this.defaultGroup) {
						varGlobMenu[2]=this.defaultGroup;
					}
 
 
				}
 
 
 
 
 
 
				ancore=document.getElementById(this.menu_id).getElementsByTagName('a');
				lunAncore=ancore.length;
 
 
				for (var n=0;n<lunAncore;n++) {
 
					/***gestione mouse over e mouse out ***/
 
 
 
					if ( (this.attivaClick)&&(n==elementoEvidenziato) ) {
						ancore.item(elementoEvidenziato).onmouseover=null;
						ancore.item(elementoEvidenziato).onmouseout=null;
						separaGruppi(ancore.item(elementoEvidenziato).id); //evidenzia il gruppo corrispondente al tab
 
						if(ancore.item(elementoEvidenziato).className.indexOf('_over')==-1) { //se l'elemento e' instato mouse out, lo coloro
							cambiaOver(ancore.item(elementoEvidenziato)); 
						}
					}
 
					else { //se non c'e' il click e si tratta degli altri elementi
						//variabile per vedere se c'e' da attivare il mouse over
 
						if (  ( ( (this.attivaClick)&&(this.attivaOver) )&& ( (ancore.item(n).id!='') ) || ( (ancore.item(n).id=='')&&(varGlobMenu[2]!='no') )  )  ) { //se c'e' da visualizzare gli elementi al mous eover
								ancore.item(n).onmouseover=tabClick;
						}
						else {
							a=ancore.item(n).onmouseover;
 
							ancore.item(n).onmouseover=tabOver;
 
						}
 
						ancore.item(n).onmouseout=tabOut;
					}
					/***gestione click ***/
 
					if(this.attivaClick) {
						ancore.item(n).onclick=tabClick;
 
					}
 
 
				}
 
 
 
			  function tabOver(e){
 
					var el=individuaOggetto(e); //el e' elemento che ha fatto partire l'evento
												//la funzione individuaOggetto(e) e' etserna a questa classe
					cambiaOver(el);
				}
				
				
				function cambiaOver(el) {
				
					
					if ( (el.previousSibling!=null)&&(el.previousSibling.tagName.toLowerCase()=='span') &&(el.className.indexOf('_over')==-1) ) { 
						el.className=el.className+'_over';
						el.previousSibling.className=el.previousSibling.className+'_over';
						el.nextSibling.className=el.nextSibling.className+'_over';
					}
					
					else if (el.id.indexOf('_over')==-1) {
							el.id=el.id+'_over';
					}
					
					
				}
				
				function tabOut(e) {
					var el=individuaOggetto(e); //el e' elemento che ha fatto partire l'evento
					cambiaOut(el);
				}
				
				function cambiaOut(el) {
											
					if ( (el.previousSibling!=null) &&(el.previousSibling.tagName.toLowerCase()=='span') &&(el.className.indexOf('_over')>0) ) { //se e' un menu con tab di tre elementi..
						el.className=el.className.replace('_over','');
						el.previousSibling.className=el.previousSibling.className.replace('_over','');
						el.nextSibling.className=el.nextSibling.className.replace('_over','');
 
					}
 
 
					else if (el.id.indexOf('_over')>0) {		//se e' un menu con tab img...
							el.id=el.id.replace('_over','');
					}
 
 
 
				}
 
 
				function controllaClick(e,el,id_menu) {
					if (!e) var e = window.event;
					var varGlobMenu=eval(id_menu+'varGlob');
					/*
					Questa parte disabilita' l'over in caso di click. Non necessaria qui.
 
					if(e.type=='click') {
						eval(id_menu+"varGlob='no';");
					}
 
					*/
					//else if(el.id!=''){
 
						// || ((el.id=='')&&(varGlobMenu[2]!='no')) 
					if ( (varGlobMenu[1]!='no') && (el.id!='')  ){
						var anch=document.getElementById(id_menu).getElementsByTagName('a');
						var lunAnch=anch.length;
						for (var m=0;m<lunAnch;m++) {
							if (anch.item(m).id==el.id) {
								varGlobMenu[1]=m;
 
							}
						}
 
					}
 
 
 
				}
 
				function tabClick(e) {
 
					var el=individuaOggetto(e); //el e' elemento che ha fatto partire l'evento
 
					controllaClick(e,el,el.parentNode.parentNode.id);
					var varGlobMenu=eval(el.parentNode.parentNode.id+'varGlob');
 
					//rimuovo mouse over e mouse out dall'elemento:
					el.onmouseover=null;
					el.onmouseout=null;
			
					cambiaOver(el); 
					
					//la struttura del documento e' UL > LI > A -- noi siamo nell'A
 
					var ancore=document.getElementById(el.parentNode.parentNode.id).getElementsByTagName('a');
					var lunAncore=ancore.length;
 
					for (var n=0;n<lunAncore;n++) {
						if(ancore.item(n)!=el) {
							//riassegno gli eventi agli altri elementi
 
							cambiaOut(ancore.item(n)); //riassegno lo stato mout
 
							if ( ((varGlobMenu[1]!='no')&& ( (ancore.item(n).id!='') ) || ( (ancore.item(n).id=='' &&varGlobMenu[2]!='no') ) ) ) {	//controllo che la visualizzazione dei contenuti all'over
																						//non sia disabilitata e che l'id dell'elemento non sia vuoto
									ancore.item(n).onmouseover=tabClick;
							}
							else {
								ancore.item(n).onmouseover=tabOver;
							}
							ancore.item(n).onmouseout=tabOut;
						}
						
						/*
						else if ( (el.id=='') && (varGlobMenu[2]!='no') ) {
							ancore.item(n).onmouseout=function(){
								cambiaOut(el);
								cambiaOver(ancore.item(varGlobMenu[0]) );
								if (ancore.item(varGlobMenu[0]).id!='') {
									separaGruppi(ancore.item(varGlobMenu[0]).id);
								}
								else if(varGlob[2]!='no') {
									separaGruppi(varGlobMenu[2]);
								}
								
							}
						}*/
						
					}				
					
					var elemento='';
					
					if(el.id.indexOf('_over')>0) { //se l'id dell'elmento contiene '_over'.
													//non puo' succedere per il cambio di classe
													//ma puo' succedere pe ril cambio di ID.
													//Quindi questo controllo e' utile per la classe MenuID
													//che erdita da questa.
 
						elemento=el.id.replace('_over','');
					}
 
					else if (el.id==''&&varGlobMenu[2]!='no') {
						elemento=varGlobMenu[2];
					}
 
					else elemento=el.id;
					return separaGruppi(elemento); //funzione che verifica se ci sono da visualizzare dei contenuti
 
				}
 
 
		}
 
 
		this.Menu(); //lancio il costruttore
 
 
}
 
 
 
 
 
/**************************** funzione per la gestione dei gruppi  **************/
 
function separaGruppi(el_id) {
	if (el_id!=null) { //se e' settato l'elemento id
 
		var temp=(el_id).split('||'); //se all'interno dell'id c'e' || --> i gruppi da ricaricare sono 2 alla volta
		var tempL=temp.length;			
 
		for (var n=0;n<tempL;n++) {
 
			var ritorno=visualizzaContent(temp[n]);
			if (n==tempL-1) { // se e' l'ultimo elemento dell'id
				return ritorno; // restituisco il valore 
			}
		}
						
	}
					
	else return true; //se non e' settato l'ID si prosegue con il link
					
				
}
				
function visualizzaContent(el_id) {
	//la funzione deve restituire true o false
	//true fa proseguire il link; false ferma il link
				
	/*** se e' settato l'ID faccio partire le funzioni che cambiano il blocco ***/
	if (el_id.indexOf('-')>0) { //se e' settato l'id e se contiene il trattino
			var temp=(el_id).split('-'); //ricavo due parti con: gruppo-blocco
 
			//gruppo e' un oggetto quindi va trasformato da stringa a oggetto
 
			var gruppo=eval(temp[0]);
			var blocco=temp[1];
 
			if (gruppo) { //se l'oggetto gruppo e' stato creato, rimando al link statico
				gruppo.mostraBlocco(blocco); // visualizzo il blocco e fermo il link
				return false; 
			}
 
			else {	//se l'oggetto gruppo non e' stato creato proseguo con il link statico
				return true;
 
			}
 
	}
 
 
}
 
 
 
/***************************** funzione che precarica tutte le imgs   *****************/
 
 
function preloadImgs(args) {
	for(var n=0;n<arguments.length;n++) {
		preloadImg(arguments[n]);
	}	
 
	//funzione che precarica un immagine
	function preloadImg(percorso) {
		var temp=new Image();
		temp.src=percorso;
	}
 
}
 
 
/***************************** funzione per la visualizzazione blocchi   *****************/
 
 
 
 function Gruppo(args) {
 
 
		this.blocchi=Gruppo.arguments;				//assegno all'array "blocchi" i valori passati
		this.lunBlocchi=this.blocchi.length; // conto quanti blocchi sono
		
 	
		this.bloccoEsiste=function bloccoEsiste(blocco) {
			//verifico che il blocco faccia parte del gruppo
			//restituisce true se il blocco eiste, false se non esiste
			var esiste=false;
			
				for (var n=0;n<this.lunBlocchi;n++) {
				
					if (blocco==this.blocchi[n]) {
					
						esiste=true;
						break;
					}
				}
				
				return esiste;
		}
		
		
	 this.mostraBlocco=function mostraBlocco(blocco) {
	
		if(this.bloccoEsiste(blocco)==false) {
			void(0); //se il blocco non esiste non fare niente
		}
		else {
			for (var n=0;n<this.lunBlocchi;n++) {
				if (blocco==this.blocchi[n]){
					document.getElementById(this.blocchi[n]).style.display='block';
				}
				else {
					document.getElementById(this.blocchi[n]).style.display='none';
				}
			}
			
		}
		
	 }
 
}
[HTML] pobierz, plaintext