JqueryUI-位置 


JqueryUI-位置


在本章中,我们将看到jqueryUi的一种实用方法,即position()方法。 position()方法允许您相对于另一个元素或鼠标事件定位一个元素。

jQuery UI以某种方式扩展了jQuery核心中的.position()方法,使您可以像自然向其他人描述元素一样描述如何定位元素。您无需处理数字和数学,而可以处理有意义的词(例如左右)和关系。

句法

以下是position()方法的语法-

.position( options )

其中options是Object类型的,并提供指定包装的元素如何放置的信息。下表列出了可以与该方法一起使用的不同选项

Sr.No. Option & Description
1 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.

Option – 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.

Two of these values are used to specify location: top, left, bottom, right, and center, separated by a space character, where the first value is the horizontal value, and the second the vertical. Whether the specified single value is considered horizontal or vertical depends upon which value you use (for example, top is taken as vertical, while right is horizontal).

Example

top, or bottom right.
2 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.

Option – 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.

Example

"right", or "left 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.

Option – 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.

Example

#top-menu
4 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.

Option – 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.

Accepts two (horizontal followed by vertical) of the following −

  • flip − Flips the element to the opposing side and runs collision detection again for fit. If neither side fits, center is used as a fallback.

  • fit − Keeps the element in the desired direction, but adjusts the position such that it will fit.

  • flipfit − First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.

  • none − Disables collision detection.

If a single value is specified, it applies to both directions.

Example

"flip", "fit", "fit flip", "fit none"
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.

Option – 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.

Example

{horizontal: "center", vertical: "left", important: "horizontal" }
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 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.

Option – 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.

下面的示例演示了位置方法的使用。

<meta charset="utf-8">
      <title>jQuery UI position method Example</title>
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/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,
                  collision: "fit"
               });
            });
         });
      </script>
   
   
   
      <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>
   

让我们将上面的代码保存在HTML文件positionmethodexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-

在这个例子中,我们看到-

  • 盒1被对准到div元件中心(水平和垂直)。

  • 盒2被对准到的div元素左边顶部(水平和垂直)。

  • 框3显示在窗口的右上角,但保留一些填充以使消息更加突出。使用myat的水平和垂直值来完成此操作。

  • 对于Box 4 ,将value of设置为事件对象。这是一个与指针关联的事件,并随着鼠标事件而移动。

0



error: 内容受到保护 !!