jQuery UI的定位工具Position
.position( options )
my (default: “center”) 确定被定位的元素, 使用自身的哪个位置去进行定位.
at (default: “center”) 确定被定位到的元素,使用哪个位置提供定位.
of (default: null) 确定被定位到的元素, of结合at,来给被定位的元素提供定位.
collision (default: “flip”) 当定位溢出的时候的处理方式, e.g., “flip”, “fit”, “fit flip”, “fit none”[如“翻转”，“适合”，“适应翻转”，“适合没有”。].
using (default: null) Type: Function(), 不是很明白
within (default: window) 不是很明白
my (default: “center”) 确定被定位的元素, 使用自身的哪个位置去进行定位.
at (default: “center”) 确定被定位到的元素,使用哪个位置提供定位.
of (default: null) 确定被定位到的元素, of结合at,来给被定位的元素提供定位.
collision (default: “flip”) 当定位溢出的时候的处理方式, e.g., “flip”, “fit”, “fit flip”, “fit none”[如“翻转”，“适合”，“适应翻转”，“适合没有”。].
using (default: null) Type: Function(), 不是很明白
within (default: window) 不是很明白
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
Html代码 <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Position - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #parent { width: 60%; height: 40px; margin: 10px auto; padding: 5px; border: 1px solid #777; background-color: #fbca93; text-align: center; } .positionable { position: absolute; display: block; right: 0; bottom: 0; background-color: #bcd5e6; text-align: center; } #positionable1 { width: 75px; height: 75px; } #positionable2 { width: 120px; height: 40px; } select, input { margin-left: 15px; } </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 }); position(); }); </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="middle">center</option> <option value="bottom">bottom</option> </select> </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="middle">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> </body> </html> |
