diff options
| author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-04-10 18:11:28 +0200 |
|---|---|---|
| committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-04-10 18:15:30 +0200 |
| commit | 479530bb61f3c40ef9360613a0a84baf1a14b87b (patch) | |
| tree | 2a4a41cbb894b6bd4e95ec269403b7616bdfea55 /tests/visual | |
| parent | 92c74818ff73ce6534a34fb3a83a0cb928c4bb3f (diff) | |
| download | jquery-ui-479530bb61f3c40ef9360613a0a84baf1a14b87b.tar.gz jquery-ui-479530bb61f3c40ef9360613a0a84baf1a14b87b.zip | |
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage
Diffstat (limited to 'tests/visual')
| -rw-r--r-- | tests/visual/position/position.html | 16 | ||||
| -rw-r--r-- | tests/visual/position/position_notification.html | 120 |
2 files changed, 132 insertions, 4 deletions
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index b9b769d9b..89d991231 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -17,16 +17,24 @@ $("ul").insertAfter(inputs); $(window).resize(function() { inputs.each(function() { - $(this).position({ + var input = $(this).position({ my: this.id.replace(/-/, " "), at: this.id.replace(/-/, " "), of: "#container", collision: "none" }); - $(this).next().menu().position({ + var menu = $(this).next().menu() + menu.position({ my: "left top+20", at: "left bottom", of: this, + using: function( position ) { + input.val(position.horizontal + " " + position.vertical) + $(this).offset( position ) + .removeClass("left right top bottom") + .addClass(position.horizontal) + .addClass(position.vertical); + } }); }); }).resize(); @@ -44,11 +52,11 @@ top: -22px; left: 5px; } - .ui-flipped-left:before { + .right:before { left: auto; right: 5px; } - .ui-flipped-top:before { + .bottom:before { content: "↓"; top: auto; bottom: -19px; diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_notification.html new file mode 100644 index 000000000..d87c506ca --- /dev/null +++ b/tests/visual/position/position_notification.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Position Visual Test: Default</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + var target = $("#target").position({ + my: "center", + at: "center", + of: window + }); + var element = $(".element"); + $.each([ + "center top-100", + "right+25 top-50", + "right+75 top", + "right+75 center", + "right+75 bottom", + "right+25 bottom+50", + "center bottom+100", + "left-25 bottom+50", + "left-75 bottom", + "left-75 center", + "left-75 top", + "left-25 top-50" + ], function(index, direction) { + element.clone().insertAfter(target).position({ + my: "center", + at: direction, + of: target, + using: function( position ) { + $(this).offset( position ); + $(this).text(position.horizontal + " " + position.vertical + " " + position.important) + $(this) + .removeClass("left right top bottom") + .addClass(position.horizontal) + .addClass(position.vertical) + .addClass(position.important); + } + }) + }); + element.remove(); + }); + </script> + <style> + #target, .element { + position: absolute; + border: 1px solid black; + border-radius: 5px; + width: 75px; + height: 25px; + padding: 5px; + } + #target { + height: 75px; + } + .element:before { + font-size: 12pt; + content: "↑"; + position: absolute; + top: -19px; + left: 5px; + } + .right:before { + left: auto; + right: 5px; + } + .bottom:before { + content: "↓"; + top: auto; + bottom: -19px; + } + .center:before { + left: 50%; + right: auto; + } + .middle:before { + top: 50%; + bottom: auto; + } + .horizontal:before { + height: 10px; + top: 50%; + margin-top: -8px; + bottom: auto; + left: -18px; + right: auto; + content: "←"; + } + .right.horizontal:before { + left: auto; + right: -18px; + content: "→"; + } + .bottom.horizontal:before { + top: auto; + bottom: 5px; + } + .top.horizontal:before { + top: 5px; + } + </style> +</head> +<body> + + <div id="target">all around me</div> + + <div class="element"></div> + +</body> +</html> |