JqueryUI Position
In this chapter we shall see one of the utility methods of jqueryUi, the position() method. Aposition() method allows you to position an element with respect to another element or mouse event.
jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person. Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.
Syntax
Following is the syntax of the position() method:
.position( options )
Where options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned. Following table lists the different options that can be used with this method:
Option
Description
my
This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value is center.
at
This option is of type String and specifies the location of the target element against which to align the re-positioned elements. Takes the same values as the my option. By default its value is center.
of
This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.
collision
This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.
using
This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.
within
This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.
Example
Following example demontstrates the use ofposition method.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI position method Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement{
width: 300px;
height: 500px;
padding-top:50px;
}
</style>
<script>
$(function() {
// Position the dialogoffscreen to the left, but centered vertically
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right-10 top+10",
at: "right top",
of: "#targetElement"
});
$( document).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<div id="targetElement">
<div class="positionDiv" id="position1">Box 1</div>
<div class="positionDiv" id="position2">Box 2</div>
<div class="positionDiv" id="position3">Box 3</div>
<div class="positionDiv" id="position4">Box 4</div>
</div>
</body>
</html>
Let's save above code in an HTML filepositionmethodexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Box 1
Box 2
Box 3
Box 4
In this example we see that:
Box 1 is aligned to center (horizontally and vertically) of the div element.
Box 2is aligned to left top (horizontally and vertically) of the div element.
Box 3is displayed in the top right corner of the window, but leave some padding so that the message stands out more. This is done using the horizontal and vertical values of my or at.
For Box 4, the of value is set as an event object. This is an event associated with a pointer and moves with the mouse event.
ليست هناك تعليقات:
إرسال تعليق