Dieses Beispiel zeigt die verschieden Arten von Tabulatoren. "Drag und Drop", Größenveränderung und Selektion werden von der Klasse "tab" automatisch unterstützt.

Wegen Rundungsfehlern, kann es in den diversen Vergrößerungs- und Verkleinerungs-Größen (STRG + und STRG -) zu Darstellungsfehlern kommen (per "float" positionierte Elemente, mit Größenangabe "width:'fit'", haben nicht genug Platz und "brechen um"). Dies dürfte in der normalen Vergrößerungsstufe 100% (STRG 0) nicht vorkommen. Interner Explorer und Opera kennt diese Probleme nicht, Webkit-Browser verrechnen sich nur bei Verkleinerung, was zumindest die Vermutung nahe legt, dass die Berechnungen prinzipiell korrekt sind und nur von den einzelnen Browsern falsch dargestellt werden, bzw. die Datenbasis die von den Browsern geliefert wird, nicht korrekt ist.

Beispiel:

Skript:

	app.newClass("imagebox","movedock",function(param,app,superClass){

		this.classType="imagebox";
		
		this.nonPrototype=function(param,$class$)
		{
			return {
				sizes:{
					image:{width:"100%",height:"100%",keepAspect:true}
				}
			};
		}
		this.contentOpenHTML=function(param,$class$)
		{
			return	[	
				{tagOpen:"IMG",$id$:"image",src:this.src||"gfx/dummy.gif"}
			]
		}

	})
	
	app.newClass("layoutbox","movedock",function(param,app,superClass){

		this.classType="layoutbox";
		//this.gfxBorder=true;
		
		this.nonPrototype=function(param,$class$)
		{
			return {
				resizable:{render:true}
			};
		}

	})
	
	var row=app.newObject("layoutbox.tab",{})
	row.addLastChild("layoutbox.imagebox.tab",{src:"gfx/frankenstein_gross.jpg",lable:"Frankenstein"})
	row.addLastChild("layoutbox.imagebox.tab",{src:"gfx/cookie_gross.jpg",lable:"Cookie"})
	row.addLastChild("layoutbox.imagebox.tab",{src:"gfx/bride_gross.jpg",lable:"Bride"})

	var row2=app.newObject("layoutbox.tab",{headsPosition:"bottom"})
	row2.addLastChild("layoutbox.imagebox.tab",{src:"gfx/frankenstein_gross.jpg",lable:"Frankenstein"})
	row2.addLastChild("layoutbox.imagebox.tab",{src:"gfx/cookie_gross.jpg",lable:"Cookie"})
	row2.addLastChild("layoutbox.imagebox.tab",{src:"gfx/bride_gross.jpg",lable:"Bride"})

	var row3=app.newObject("layoutbox.tab",{headsPosition:"left"})
	row3.addLastChild("layoutbox.imagebox.tab",{src:"gfx/frankenstein_gross.jpg",lable:"Frankenstein"})
	row3.addLastChild("layoutbox.imagebox.tab",{src:"gfx/cookie_gross.jpg",lable:"Cookie"})
	row3.addLastChild("layoutbox.imagebox.tab",{src:"gfx/bride_gross.jpg",lable:"Bride"})

	var row4=app.newObject("layoutbox.tab",{headsPosition:"right"})
	row4.addLastChild("layoutbox.imagebox.tab",{src:"gfx/frankenstein_gross.jpg",lable:"Frankenstein"})
	row4.addLastChild("layoutbox.imagebox.tab",{src:"gfx/cookie_gross.jpg",lable:"Cookie"})
	row4.addLastChild("layoutbox.imagebox.tab",{src:"gfx/bride_gross.jpg",lable:"Bride"})
	

CSS:

	.app-layoutbox-tab{
		min-width:50px;
		margin:4px;
	}

	.app-layoutbox-imagebox-tab .app-content{
		text-align:center;
		margin:5px;
	}

	.app-text{
		margin:5px;
		overflow:hidden;
	}
	.app-image{
		padding:5px;
		border:1px solid black;
	}