API jQuery UI - .position()

Catégorie

Redéfinitions de méthodes | Méthodes | Utilitaires

Utilisation

Description :Positionner un élément par rapport à un autre élément.

Retourne :jQuery

添加于版本:1.8

.position( options )

Parameters Type Description
options Object
  • my(Par défaut :"center"）
    Type : String
    Description : Définitsur l'élément positionnéla position à aligner avec l'élément cible : alignement « horizontal vertical ». Une seule valeur, telle que « right », sera normalisée en « right center », et « top » sera normalisée en « center top » (conventions CSS ci-dessous). Valeurs horizontales acceptables : « left », « center », « right ». Valeurs verticales acceptables : « top », « center », « bottom ». Par exemple, « left top » ou « center center ». Chaque dimension peut également contenir des décalages, en pixels ou en pourcentages, tels que « right+10 top-25% ». Les décalages en pourcentage sont relatifs à l'élément positionné.
  • at(Par défaut :"center"）
    Type : String
    Description : Définitsur l'élément ciblela position à laquelle aligner l'élément positionné : alignement « horizontal vertical ». Pour plus de détails, veuillez consulter les valeurs possibles de l'option my. Les décalages en pourcentage sont relatifs à l'élément cible.
  • of(Par défaut :null）
    Type : Selector ou Element ou jQuery ou Event
    Description : L'élément à positionner. Si vous fournissez un sélecteur ou un objet jQuery, le premier élément correspondant sera utilisé. Si vous fournissez un objet Event, les propriétés pageX et pageY seront utilisées, comme « #top-menu ».
  • collision(Par défaut :"flip"）
    Type : String
    Description : Lorsque l'élément positionné déborde de la fenêtre dans une direction, déplacez-le vers une position alternative. Comme les options my et at, cette option accepte une valeur unique ou une paire de valeurs horizontales/verticales. Par exemple : « flip », « fit », « fit flip », « fit none ».
    • "flip" : Retourne l'élément du côté opposé de la cible et relance la détection de collision pour voir si l'élément s'adapte. Le côté qui permet de rendre visible la plus grande partie de l'élément sera utilisé.
    • "fit" : Éloigne l'élément du bord de la fenêtre.
    • "flipfit" : Appliquez d'abord la logique de flip, en plaçant l'élément du côté qui permet de rendre visible la plus grande partie de l'élément. Appliquez ensuite la logique de fit, en garantissant que la plus grande partie possible de l'élément est visible.
    • "none" : N'appliquez aucune détection de collision.
  • using(Par défaut :null）
    Type : Function()
    Description : Lorsque cette option est spécifiée, le paramétrage réel de la propriété est délégué à ce callback. Il accepte deux arguments : le premier est un hash des valeurs de position top et left, qui peut être transmis à .css() ou .animate() ; le second fournit des informations sur la position et les dimensions des deux éléments, et calcule également leurs positions relatives. Les deux, target et element, ont les propriétés suivantes : element, left, top, width, height. De plus, il y a horizontal, vertical et important, qui offrent douze directions possibles, telles que { horizontal: "center", vertical: "left", important: "horizontal" }.
  • within(Par défaut :window）
    Type : Selector ou Element ou jQuery
    Description : L'élément dans lequel effectuer le positionnement, ce qui affecte la détection de collision. Si vous fournissez un Selector ou un objet jQuery, le premier élément correspondant sera utilisé.

jQuery UI .position()La méthode vous permet de positionner un élément par rapport à la fenêtre, au document, à un autre élément ou au curseur/souris, sans tenir compte du décalage par rapport à l'élément parent.

Remarque : jQuery UI ne prend pas en charge le positionnement des éléments masqués.

Il s'agit d'un plugin jQuery autonome qui n'a aucune dépendance envers d'autres composants jQuery UI.

Ce plugin étend la méthode intégrée.position()de jQuery. Si jQuery UI n'est pas chargé, l'appel de la.position()la méthode n'échouera pas directement, car la méthode existe dans jQuery. Cependant, le comportement attendu ne se produira pas.

Exemples

Un exemple simple de Position jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() 实例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>
 
<script>
$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$( document ).mousemove(function( event ) {
  $( "#position4" ).position({
    my: "left+3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</script>
 
</body>
</html>

Autres extensions