JqueryUI - Position-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Position

In this chapter we shall see one of the utipty methods of jqueryUi, the position() method. The position() 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

The 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 psts the different options that can be used with this method −

Sr.No.	Option & Description
1	my This option specifies the location of the wrapped elements (the ones being re-positioned) to apgn with the target element or location. By default its value is center.
2	at This option is of type String and specifies the location of the target element against which to apgn the re-positioned elements. Takes the same values as the my option. By default its value is center.
3	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.
4	colpsion This option is of type String and specifies the rules to be appped when the positioned element extends beyond the window in any direction. By default its value is fpp.
5	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.
6	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 colpsion 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

The following example demontstrates the use of position method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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 dialog offscreen 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,
                  colpsion: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <span id = "targetElement">
         <span class = "positionDiv" id = "position1">Box 1</span>
         <span class = "positionDiv" id = "position2">Box 2</span>
         <span class = "positionDiv" id = "position3">Box 3</span>
         <span class = "positionDiv" id = "position4">Box 4</span>
      </span>
   </body>
</html>

Let us save the above code in an HTML file positionmethodexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −