Das Attribut inclose dient dazu, relativ positionierte Elemente, innerhalb eines bestimmten Bereichs zu halten (incloseBy), wenn das Element, auf das sich die Positionierung bezieht, bewegt wird bzw. die relative Positionsangabe zu einer Überlappung führt. In diesem Beispiel, ist dieser Bereich der "Rahmen" des Beispiels resp. das "Root"-Objekt der Beispiel-Applikation.

Insgesammt gibt es 5 Methoden die unterschiedlich auf "Bereichsübertretungen" reagiern:

Die Attribute inclose und incloseBy können innerhalb eines Größen-Objektes, oder innerhlab eines "Attribut-Objektes" gesetzt werden.

Für inclosBy existieren 5 mögliche Werte:

Die originalen Positions-Angaben werden nicht verändert, das positionierte Element wird also immer die angegebene Position einnehmen, wenn der zur Verfügung stehende Platz dafür ausreicht.

Das blaue Rechteck kann mit der Maus verschoben werden.

Beispiel:

Skript:


	app.newClass("positionDemo","movedock",function(param,app,superClass){
	
		this.classType="positionDemo"

		this.nonPrototype=function(param,$this$)
		{
			return {
				sizes:{
					left_left_top_top:{
						left:"parentLeft",top:"parentTop"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,left_left_top_center:{
						left:"parentLeft",top:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,left_left_top_bottom:{
						left:"parentLeft",top:"parentBottom"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,left_right_top_top:{
						left:"parentRight",top:"parentTop"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,left_right_top_center:{
						left:"parentRight",top:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,left_right_top_bottom:{
						left:"parentRight",top:"parentBottom"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_top_right_right:{
						top:"parentTop",right:"parentRight"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_top_right_center:{
						top:"parentTop",right:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_top_right_left:{
						top:"parentTop",right:"parentLeft"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_bottom_right_right:{
						top:"parentBottom",right:"parentRight"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_bottom_right_center:{
						top:"parentBottom",right:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,top_bottom_right_left:{
						top:"parentBottom",right:"parentLeft"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_right_bottom_bottom:{
						right:"parentRight",bottom:"parentBottom"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_right_bottom_center:{
						right:"parentRight",bottom:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_right_bottom_top:{
						right:"parentRight",bottom:"parentTop"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_left_bottom_bottom:{
						right:"parentLeft",bottom:"parentBottom"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_left_bottom_center:{
						right:"parentLeft",bottom:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,right_left_bottom_top:{
						right:"parentLeft",bottom:"parentTop"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_bottom_left_left:{
						bottom:"parentBottom",left:"parentLeft"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_bottom_left_center:{
						bottom:"parentBottom",left:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_bottom_left_right:{
						bottom:"parentBottom",left:"parentRight"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_top_left_left:{
						bottom:"parentTop",left:"parentLeft"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_top_left_center:{
						bottom:"parentTop",left:"parentCenter"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
					,bottom_top_left_right:{
						bottom:"parentTop",left:"parentRight"
						,width:"25%",height:"25%"
						,position:"absolute",inclose:"move",incloseBy:"root"
					}
				}
				,move:{}
			}
		}
		
		this.contentOpenHTML=function(param,$this$)
		{
			return [
				{tagName:"div",id:"left_left_top_top",className:"border",children:["left:left<BR>top:top"]}
				,{tagName:"div",id:"left_left_top_center",className:"border",children:["left:left<BR>top:center"]}
				,{tagName:"div",id:"left_left_top_bottom",className:"border",children:["left:left<BR>top:bottom"]}
				,{tagName:"div",id:"left_right_top_top",className:"border",children:["left:right<BR>top:top"]}
				,{tagName:"div",id:"left_right_top_center",className:"border",children:["left:right<BR>top:center"]}
				,{tagName:"div",id:"left_right_top_bottom",className:"border",children:["left:right<BR>top:bottom"]}
				,{tagName:"div",id:"top_top_right_right",className:"border",children:["top:top<BR>right:right"]}
				,{tagName:"div",id:"top_top_right_center",className:"border",children:["top:top<BR>right:center"]}
				,{tagName:"div",id:"top_top_right_left",className:"border",children:["top:top<BR>right:left"]}
				,{tagName:"div",id:"top_bottom_right_right",className:"border",children:["top:bottom<BR>right:right"]}
				,{tagName:"div",id:"top_bottom_right_center",className:"border",children:["top:bottom<BR>right:center"]}
				,{tagName:"div",id:"top_bottom_right_left",className:"border",children:["top:bottom<BR>right:left"]}
				,{tagName:"div",id:"right_right_bottom_bottom",className:"border",children:["right:right<BR>bottom:bottom"]}
				,{tagName:"div",id:"right_right_bottom_center",className:"border",children:["right:right<BR>bottom:center"]}
				,{tagName:"div",id:"right_right_bottom_top",className:"border",children:["right:right<BR>bottom:top"]}
				,{tagName:"div",id:"right_left_bottom_bottom",className:"border",children:["right:left<BR>bottom:bottom"]}
				,{tagName:"div",id:"right_left_bottom_center",className:"border",children:["right:left<BR>bottom:center"]}
				,{tagName:"div",id:"right_left_bottom_top",className:"border",children:["right:left<BR>bottom:top"]}
				,{tagName:"div",id:"bottom_bottom_left_left",className:"border",children:["bottom:bottom<BR>left:left"]}
				,{tagName:"div",id:"bottom_bottom_left_center",className:"border",children:["bottom:bottom<BR>left:center"]}
				,{tagName:"div",id:"bottom_bottom_left_right",className:"border",children:["bottom:bottom<BR>left:right"]}
				,{tagName:"div",id:"bottom_top_left_left",className:"border",children:["bottom:top<BR>left:left"]}
				,{tagName:"div",id:"bottom_top_left_center",className:"border",children:["bottom:top<BR>left:center"]}
				,{tagName:"div",id:"bottom_top_left_right",className:"border",children:["bottom:top<BR>left:right"]}
			];
		}
	
	})

	app.newObject("positionDemo",{
		size:{top:"parentCenter",left:"parentCenter",width:"50%",height:"50%",position:"absolute"}
	})
	

CSS:


	.app-positionDemo
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 2px solid #cccccc;
		background-color: #ffffff;
	}

	.app-positionDemo .app-content
	{
		background-color: steelblue;
	}

	.app-border
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 2px solid #cccccc;
		background-color: #ffffff;
	}