@@ -12,126 +12,68 @@
< script src ="../../ui/jquery.ui.position.js "> </ script >
< link rel ="stylesheet " href ="../demos.css ">
< style >
# parent {
width : 60% ;
height : 40px ;
margin : 10px auto;
padding : 5px ;
border : 1px solid # 777
background-color : # fbca93
text-align : center;
body {
margin : 0 ;
padding : 0 ;
}
.positionable {
position : absolute;
display : block;
right : 0 ;
bottom : 0 ;
background-color : # bcd5e6
text-align : center;
body > div [style *= 'display' ] {
/* Workaround */
/* position: absolute; */
}
# positionable1 {
width : 75px ;
height : 75px ;
.blue {
background : blue;
float : left;
width : 100px ;
}
# positionable2 {
width : 120px ;
height : 40px ;
.red {
background : red;
float : left;
overflow-y : hidden;
}
select , input {
margin-left : 15px ;
.content {
width : 2000px ;
height : 400px ;
border : 2px solid white;
}
# uiPosition {
width : 100px ;
height : 100px ;
background : # ccc
}
</ style >
< script >
$ ( function ( ) {
function position ( ) {
$ ( ".positionable" ) . position ( {
of : $ ( "#parent" ) ,
my : $ ( "#my_horizontal" ) . val ( ) + " " + $ ( "#my_vertical" ) . val ( ) ,
at : $ ( "#at_horizontal" ) . val ( ) + " " + $ ( "#at_vertical" ) . val ( ) ,
collision : $ ( "#collision_horizontal" ) . val ( ) + " " + $ ( "#collision_vertical" ) . val ( )
} ) ;
}
$ ( ".positionable" ) . css ( "opacity" , 0.5 ) ;
$ ( "select, input" ) . bind ( "click keyup change" , position ) ;
$ ( "#parent" ) . draggable ( {
drag : position
$ ( "#redBlock" ) . css ( {
width : $ ( window ) . width ( ) - $ ( "#blueBlock" ) . width ( )
} ) ;
$ ( ".block" ) . css ( {
height : $ ( window ) . height ( )
} ) ;
position ( ) ;
$ ( "button" ) . on ( 'click' , function ( e ) {
$ ( "#uiPosition" )
. position ( {
my : "left top" ,
at : "left bottom" ,
of : e . target ,
within : $ ( "#redBlock" ) ,
collision : "flip"
} ) ;
} ) ;
} ) ;
</ script >
</ head >
< body >
< div id ="parent ">
< p >
This is the position parent element.
</ p >
</ div >
< div class ="positionable " id ="positionable1 ">
< p >
to position
</ p >
</ div >
< div class ="positionable " id ="positionable2 ">
< p >
to position 2
</ p >
</ div >
< div style ="padding: 20px; margin-top: 75px; ">
position...
< div style ="padding-bottom: 20px; ">
< b > my:</ b >
< select id ="my_horizontal ">
< option value ="left "> left</ option >
< option value ="center "> center</ option >
< option value ="right "> right</ option >
</ select >
< select id ="my_vertical ">
< option value ="top "> top</ option >
< option value ="center "> center</ option >
< option value ="bottom "> bottom</ option >
</ select >
< div class ="block blue " id ="blueBlock "> </ div >
< div class ="block red " id ="redBlock ">
< div class ="content ">
< button > Position</ button >
</ div >
</ div >
< div style ="padding-bottom: 20px; ">
< b > at:</ b >
< select id ="at_horizontal ">
< option value ="left "> left</ option >
< option value ="center "> center</ option >
< option value ="right "> right</ option >
</ select >
< select id ="at_vertical ">
< option value ="top "> top</ option >
< option value ="center "> center</ option >
< option value ="bottom "> bottom</ option >
</ select >
</ div >
< div style ="padding-bottom: 20px; ">
< b > collision:</ b >
< select id ="collision_horizontal ">
< option value ="flip "> flip</ option >
< option value ="fit "> fit</ option >
< option value ="flipfit "> flipfit</ option >
< option value ="none "> none</ option >
</ select >
< select id ="collision_vertical ">
< option value ="flip "> flip</ option >
< option value ="fit "> fit</ option >
< option value ="flipfit "> flipfit</ option >
< option value ="none "> none</ option >
</ select >
</ div >
</ div >
< div class ="demo-description ">
< p > Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
< br > Drag around the parent element to see collision detection in action.</ p >
</ div >
< div id ="uiPosition "> </ div >
</ body >
</ html >
