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:
inclose:auto
inclose:"move"
inclose:"walk"
right:'parentLeft'
oder right:'elementLeft'
) wird: "linke Seite relativ zur linken Seite" wenn die linke Seite des "Rahmens" überschritten würde.inclose:"step"
right:'parentLeft'
oder right:'elementLeft'
) wird: "linke Seite relativ zur linken Seite" wenn die linke Seite des "Rahmens" überschritten würde. Im Gegensatz zu inclose:'walk'
findet hier nur "ein Schritt" statt. Zusätzlich machen relativ zentrierte Elemente, einen Sprung zu einer Position außerhalb des Elements, zu dem sie relativ positioniert sind.inclose:"jump"
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:
incloseBy:"parent"
incloseBy:"root"
incloseBy:"rootElement"
incloseBy:"window"
incloseBy:"element"
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.
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"}
})
.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;
}