Andreas An: ul li Verschachtelung loke-a-like Mac Ordneransicht und "js-cms"

Beitrag lesen

SELF-Forum

ul li Verschachtelung loke-a-like Mac Ordneransicht und "js-cms"

Andreas An
– Informationen zu den Bewertungsregeln

Ich habe die Probleme gelöst. Daher ein akzeptables "JS-CMS" geschaffen.

navigation.txt:

Menü  
	Untermenü  
		Untermenüpunkt=>http://www.google.de/  
	Untermenü II  
	Link=>http://selfhtml.org  
Menü II  
	UnterIImenü  
	UnterIImenüII

o.g wird in einen <iframe src="navigation.txt" style="display: none" onload="getlist(this.contentWindow.document.body.innerText);" /> geladen.

Dazu:

var nav=new Array();  
function getlist(source) {  
	var lines=source.split("\n");  
	var levels=new Array();  
	for(var l=0; l<lines.length; l++) {  
		var tabc=lines[l].split("\t");  
		while(levels.length>tabc.length-1)  
			levels.pop();  
		levels[tabc.length-1]=lines[l].slice(tabc.length-1, lines[l].lastIndexOf("=>"));  
		eval("nav[\""+levels.join("\"][\"")+"\"]="+(lines[l].lastIndexOf("=>")<0?"new Array()":"\""+lines[l].slice(lines[l].lastIndexOf("=>")+2, lines[l].length-1)+"\"")+";"); }}

Dazu kann via <body onload="document.getElementById('navigation').innerHTML=dolist(nav);">

mit

function dolist(list) {  
	var b="<ul>";  
	for(key in list) {  
		b+="<li"+(list[key].toString().lastIndexOf("://")>=0?"":" onclick=\"selectmenu(this)\"")+">"+(list[key].toString().lastIndexOf("://")>=0?"<a href=\""+list[key]+"\">"+key+"</a>":key)+dolist(list[key])+"</li>"; }  
	if(b!="<ul>") return b+"</ul>";  
	else return ""; }

die erstellte Liste in den o.g. <div id="navigation"></div> geschrieben werden.

In meinem Mac-Style-Fall sieht der <div id="navigation"></div> jedoch so aus: <div id="navigation"><div class="content"></div></div>

und ich lade die Liste so: <body onload="document.getElementById('navigation').childNodes[0].innerHTML=dolist(nav);">

Die bei Klick auf einen Link ausgeführte Funktion selectmenu ist so definiert:

function selectmenu(li) {  
	var obj=li;  
	while(obj.className!="folder") {  
		obj=obj.parentNode; }  
	while(obj.nextSibling) {  
		obj.nextSibling.removeNode(true); }  
	obj.parentNode.innerHTML+="<div class=\"folder\">"+(li.getElementsByTagName("ul").length>0?li.getElementsByTagName("ul")[0].outerHTML:"<ul><li>kein Inhalt</li></ul>")+"</div>";  
	document.getElementById("navigation").scrollLeft=1000000; }

Dazu noch ein wenig css:

#navigation { width: 100%; height: 380px; overflow-x: scroll; white-space: nowrap; }  
#navigation .folder { width: 250px; height: 364px; overflow-y: auto; border-left: 1px dotted #aaa; display: inline; }  
#navigation .folder ul { margin: 0px; padding: 0px; }  
#navigation .folder ul li { list-style: none; margin: 0px; padding: 5px; border-bottom: 1px dotted #008; }  
#navigation .folder ul li ul { display: none; }

In diesem Fall aufgrund einer Intranet-Lösung nur für den IE gemacht *schäm*. Jeder DAU kann die navigation.txt bearbeiten. Die Struktur ist simpel und einfach zu benutzen.

Ich hoffe solche Lösungen stoßen auf Interesse. Für Kritik bin ich empfänglich. Optimierungsansätze sind ebenso willkommen.

Beitrag melden
–
Informationen zu den Bewertungsregeln