📜  jQuery UI | position() 方法

📅  最后修改于: 2021-11-24 04:30:51             🧑  作者: Mango

jQuery UI框架为用户提供了许多实用功能,其中之一是position()方法。 position()方法有助于相对于页面中的任何目标元素定位任何元素,如窗口、任何父元素、文档或鼠标。它根据“顶部”、“左侧”、“右侧”和“底部”等属性描述任何元素的位置。
笔记:

  • 它不支持隐藏元素定位功能。
  • 只有子元素相对于任何其他元素或目标定位。

句法:

$(selector).position( options )

其中options是对象类型,它定义了元素相对于目标或父元素的定位方式。我们将只解释其中一些常用的:
选项:

  • my:它是字符串类型。此选项提及与父目标元素对齐所需的元素位置。它的默认值是中心。
  • at:它是字符串类型。此选项提及定位子元素的父目标元素的位置或位置。它的默认值是中心。
  • of:类型为选择器或父元素。此选项提及要对其定位的父元素或目标元素。它的默认值为null
  • 碰撞:它是字符串类型。此选项提及当定位元素超出文档窗口时应用的规则。默认值为翻转

jQuery UI 的链接:

示例 1:在下面的示例中,演示了基本的默认position()方法。 “divID1”和“divID2”固定在它们相对于父元素“mainDivID”的“my”和“at”位置。鼠标事件是为“divID3”处理的。该位置旨在围绕文档移动,在左侧和顶部保持 10 的间隙。

html


 

    
    
    jQuery UI position method
    
    
    
 
    
    

 

    

GeeksforGeeks

    jQuery UI position utility     
    
        
Position 1
        
Position 2
        
Position 3
    
 


html


 

    
    
    jQuery UI position method
    
    
    
 
    
    

 

    

GeeksforGeeks

    jQuery UI position method     
      
         

            This is the parent target element.         

      
      
         

            Change my position         

      
      
          
            Select "my" positions :                                   
        
            Select "at" positions :                                   
        
            Select collision options:                                   
    
   


输出:

示例 2:在以下示例中,代码位置方法与上述所有选项或参数一起演示。

html



 

    
    
    jQuery UI position method
    
    
    
 
    
    

 

    

GeeksforGeeks

    jQuery UI position method     
      
         

            This is the parent target element.         

      
      
         

            Change my position         

      
      
          
            Select "my" positions :                                   
        
            Select "at" positions :                                   
        
            Select collision options:                                   
    
   

输出: