jQuery UI API - .position()

Kategorie

Methodenüberschreibungen | Methoden | Dienstprogramme

Nutzung

Beschreibung:Positioniert ein Element relativ zu einem anderen Element.

Gibt zurück:jQuery

Hinzugefügt in Version:1.8

.position( options )

Parameters Type Beschreibung
options Objekt
  • my(Standard:"center"）
    Typ: String
    Beschreibung: Definiertam positionierten Elementdie Position zur Ausrichtung am Zielelement: "horizontal vertikal"-Ausrichtung. Ein einzelner Wert wie "right" wird zu "right center" normalisiert, und "top" wird zu "center top" normalisiert (CSS-Konventionen unten). Zulässige horizontale Werte: "left", "center", "right". Zulässige vertikale Werte: "top", "center", "bottom". Zum Beispiel "left top" oder "center center". Jede Dimension kann auch Offsets in Pixeln oder Prozent enthalten, wie "right+10 top-25%". Prozent-Offsets sind relativ zum positionierten Element.
  • at(Standard:"center"）
    Typ: String
    Beschreibung: Definiertam Zielelementdie Position, an der das positionierte Element ausgerichtet werden soll: "horizontal vertikal"-Ausrichtung. Weitere Details finden Sie bei den möglichen Werten der Option my. Prozent-Offsets sind relativ zum Zielelement.
  • of(Standard:null）
    Typ: Selector oder Element oder jQuery oder Event
    Beschreibung: Das zu positionierende Element. Wenn Sie einen Selector oder ein jQuery-Objekt angeben, wird das erste passende Element verwendet. Wenn Sie ein Event-Objekt angeben, werden die Eigenschaften pageX und pageY verwendet, wie z. B. "#top-menu".
  • collision(Standard:"flip"）
    Typ: String
    Beschreibung: Wenn das positionierte Element in irgendeiner Richtung über das Fenster hinausragt, verschieben Sie es an eine alternative Position. Ähnlich wie bei den Optionen my und at akzeptiert diese Option einen einzelnen Wert oder ein Paar aus horizontalen/vertikalen Werten. Zum Beispiel: "flip", "fit", "fit flip", "fit none".
    • "flip": Das Element auf die gegenüberliegende Seite des Ziels klappen und die Kollisionserkennung erneut ausführen, um zu prüfen, ob das Element passt. Die Seite, die mehr vom Element sichtbar macht, wird verwendet.
    • "fit": Das Element vom Rand des Fensters wegbewegen.
    • "flipfit": Zuerst die Flip-Logik anwenden, wobei das Element auf der Seite platziert wird, die mehr vom Element sichtbar werden lässt. Dann die Fit-Logik anwenden, um sicherzustellen, dass so viel vom Element wie möglich sichtbar ist.
    • "none": Keine Kollisionserkennung anwenden.
  • using(Standard:null）
    Typ: Function()
    Beschreibung: Wenn diese Option angegeben wird, wird die eigentliche Eigenschaftseinstellung an diesen Callback delegiert. Er akzeptiert zwei Argumente: Das erste ist ein Hash der Positionswerte für top und left, der an .css() oder .animate() weitergegeben werden kann; das zweite liefert Feedback über die Position und Abmessungen beider Elemente und berechnet außerdem ihre relativen Positionen. Sowohl target als auch element haben die folgenden Eigenschaften: element, left, top, width, height. Darüber hinaus gibt es horizontal, vertical und important, die zwölf mögliche Richtungen bereitstellen, wie z. B. { horizontal: "center", vertical: "left", important: "horizontal" }.
  • within(Standard:window）
    Typ: Selector oder Element oder jQuery
    Beschreibung: Das Element, innerhalb dessen positioniert werden soll, was sich auf die Kollisionserkennung auswirkt. Wenn Sie einen Selector oder ein jQuery-Objekt angeben, wird das erste passende Element verwendet.

jQuery UI .position()Die Methode ermöglicht es Ihnen, ein Element relativ zum Fenster, Dokument, einem anderen Element oder dem Cursor/Maus zu positionieren, ohne den Versatz relativ zum übergeordneten Element zu berücksichtigen.

Hinweis: jQuery UI unterstützt die Positionierung ausgeblendeter Elemente nicht.

Dies ist ein eigenständiges jQuery-Plugin und hat keine Abhängigkeiten von anderen jQuery-UI-Komponenten.

Dieses Plugin erweitert die in jQuery integrierte.position()Methode. Wenn jQuery UI nicht geladen ist, wird beim Aufruf der.position()Methode nicht direkt fehl, weil die Methode in jQuery existiert. Das erwartete Verhalten tritt jedoch nicht auf.

Beispiele

Ein einfaches Beispiel für jQuery UI Position.

<!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>

Andere Erweiterungen