Dhtml Menu Erstellen Aber Wie

ut2k3 · September 20, 2004

Hi ! Ich w?rde gerne ein DHTML menu erstellen. Nur wie w?rdet ihr das l?sen

( ich wei? das dat zeugs in der xtc_show_category.inc.php ist ).

Nur ich br?uchte paar L?sungsvorschl?ge, da mir nichts einf?llt ...

vielleicht habt ihr schon funktionierende L?sungen etc !

Vielen dank im voraus !

manicon · September 20, 2004

wie meinst du das mit dhml-men??

so aufklapbare leisten etc?

aber das w?rde, glaube mit diesem script nicht so einfach gehen, weil xtc immer nur eine ebene der categorien bildet, und wenn du dann reingehst, wird dazu noch die n?chste ebene gebaut.

im dhml-men? m?sste man alle kategorien und unterkategorien kennen, um so was zu realisieren.

m?sste man was eigenes programmieren...

techway · September 20, 2004

hi,

meinst du sowas wie bei mir im shop?

manicon · September 20, 2004

wow, wie hast du das gel?st?

techway · September 20, 2004

das war eine alte osc-contribution (coolmenu)

mit hilfe von mehreren :pint: :pint: :pint: :pint:

hab ichs hingekriegt

baer frag mich nicht was ich damals gemacht hab, ist schon ne weile her :pst:

dukie6666 · September 20, 2004

es waere aber sch?n wenn du uns die l?sungsans?tze mitteilen k?nntest...

Philipp · September 21, 2004

Viel trinken dann gehts von alleine hat er doch geschrieben

manicon · September 21, 2004

kannst du wenigstens ein verweis auf dieses osc-contribution geben?

Disaster · September 21, 2004

Gibt diesbez?glich nicht soviele contribs !

Such doch mal [Klicken]

ut2k3 · September 21, 2004

^^

manicon · September 21, 2004

Originally posted by Disaster@Sep 21 2004, 09:41 AM
Gibt diesbez?glich nicht soviele contribs !

Such doch mal [Klicken]

danke,

jetzt ist dieser verweis in diesem thread und damit vollst?ndig, und jeder,der irgendwann mal danach suchen wird, findet es schnell.

:pst:

Chrysler · September 21, 2004

vlt mag techway seine anpassung ja als contrib selber ver?ffentlichen?

F?nd ich gar nicht verkehrt das generell mit in die Distribution aufzunehmen und im Admin nen switch einstellen zu k?nnen (an/aus DHTML-Men?).

Gibt sicher einige die sowas lieber einsetzen ..

Philipp · September 21, 2004

Ich f?nde das klasse gerade mit dem an und aus schalten

manicon · September 21, 2004

also bei v2 werden admins das bestimmt nicht mehr machen :cry:

campanero · September 21, 2004

... :dafuer: jepp

aber ich hoffe, das das forum (vers.2) hier nicht auf einen

absterbenden ast ist. will jetzt nicht wieder mit dem support

anfangen :pst:

manicon · September 21, 2004

also community ist gross, und zumindest ein kleiner teil davon nicht zu den geh?rt ?ber den herr bundesklnzler vor kurzem gemeckert hat, dann wird das forum nicht absterben

obwohl wird mein shop bald bestimmt auf v3 umsteigen

techway · September 21, 2004

Hallo,

ich habs mal einem die dateien mit einer anleitung weitergegeben...

wenn er es so hinkriegt, werde ichs zum download stellen

aber so einen switch, wo man das Men? ein und ausschalten kann, habe ich noch nicht eingebaut... kann sich ja jemand anderer daran wagen, ist nicht soo schwer

auf die Community :pint:

manicon · September 21, 2004

ja, einfach db erweitern mit der tabelle, wo z.b. men? einstellung ist, und ?ber admin-bereich ne sql-qry schicken...

blablabla, also so ung...

wollte halt mein senf dazugeben ^^

techway · September 21, 2004

OK, den Schalter im Admin-Bereich habe ich gerade erfolgreich bei mir eingebaut :i:

jetzt muss ich aber zuerst auf den Feedback warten....

:?:

Chrysler · September 21, 2004

daf?r sind die user ja selber zust?ndig.

In V2 wird das nicht mehr integriert, aber da w?rde dann ja die Contribution gehen.

Und in V3 w?rden das sicher auch irgendwer portieren...

wir hatten hier schonmal ?ber die integration des DHTML Men?s diskutiert..falls der user kein JS erlaubt muss man das halt auch noch abfangen und das alternative ausgeben. Dann m?sstes aber bei jedem gehen...

Philipp · September 21, 2004

Also mit dem switchen w?re das doch kein Problem oder? Man kann doch sagen "wenn aus dann der Pfad zum Men?" "Wenn an dann der Pfad zum Men?" oder liege ich da falsch? Ich kann leider kein PHP bin eher so der Photoshopler

ut2k3 · September 21, 2004

Hi ich habe Folgendes Problem ich sollte dieses DHTML menu zu XT-Commerce importieren ... aber wie ...

categories_dhtml.php :

<? 

	define(dynTreePath,"classs/"); //pfad von index -oder default.php zum classs Verzeichnis


?>


<tr>

 <td>

	<style type="text/css">

 @import "<? echo dynTreePath; ?>classs.css";

	</style>

	<script src="<? echo dynTreePath; ?>classs.js" type="text/javascript"></script>

<?



	function getChar($int,$times=1)

	{

 $str = '';

 for($i=0;$i<$times;$i++)

 	$str .= chr($int);

 return $str;

	}


	function getcPath($categoryId,$cPath='')

	{

 if($categoryId==0)

 	return $cPath;


 if($cPath!='')	

 	$cPath = $categoryId.'_'.$cPath;

 else 

 	$cPath = $categoryId;


 $parentQry = tep_db_query("select parent_id from categories where categories_status = '1' and categories_id=".$categoryId);

 $parent = tep_db_fetch_array($parentQry);


 return getcPath($parent['parent_id'],$cPath); //recursion


	}


	function isFirstLevel($cId)

	{

 $tmpQry = tep_db_query("select categories_id from categories where categories_status = '1' and parent_id=0");

 while($row = tep_db_fetch_array($tmpQry))

 	if($row['categories_id']==$cId)

  return true;

 return false;

	}


	function buildCategoryMenue($parentId,$gapH,&$html)

	{	

 global $languages_id,$currCatId;


 if($parentId!=0) 

 {



 	++$gapH; // f?r formatierung	//<span class="buttonlabel" onclick="toggleMenu(this)" onmouseover="buttonOver(this)" onmouseout="buttonOff(this)"> 



 	$catNameQry = tep_db_query("select categories_name from categories_description where categories_id=".$parentId." and language_id=".$languages_id);

 	$catName = tep_db_fetch_array($catNameQry);



 	$html .= '

   	'.getChar(9,$gapH).'<div id="div_'.getcPath($parentId).'" '.'class="button'.(isFirstLevel($parentId)?'':' menuNode').'">

   	'.getChar(9,$gapH).' <span class="buttonlabel" onclick="switchMenu(this)" onmouseover="mouseOver(this)" onmouseout="mouseOff(this)">

   	'.getChar(9,$gapH).'<img src="'.dynTreePath.'plus2.gif" title="Kategorie ?ffnen" alt="*"></span>'.'<a href="'.HTTP_SERVER.DIR_WS_CATALOG.FILENAME_DEFAULT.'?cPath='.getcPath($parentId).'">'.($currCatId==$parentId?'<b>'.$catName["categories_name"].'</b>':$catName["categories_name"]).'

  	'.getChar(9,$gapH).'	</a>

  	'.getChar(9,$gapH).'</div>';

 	$html .= '

  	'.getChar(9,$gapH).'<div class="menu" id="div_'.getcPath($parentId).'Menu">';	



 }

     //"select categories_id from categories where parent_id=".$parentId);

 $subCategoriesQry = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_status = '1' and c.parent_id = ".$parentId." and c.categories_id = cd.categories_id and cd.language_id='".$languages_id."' order by sort_order, cd.categories_name");


 unset($row);

 while($row = tep_db_fetch_array($subCategoriesQry))

 {

 	if(tep_has_category_subcategories($row['categories_id'])) 	

  buildCategoryMenue($row['categories_id'],$gapH,$html); //recursion

 	else 

 	{	

  $cNameQry = tep_db_query("select categories_name from categories_description where categories_id=".$row["categories_id"]);

  $cName =	tep_db_fetch_array($cNameQry);

  $html .= '

   	'.getChar(9,$gapH).'<div class="menuNode">

    '.getChar(9,$gapH).'<a href="'.HTTP_SERVER.DIR_WS_CATALOG.FILENAME_DEFAULT.'?cPath='.getcPath($row['categories_id']).'">'.($currCatId==$row['categories_id']?'<b>'.$cName['categories_name'].'</b>':$cName['categories_name']).'</a>

   	'.getChar(9,$gapH).'</div>';  	

 	}	


 }


 if($parentId!=0)

 {

 	$html .= '

   	'.getChar(9,$gapH).'</div>';

 }


	}


	$info_box_contents = array();

 	$info_box_contents[] = array('align' => 'left',

                 'text' => BOX_HEADING_CATEGORIES);


 	new infoBoxHeading($info_box_contents);


 	if(isset($cPath))

 	{

  preg_match("/([0-9]{1,3}$)/",$cPath,$tmp);

  $currCatId = $tmp[1];

  //echo '<script type="text/javascript">alert("'.$currCatId.'");</script>';

 	}

 	else 

  $currCatId = "0";




	$html = '	<div id="level" class="root">';//AnimTree

	buildCategoryMenue(0,0,$html);

	$html .= '	</div>';


	$info_box_contents = array();

 	$info_box_contents[] = array('align' => 'left',

                 'text' => $html);

  new infoBox($info_box_contents);

?>


	<script type="text/javascript">setCpath("div_<? echo $cPath; ?>");</script>


 </td>

</tr>

dann dynamicTree.js :

var day = 1000 * 60 * 60 * 24;


var SAVE_TIME = 1 * day; // 1 day


params = 

{   

   PATH_ONLY  : false,

   TIME_DELAY : 1,

   OPEN_PIC  : "dynamicTree/minus2.gif",   

   CLOSE_PIC  : "dynamicTree/plus2.gif"   

};



regExpArr = {};


MenuArr={};


Paths={};


/*


funcOnload = function() {

	buildCookie("level");

	resetTS("level", null);

}


// isDOM    

if(window.addEventListener) {

	window.addEventListener("load", funcOnload, false);

}

// isIE

else if(window.attachEvent){

	window.attachEvent("onload", funcOnload);

}

// isMacIE

else {

	document.onreadystatechange = function() {

 if(document.readyState == "interactive")

 	funcOnload();

	};

}


*/



function setCpath(bId)

{

	//alert(bId);

	if(!window.switchMenu||currentBrowser.OP5||bId=="div_")

 return;

	var button=document.getElementById(bId);


	if(!button)

	{

 var tmpReg = /(.*)_[0-9]{1,3}$/g;


 //alert(bId);

 bId = tmpReg.exec(bId)[1];



 button=document.getElementById(bId);


 if(!button)

 	return;	

	}


	var parentMenuEl=getParentByClass(button,"menu");

	if(parentMenuEl!=null)

	{

 var bId=parentMenuEl.id.replace(/Menu$/,"");

 setCpath(bId);

	}

	var l=CategoryButton.getButton(getChildrenByClassByTagname(button,"*","buttonlabel")[0]);

	if(!l.isDepressed)

	{

 switchMenu(l.el);

 l.isDepressed=true;

	}

}




function Cookie(id)

{

	if(!document.getElementById||!Paths[id]) 

 return;

	var activeButtons=Cookie.gAB(id);

	var visibleActiveButtons=[];

	for(var i=0,len=activeButtons.length,count=0;i<len;i++)

	{

 var container=CategoryButton.getButton(activeButtons[i]).menu.container.el;

 if(Cookie.iBV(container))

 	visibleActiveButtons[count++]=activeButtons[i];

	}

	var visibleActiveButtonIds=[];

	for(var i=0;i<visibleActiveButtons.length;i++)

 visibleActiveButtonIds[i]=getParentByClass(visibleActiveButtons[i],"button").id;

 document.cookie=id+"="+escape(visibleActiveButtonIds)+";path=/;expires="+new Date(new Date().getTime()+SAVE_TIME).toGMTString();

};


Cookie.iBV=function(el)

{

	if(typeof document.defaultView!="undefined"&&typeof document.defaultView.getComputedStyle != "undefined")

	{

 return document.defaultView.getComputedStyle(el,'').getPropertyValue("display")!="none";

	}

	else if(el.currentStyle)

 return el.currentStyle.display != "none";

};


Cookie.gAB=function(id)

{

	var activeButtons=[];

	if(params.PATH_ONLY)

	{

 activeButtons=getChildrenByClassByTagname(document.getElementById(id),"span","labelDown");

	}

	else if(Paths[id].activeMenu!=null)

	{

 activeButtons=getChildrenByClassByTagname(Paths[id].activeMenu.el,"span","labelDown");

 //alert("activeButtons.length: "+activeButtons.length);

 activeButtons.gah(Paths[id].activeMenu.ownerButton.el);

 //alert("activeButtons.length: "+activeButtons.length);

	}

	//null.x;

	return activeButtons;

};


resetTS=function(treeId,defaultButtonId)

{

	var activeButtons=null;

	activeButtons=getCookie(treeId);

	var activatedFlag=false;

	if(activeButtons!=null)

 for(var i=0;i<activeButtons.length;i++)

 	if(activeButtons[i])

  resetMS(activeButtons[i],activatedFlag=true);

	if(!activatedFlag&&defaultButtonId)

 buildTree(defaultButtonId);

};


function resetMS(sButtonId,isTarget)

{

	var button=document.getElementById(sButtonId);

	if(!button) 

 return;

	var parentMenuEl=getParentByClass(button,"menu");

	var label=CategoryButton.getButton(getChildrenByClassByTagname(button,"*","buttonlabel")[0]);

	var menu=label.menu;

	if(isTarget)

	{

 if(!label.isDepressed)

 {

 	switchMenu(label.el);

 	label.isDepressed=true;

 	if(parentMenuEl&&parentMenuEl.style.display!='block')

  for(var i=0;i<menu.items.length;menu.items[i++].style.display='none');

 }

	}

	else if(!menu.itemsToClose&&!label.isDepressed)

	{

 menu.itemsToClose=[];

 for(var i=menu.allItems.length-1,j=menu.items.length-1,n=0;i>-1;i--)

 	if(menu.allItems[i].style.display=='block')

  (menu.itemsToClose[n++]=menu.allItems[i]).style.display="none";

 	else if(menu.allItems[i]==menu.items[j])

  menu.itemsToClose[n++]=menu.items[j--];

	}

	if(parentMenuEl)

 resetMS(parentMenuEl.id.replace(/Menu$/,""));

}


if(!window.addEventListener&&!window.attachEvent&&document.write)

{

	Function.prototype.extend = function(souper) {

 this.prototype = new souper;

 this.prototype.constructor = this;

 this.souper = souper;

 this.prototype.souper = souper;

	};


	ElementWrapper = function ElementWrapper(el){

 if(arguments.length == 0) return;

 this.el = el;

 this.id = el.id;

 if(!ElementWrapper.list[this.id])

 	ElementWrapper.list[this.id] = this;

	};


	ElementWrapper.list = new function(){};


	ElementWrapper.getWrapper = function(id){

 return ElementWrapper.list[id];

	};


	EventQueue = function EventQueue(eventObj){

 if(arguments.length == 0) return;

 this.souper = EventQueue.souper;

 this.souper(eventObj);


 this.addToPool();

	};


	EventQueue.extend(ElementWrapper);


	EventQueue.prototype.addEventListener = function(etype, pointer){

 var list = this.eventHandlerList(etype);

 return list[list.length++] = pointer;

	};


	EventQueue.prototype.eventHandlerList = function(etype){


 if(!this[etype])

 	this[etype] = new EventQueue.EventHandler(this, etype);


 return this[etype];

	};


	EventQueue.prototype.removeEventListener = function(etype, pointer){

 var list = this[etype];

 var len = list.length;

 if(len == 0) return null;


 var newList = new Array(len-1);

 var rtn = null;

 for(var i = 0; i < len; i++)

 	if(list[i] != pointer)

  newList[i] = list[i];

 	else rtn = pointer;


 this[etype] = newList;

 return rtn;

	};



	EventQueue.prototype.handleEvent = function(e){


 var rtn = true;

 for(var i = 0, len = this[e].length; i < len; i++){

  this.tempFunction = this[e][i];

  if(rtn != false)	

  	rtn = this.tempFunction();

 	}

 return rtn;

	};


	EventQueue.prototype.addToPool = function(){

 if(!EventQueue.list[this.id])

 	EventQueue.list[this.id] = this;

	};



	EventQueue.EventHandler = function EventHandler(wrapper, etype){

 this.etype = etype;

 this.length = 0;

 this.id = wrapper.id;

 wrapper.el[etype] = new Function("return EventQueue.fireEvent('"+wrapper.id+"', '"+etype+"')");

	};


	EventQueue.fireEvent = function(id, e){	

 var wrapper = EventQueue.list[id];

 if(!wrapper) return false;

 var r = wrapper.handleEvent(e);

 return r;


	};

	EventQueue.EventHandler.prototype.toString = function toString(){

 return this.id +"." +this.etype;

	};


	EventQueue.list = new Object;


}


function buildCookie(id)

{

	var _id=id;

	var handler=function()

	{

 Cookie(_id);

	};

	if(window.addEventListener)

 window.addEventListener("unload",handler,false);

	else if(window.attachEvent)

 window.attachEvent("onunload",handler);

	else if(document.write)

	{

 if(!window.id)

 	window.id="window";

 var contentPane=(window.contentPane?window.contentPane:new EventQueue(window))

 contentPane.addEventListener("onunload",handler);

	}

}


function getCookie(id)

{

	var dc=document.cookie;

	var prefix=id+"=";

	var begin=dc.lastIndexOf(prefix);

	if(begin==-1) 

 return null;

	var end=dc.indexOf(";",begin);

	if(end==-1) 

 end=dc.length;

	var activeButtons=unescape(dc.substring(begin+prefix.length,end));

	return(activeButtons!=null?activeButtons.split(","):[]);


}







currentBrowser = new function () {


	this.isSupported = function(){

 return typeof document.getElementsByTagName != "undefined"

 	&& typeof document.getElementById != "undefined";

	};


 var ua = navigator.userAgent;

 var OMNI = ua.indexOf("Omni") > 0;


 this.OP5 = /Opera [56]/.test(ua);

 this.OP7 = /Opera [7]/.test(ua);

 this.MAC = /Mac/.test(ua);


 if(!this.OP5 && !OMNI){

 	this.IE5 = /MSIE 5/.test(ua);

 	this.IE5_0 = /MSIE 5.0/.test(ua);

 	this.MOZ =/Gecko/.test(ua);

 	this.MAC_IE5 = this.MAC && this.IE5;

 	this.IE6 = /MSIE 6/.test(ua);

 	this.KONQUEROR = /Konqueror/.test(ua);

 } 

};



function getRegExp(token, flag){



	var x = regExpArr[token];

	if(!x)

 x = regExpArr[token] = new RegExp("(^|\\s)"+token+"($|\\s)", flag);

	return x;

}


function hasPattern(string, pattern){

	return getRegExp(pattern,"").test(string);

};



function getChildrenByClass(parent, className){


	var collection = parent.childNodes;

	var returnedCollection = [];

	var exp = getRegExp(className,"");


	for(var i = 0, counter = 0; i < collection.length; i++)

 if(exp.test(collection[i].className))

 	returnedCollection[counter++] = collection[i];


	return returnedCollection;

}




function getChildrenByClassByTagname(parent, tagName, className){

	var returnedCollection = [];

	try{


	var exp = getRegExp(className,"");


	var collection = (tagName == "*" && parent.all) ?

 parent.all : parent.getElementsByTagName(tagName);


	if(className=="labelDown")

	{

 var str;

 for(j=0;j<collection.length;j++)

 	str += "\ncollection["+j+"]="+collection[j].parentNode.id+" className '"+collection[j].className+"'";

 //alert("collection.length: "+collection.length+" klass "+className+" \n"+str);

 str="";


 eli = /labelDown$/i;


 for(j = 0, counter = 0; j < collection.length; j++)

 {

 	if(eli.test(collection[j].className))//=="buttonlabel labelDown")

 	{

  returnedCollection[counter++] = collection[j];

  //alert("returnedCollection["+(counter-1)+"] = "+ collection[j]);

 	}

 }

	}

	else

	{

 for(var i = 0, counter = 0; i < collection.length; i++)

 {

 	if(exp.test(collection[i].className))

  returnedCollection[counter++] = collection[i];	}

 }

	return returnedCollection;

	}

	catch(x){	alert("parent = "+ parent +" tagName = "+ tagName+" className = "+klass);throw x;

}

}



function getParentByClass(el, className) {


	if(el == null)

 return null;

	var exp = getRegExp(className,"");


	el = (el.length>0)?el[0]:el;	// debug


	for(var parent = el.parentNode;parent != null;){


 if( exp.test(parent.className) )

 	return parent;


 parent = parent.parentNode;

	}

	return null;

}




function removeClassName(el, className){

	el.className = el.className.replace(getRegExp(className, "g")," ").del();

}


function repaintElement(el){

	el.style.visibility = 'hidden';

	el.style.visibility = 'visible';

}





if(!String.prototype.del)

	String.prototype.del = function(){ 	

 var tmp = this.replace(/^\s+|\s+$/g, "");

 return tmp.replace(/\s\s+/g, " ");

};




if(!Array.prototype.gah)

	Array.prototype.gah = function() {

    this.reverse();

    for(var i=arguments.length-1; i > -1; i--)

      this[this.length] = arguments[i];

    this.reverse();

    return this.length;

	};








function switchMenu(el)

{

	if(currentBrowser.OP5||currentBrowser.NS4)

 return;

	var l=CategoryButton.getButton(el);

	if(l.isDepressed)

	{

 if(params.PATH_ONLY||l.menu.container.activeMenu==l.menu)

 {

 	l.menu.registerEraseMenu();

 	l.menu.container.activeMenu=null;

 }

	}

	else

	{

 if(params.PATH_ONLY||l.menu.container.activeMenu==null )

 {

 	l.menu.registerDisplayMenu();

 	l.menu.container.activeMenu=l.menu;

 }

 else

 {

 	l.menu.container.activeMenu.registerEraseMenu();


  l.menu.registerDisplayMenu();

  l.menu.container.activeMenu=l.menu;


 }

	}

}


function buildTree(bId)

{

	if(!window.switchMenu||currentBrowser.OP5)

 return;

	var button=document.getElementById(bId);

	if(!button)return;var parentMenuEl=getParentByClass(button,"menu");

 if(parentMenuEl!=null)

 {

 	var bId=parentMenuEl.id.replace(/Menu$/,"");

 	buildTree(bId);

 }

 var l=CategoryButton.getButton(getChildrenByClassByTagname(button,"*","buttonlabel")[0]);

 if(!l.isDepressed)

 {

 	switchMenu(l.el);

 	l.isDepressed=true;

 }

}


function mouseOver(el)

{

	window.status="Kategorie ?ffnen";

	el.parentNode.id;

	if(hasPattern(el.className,"labelHover"))

 return;

	el.className+=" labelHover";

	var l=CategoryButton.getButton(el);

	var icon=l.icon;

	if(icon!=null)

 icon.src=l.isDepressed?params.OPEN_PIC:params.CLOSE_PIC;

}


function mouseOff(el)

{

	window.status=window.defaultStatus;

	removeClassName(el,"labelHover");

	var l=CategoryButton.getButton(el);

	var icon=l.icon;

	if(icon!=null)

 icon.src=l.isDepressed?params.OPEN_PIC:params.CLOSE_PIC;

}


if(typeof document.getElementsByTagName=="undefined"||currentBrowser.OP5)

	mouseOver=mouseOff=function(){};


	CategoryButton=function(el,category)

 	{

  this.el=el;

  this.category=category;

  this.menu=new CategoryMenu(document.getElementById(this.category+"Menu"),this);


  el = (el.length>0)?el[0]:el;	// debug


  var icons=el.getElementsByTagName("img");

  this.icon=(icons.length>0)?icons[0]:null;

  this.isIcon=false;

  if(el.tagName.toLowerCase()=="img")

  {

  	this.isIcon=true;

  	this.icon=el;

  }

  this.isDepressed=false;

 	};


CategoryButton.getButton=function(el)

  {

  	var buttonId=getParentByClass(el,"button").id;

  	var m=MenuArr[buttonId];

  	return(m!=null)?m.ownerButton:new CategoryButton(el,buttonId);

  };


CategoryButton.prototype.setButtonClosed=function()

    {

    	if(this.isIcon)

     return void(this.icon.src=params.CLOSE_PIC);

    	removeClassName(this.el,"labelDown");

    	if(this.icon!=null)

     this.icon.src=params.CLOSE_PIC;

    };


CategoryMenu=function(el,l)

	{

 this.ownerButton=l;

 this.id=l.category;

 this.el=el;

 this.items=getChildrenByClass(el,"menuNode");

 this.items.gah(el);

 this.allItems=getChildrenByClassByTagname(el,"*","menuNode");

 if(this.allItems.length==0)

 	this.allItems=getChildrenByClassByTagname(el,"div","menuNode");

 this.allItems.gah(el);

 this.cur=0;this._root=null;this.container=this.getContainer();

 this.activeMenu=null;

 this.menuInCue=null;

 MenuArr[this.id]=this;

	};



CategoryMenu.getInstance=function(id)

  {

  	var menu=MenuArr[id];

  	if(menu==null)

   menu=CategoryButton.getButton(getChildrenByClassByTagname(document.getElementById(id),"*","buttonlabel")).menu;

  	return menu;

  };


CategoryMenu.prototype=

{

  registerDisplayMenu:function()

   {

   	if(this.opening)

    return;

   	if(this.ownerButton.icon!=null)

    this.ownerButton.icon.src=params.OPEN_PIC;

   	if(this.closing)

   	{

    this.unregisterEraseMenu();

    if(this.itemsToClose)

    {

    	this.itemsToOpen=this.itemsToClose.reverse();

    	this.cur=this.itemsToClose.length-this.cur;

    }

   	}

   	else

   	{

    this.cur=0;this.itemsToOpen=new Array();

    if(this.itemsToClose)

    	this.itemsToOpen=this.itemsToClose.reverse();

    else

    	this.itemsToOpen=this.items;

    if(!this.ownerButton.isIcon)

    	this.ownerButton.el.className+=" labelDown";

   	}

   	this.closing=false;

   	this.opening=true;

   	if(this.itemsToOpen[0]!=this.el)

    this.itemsToOpen.reverse();

   	this.pat=setInterval("MenuArr."+this.id+".display()",params.TIME_DELAY);

   	this.ownerButton.isDepressed=true;

   }


  ,registerEraseMenu:function()

  {

  	if(this.closing)

   return;

  	if(this.opening)

  	{

   this.unregisterDisplayMenu();

  	}

  	else

  	{

   this.opening=false;

   this.cur=0;

   this.itemsToClose=new Array();

   for(var i=this.allItems.length-1,counter=0;i>0;i--)

   	if(this.allItems[i].style.display=="block")

   this.itemsToClose[counter++]=this.allItems[i];

  	}

  	this.itemsToClose[this.itemsToClose.length]=this.el;

  	this.pat=setInterval("MenuArr."+this.id+".erase()",params.TIME_DELAY);

  	this.closing=true;

  	this.ownerButton.isDepressed=false;

  }

  ,display:function()

  {

  	this.itemsToOpen[this.cur].style.display="block";

  	if(++this.cur==this.itemsToOpen.length)

   this.unregisterDisplayMenu();

  }

  ,erase:function()

  {

  	this.itemsToClose[this.cur].style.display="none";

  	if(++this.cur>=this.itemsToClose.length)

   this.unregisterEraseMenu();

  }

  ,unregisterDisplayMenu:function()

  {

  	clearInterval(this.pat);

  	this.opening=false;

  	this.itemsToClose=this.itemsToOpen.reverse();

  	this.cur=this.itemsToOpen.length-this.cur;

  	if(!params.PATH_ONLY&&this.container.activeMenu!=this)

   this.registerEraseMenu();

  	this.container.activeMenu=this;

  }

  ,unregisterEraseMenu:function()

  {

  	clearInterval(this.pat);

  	this.closing=false;

  	if(this.cur>=this.itemsToClose.length)

   this.ownerButton.setButtonClosed();


   this.menuInCue=null;

   if(currentBrowser.IE6)

   setTimeout("repaintElement(document.getElementById('"+this.el.id+"'));",50);

  }

  ,getContainer:function()

  {

  	var parentMenuElement=getParentByClass(this.el,"menu");

  	if(parentMenuElement!=null)

   return CategoryMenu.getInstance(parentMenuElement.id.replace(/Menu$/,""));

  	if(!this._root)

  	{

   var rt=getParentByClass(this.el,"root");

   if(!rt)

   	rt=document.body;

   if(!rt.id)

   	rt.id="AnimTree_"+Math.round(Math.random()* 1E5);

   this._root=Paths[rt.id];

   if(this._root==null)

   	this._root=new TreeRoot(rt);

   return this._root;

  	}

  }

};


TreeRoot=function(el)

{

	this.el=el;

	this.activeMenu=null;

	this.id=el.id;

	Paths[this.id]=this;

};



if(document.getElementById&&!currentBrowser.OP5&&!window.Tree_inited)

{

	document.writeln("<style type='text/css'>.menu,.menuNode{display:none}</style>");

	window.Tree_inited=true;

}

naja w?re nice wenn ihr mir helfen k?nntet ! ... dann k?nnten wir dat auch wenns fertig ist in dl bereich reinbekommen.

techway · September 21, 2004

Hey,

also eins kann ich dir sagen,

du musst die funktionsaufrufe von oscommerce anpassen, ein beispiel:

aus tep_db_query wird xtc_db_query

aus tep_db_fetch_array wird xtc_db_fetch_array

aus tep_has_category_subcategories wird xtc_has_category_subcategories

usw...

so habe ich zumindest damals beim coolmenu angefangen :i:

MFG

TechWay

ut2k3 · September 22, 2004

Passt die Datei jetzt so


<? 

	define(dynTreePath,"classs/"); //pfad von index -oder default.php zum classs Verzeichnis


?>


<tr>

 <td>

	<style type="text/css">

 @import "<? echo dynTreePath; ?>classs.css";

	</style>

	<script src="<? echo dynTreePath; ?>classs.js" type="text/javascript"></script>

<?


	function getChar($int,$times=1)

	{

 $str = '';

 for($i=0;$i<$times;$i++)

 	$str .= chr($int);

 return $str;

	}


	function getcPath($categoryId,$cPath='')

	{

 if($categoryId==0)

 	return $cPath;


 if($cPath!='')	

 	$cPath = $categoryId.'_'.$cPath;

 else 

 	$cPath = $categoryId;


 $parentQry = xtc_db_query("select parent_id from categories where categories_status = '1' and categories_id=".$categoryId);

 $parent = xtc_db_fetch_array($parentQry);


 return getcPath($parent['parent_id'],$cPath); //recursion


	}


	function isFirstLevel($cId)

	{

 $tmpQry = xtc_db_query("select categories_id from categories where categories_status = '1' and parent_id=0");

 while($row = xtc_db_fetch_array($tmpQry))

 	if($row['categories_id']==$cId)

  return true;

 return false;

	}


	function buildCategoryMenue($parentId,$gapH,&$html)

	{	

 global $languages_id,$currCatId;


 if($parentId!=0) 

 {



 	++$gapH; // f?r formatierung	//<span class="buttonlabel" onclick="toggleMenu(this)" onmouseover="buttonOver(this)" onmouseout="buttonOff(this)"> 



 	$catNameQry = xtc_db_query("select categories_name from categories_description where categories_id=".$parentId." and language_id=".$languages_id);

 	$catName = xtc_db_fetch_array($catNameQry);



 	$html .= '

   	'.getChar(9,$gapH).'<div id="div_'.getcPath($parentId).'" '.'class="button'.(isFirstLevel($parentId)?'':' menuNode').'">

   	'.getChar(9,$gapH).' <span class="buttonlabel" onclick="switchMenu(this)" onmouseover="mouseOver(this)" onmouseout="mouseOff(this)">

   	'.getChar(9,$gapH).'<img src="'.dynTreePath.'plus2.gif" title="Kategorie ?ffnen" alt="*"></span>'.'<a href="'.HTTP_SERVER.DIR_WS_CATALOG.FILENAME_DEFAULT.'?cPath='.getcPath($parentId).'">'.($currCatId==$parentId?'<b>'.$catName["categories_name"].'</b>':$catName["categories_name"]).'

  	'.getChar(9,$gapH).'	</a>

  	'.getChar(9,$gapH).'</div>';

 	$html .= '

  	'.getChar(9,$gapH).'<div class="menu" id="div_'.getcPath($parentId).'Menu">';	



 }

     //"select categories_id from categories where parent_id=".$parentId);

 $subCategoriesQry = xtc_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_status = '1' and c.parent_id = ".$parentId." and c.categories_id = cd.categories_id and cd.language_id='".$languages_id."' order by sort_order, cd.categories_name");


 unset($row);

 while($row = xtc_db_fetch_array($subCategoriesQry))

 {

 	if(xtc_has_category_subcategories($row['categories_id'])) 	

  buildCategoryMenue($row['categories_id'],$gapH,$html); //recursion

 	else 

 	{	

  $cNameQry = xtc_db_query("select categories_name from categories_description where categories_id=".$row["categories_id"]);

  $cName =	xtc_db_fetch_array($cNameQry);

  $html .= '

   	'.getChar(9,$gapH).'<div class="menuNode">

    '.getChar(9,$gapH).'<a href="'.HTTP_SERVER.DIR_WS_CATALOG.FILENAME_DEFAULT.'?cPath='.getcPath($row['categories_id']).'">'.($currCatId==$row['categories_id']?'<b>'.$cName['categories_name'].'</b>':$cName['categories_name']).'</a>

   	'.getChar(9,$gapH).'</div>';  	

 	}	


 }


 if($parentId!=0)

 {

 	$html .= '

   	'.getChar(9,$gapH).'</div>';

 }


	}


	$info_box_contents = array();

 	$info_box_contents[] = array('align' => 'left',

                 'text' => BOX_HEADING_CATEGORIES);


 	new infoBoxHeading($info_box_contents);


 	if(isset($cPath))

 	{

  preg_match("/([0-9]{1,3}$)/",$cPath,$tmp);

  $currCatId = $tmp[1];

  //echo '<script type="text/javascript">alert("'.$currCatId.'");</script>';

 	}

 	else 

  $currCatId = "0";




	$html = '	<div id="level" class="root">';//AnimTree

	buildCategoryMenue(0,0,$html);

	$html .= '	</div>';


	$info_box_contents = array();

 	$info_box_contents[] = array('align' => 'left',

                 'text' => $html);

  new infoBox($info_box_contents);

?>


	<script type="text/javascript">setCpath("div_<? echo $cPath; ?>");</script>


 </td>

</tr>

ut2k3 · September 22, 2004

wei? einer wie ich am besten die datei in xtc einbinde ?? weil da gibts im templateordner

(source/inc) xtc_show_category.inc.php

und (source /boxes/) categories.php

naja wei? nicht wie ich die am besten einbinden sollte.

Dhtml Menu Erstellen Aber Wie

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived