Zu wissen, wie man Elemente positioniert, wo man sie haben möchte, ist eines der wichtigsten Werkzeuge im Werkzeugkasten eines Webdesigners. Das Verständnis des Seitenflusses, das Verständnis, dass alles eine Box ist, das Verständnis von Floats usw. Sobald die Grundlagen erlernt sind, ist eine häufige Frage für fortgeschrittene Designer, wie man Elemente relativ zu anderen Elementen positioniert. Die Standard-CSS-Lösung dafür ist die altbewährte absolute Positionierung innerhalb relativer Positionierung. Kurz gesagt, Sie können eine relative Positionierung (oder eigentlich jede nicht standardmäßige statische Positionierung) auf ein Element anwenden und dann Kindelemente davon innerhalb dieses Kontexts absolut positionieren. Oft funktioniert das wunderbar, aber es ist tatsächlich ziemlich eingeschränkt.
- Man ist gezwungen, einen anderen Positionierungswert als statisch zu verwenden, auch wenn er sonst nicht benötigt wird.
- Elemente, die basierend auf anderen positioniert werden sollen, müssen Kindelemente sein.
- Wenn das übergeordnete Element einen Überlaufwert benötigt, kann es umständlich werden.
Die jQuery UI bietet nun eine Funktion namens Position Utility, die das Positionieren von Elementen relativ zu anderen Elementen köstlich einfach macht! Schauen wir sie uns an.
Zuerst die Grundlagen
Wir werden hier jQuery und jQuery UI verwenden, daher gehen wir davon aus, dass Sie die jQuery- und jQuery-UI-Bibliotheken auf Ihrer Website laden.
<head>
...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
...
<script type="text/javascript">
$(function() {
// do stuff, yay!
});
</script>
</head>Die Grundlagen
Eines der schönen Dinge an jQuery und jQuery UI ist die fast satzartige Syntax. Ein-Wort-Funktionsnamen und Parameter, die wirklich verdeutlichen, was vor sich geht. Hier ist ein einfaches Beispiel.
$("#move-me").position({
"my": "right top",
"at": "left bottom",
"of": $("#thing")
});Vielleicht hilft eine kleine Grafik.
Das Coolste hierbei ist, dass es keine Voraussetzungen gibt, damit dies funktioniert. Das zu positionierende Element benötigt keinen speziellen CSS-Positionierungswert (oder muss kein Kindelement sein), das Element, gegen das positioniert wird, benötigt keinen speziellen CSS-Positionierungswert (oder irgendetwas anderes).
Alle Optionen
Hier ist die vollständige Liste. Nur noch ein paar Optionen mehr.
$('.positionable').position({
"my": "right top" // Horizontal then vertical, missing values default to center
"at": "left bottom" // Horizontal then vertical, missing values default to center
"of": $('#parent'), // Element to position against
"offset": "20 30" // Pixel values for offset, Horizontal then vertical, negative values OK
"collision": "fit flip" // What to do in case of
"bgiframe": true // Uses the bgiframe plugin if it is loaded and this is true
});Wir haben "my", "of" und "at" in den Grundlagen behandelt, aber die vollständige Palette von Parametern umfasst das Setzen eines Offsets, die Verwendung des bgiframe-Plugins (behebt einige IE z-index-Probleme) und Kollisionserkennung, die ich später behandeln werde.
Magic Zoom!
Ich dachte, ich baue ein kleines "Real-World"-Beispiel, wo das nützlich sein könnte. Haben Sie jemals ein Plugin oder einen anderen JavaScript-Effekt gesehen, bei dem Sie auf ein Bild klicken und es "in place wächst"? Ich nenne es Magic Zoom, weil ich gerne lahme Namen für Dinge vergebe. So könnte es funktionieren.
- Haben Sie ein Gitter von Thumbnail-großen Bildern (hält die Ladezeit der Seite gering).
- Wenn ein Thumbnail angeklickt wird...
- Laden Sie das Vollbildbild direkt über das Thumbnail, skaliert auf die exakt gleiche Größe.
- Animieren Sie das neue Vollbildbild auf seine ursprüngliche Größe hoch.
- Halten Sie während der Animation das Bild zentriert über dem Thumbnail.
- Klicken zum Schließen.
HTML der Galerie
Die Galerie besteht einfach aus Anker-Tags, die zur großen Version verlinken, und darin Bild-Tags der Thumbnails. Ohne JavaScript ist sie immer noch voll funktionsfähig.
<div class="gallery">
<a href="http://farm4.static.flickr.com/3329/4556228155_7ce08c45a3.jpg">
<img src="//farm4.static.flickr.com/3329/4556228155_7ce08c45a3_m.jpg" alt="" />
</a>
<!-- More... -->
</div>jQuery JavaScript
$(function () {
var $el;
$(".gallery a").live("click", function () {
$el = $(this);
$("<img>", {
src: $el.attr("href"),
class: "larger"
}).load(function () {
$(this)
.appendTo("body")
.width($el.find("img").width())
.position({
of: $el.find("img"),
my: "center center",
at: "center center"
})
.animate(
{
width: 500 // width of large image
},
{
duration: 1000, // 1000 = 1 second
easing: "easeOutQuad",
step: function (i) {
$(this).position({
of: $el.find("img"),
my: "center center",
at: "center center",
collision: "fit"
});
}
}
);
});
return false;
});
$(".larger").live("click", function () {
$el = $(this);
$el.fadeOut(400, function () {
$el.remove();
});
});
});
Das interessante Konzept hier ist der Parameter "step" für die animate-Funktion. Sie können diesem Parameter eine Funktion übergeben, und diese Funktion wird bei jedem einzelnen Keyframe der Animation ausgeführt. Für uns bedeutet das, dass wir die Positionierungsfunktion verwenden werden, um sicherzustellen, dass das große Bild immer noch über seinem Thumbnail zentriert ist.
Ja... das Wachsen der Bilder ist etwas wackelig. Wenn jemand Ideen dazu hat, lasst es mich wissen.
Kollisionserkennung!
Elemente mit einer so einfachen Syntax und wenig Code relativ zu anderen Elementen positionieren zu können, ist großartig, aber was diese Positionierungs-Utility wirklich auszeichnet, ist die Kollisionserkennung.
Was ist, wenn das Element, wo wir es sagen, platziert werden soll, außerhalb des Browserfensters liegt? Das könnte je nach Situation ein Problem sein. Nehmen wir unser Magic-Zoom-Beispiel. Theoretisch ist der Grund, warum Leute auf die Bilder klicken, um eine größere Version zu sehen, dass sie tatsächlich am Foto interessiert sind und es größer und detaillierter sehen wollen. Es hilft ihnen nicht, wenn das Bild am linken Rand der Seite liegt und beim Wachsen abgeschnitten wird.
Dieses Problem ist mit der Positionierungsfunktion extrem einfach zu lösen. Alles, was wir tun müssen, ist den Kollisionsparameter mit dem Wert "fit" hinzuzufügen, und die Positionierungsfunktion stellt sicher, dass das, was sie positioniert, niemals außerhalb des Fensters liegt.
Das ist eine wirklich nützliche Idee... Danke fürs Teilen
Danke Chris! Das könnte für das Upgrade meiner Website nützlich sein, das ich gerade mache.
Danke Chris,
Ich lese gerne Ihre Website, ich lerne viel von Ihren Beiträgen und Screencasts.
Danke für das Video. Ich habe nicht wirklich verstanden, wozu die Kollisionserkennung dient, da meine Bildschirmauflösung sehr hoch ist.
Das Verkleinern des Browserfensters sollte auch funktionieren.
Cool!
jQuery und Chris sind großartig!
Meine grundlegenden CSS- und jQuery-Kenntnisse habe ich von Chris gelernt!
Dieses Skript hat einen Fehler unter IE6 und IE7, aber unter IE8 funktioniert es großartig (der jQuery-Effekt, der Stil ist immer noch schlecht).
Die Leute, für die ich Websites erstelle, benutzen immer noch IE6 und die Betrachter auch.
Also vielen Dank!
Wirklich danke! :) Entschuldigung für mein Englisch.
Haben Sie darüber nachgedacht, die Bilder miteinander kollidieren zu lassen und sie vielleicht zu schrumpfen, um sich gegenseitig Platz zu machen? Das könnte wirklich cool sein.
-James
Obwohl ziemlich cool, bricht dies, wenn Sie auf ein anderes Bild klicken, während eines animiert wird. Ich glaube, warum es bricht und die Bilder übereinander stapelt, liegt daran, dass das Click-Event die absoluten Koordinaten festlegt. Ich frage mich, ob Sie das .live click-Event in ein if-Statement packen würden, um dieses Problem zu vermeiden. Ich könnte mich aber auch irren.
Ich würde denken, der Grund, warum es beim Animieren ruckelt, ist, dass es sich ständig selbst gegen das Fenster prüft?
ruckelig und zu langsam. Nicht wirklich eine Option für ein Live-Projekt, aber danke fürs Teilen!:)
Das Zoomen in JavaScript sieht wegen der Art und Weise, wie CSS-Werte sequenziell angepasst werden, immer furchtbar aus. Ich glaube nicht, dass es wirklich einen Weg gibt, das zu umgehen, aber Sie können es weniger wahrnehmbar machen, indem Sie den Timer anpassen.
Tolles Tutorial, ich muss das ausprobieren, wenn ich Zeit habe.
Schönes Beispiel Chris, aber konntest du dir keinen originelleren Namen ausdenken?!
Entschuldigung für die Namensgleichheit! Ich habe ihn so genannt, weil genau dieser Effekt in dieser E-Commerce-Software, die ich verwendet habe, so heißt.
Danke Chris, ich lerne CSS- und jQuery-Tricks von dieser Website.
danke
Durch zufälliges Klicken auf die Bilder konnte ich sie verschwinden lassen.
Ich denke, es wird ruckelig, weil die Step-Funktion nicht jedes Mal aufgerufen wird, wenn sich die Bildgröße ändert. Ich habe eine Zählervariable zur Step-Funktion hinzugefügt und ihren Wert nach der Animation ausgegeben, und die Step-Funktion wird nur zwischen 10 und 14 Mal aufgerufen (zumindest auf meinem System), und die Skalierungsanimation sieht viel besser aus, als ich dachte, sie bei 10 Keyframes pro Sekunde aussehen würde.
Wenn ich die Schatten der großen Bilder entferne, wird die Step-Funktion bis zu 40 Mal aufgerufen, 62 Mal, wenn ich *alle* Schatten entferne. Bei diesen Geschwindigkeiten war das Ruckeln fast nicht vorhanden.
Ich denke, der einzige Weg, das Ruckeln zu beseitigen, ist, Ihre eigene animate-Funktion zu schreiben, die position bei jeder Größenänderung aufruft.
Oder idealerweise eine, bei der jeder Schritt alle Zahlen berechnet und dann Skalierung und Position gleichzeitig aktualisiert, anstatt Mathe->Skalierung->Mathe->Position->Mathe->Skalierung usw.
Obwohl... das ist nicht wirklich möglich, oder? Da der Browser die Berechnungen durchführt, wenn der Wert geändert wird... na ja, jetzt denke ich laut nach und sollte mich besser ruhig halten.
Gute Recherche! Ich finde es schon verrückt, dass die Addition von Box-Schatten beeinflusst, wie oft eine Callback-Funktion ausgelöst wird.
Ich habe den Eindruck, dass die Funktion einfach "aufgerufen wird, wenn sie eine Chance bekommt". Entweder das, oder sie ruft die Funktion nicht auf, wenn die Funktion noch läuft.
In jedem Fall scheint es von der Leistung des Browsers abzuhängen, und Schatten scheinen die Browserleistung generell zu beeinträchtigen. Ich habe aufgehört, viel mit dem Ändern von Textschatten beim Hovern zu machen, denn wenn man mit der angewendeten Effekte über eine Gruppe von Links fährt, gibt es eine spürbare Verzögerung beim Hover-Effekt, zumindest auf meiner Hardware.
Ich denke, der Deal ist, dass die Step-Funktion bei "Keyframes" aufgerufen wird, was wahrscheinlich "gelegentlich" bedeutet und nicht bei jeder einzelnen Pixelbewegung.
Letztendlich ist das wahrscheinlich nicht der beste Einsatzzweck dafür und könnte besser dazu dienen, die Breite, die Oberseite und die linken Werte entsprechend und gleichzeitig zu animieren.
Nicht wirklich die Schuld des Positionierungs-Utilities, das ist immer noch ziemlich großartig =)
Ich liebte das Vimeo-Video! Ich werde Ihr Code-Snippet auf meinem Blog verwenden und diesmal werde ich kein Plugin von jemandem benutzen! Ich werde alles selbst machen! :)
Danke Chris. jQuery UI ist großartig.
Kannst du uns als nächstes zeigen, wie man das eigentliche http://www.magictoolbox.com/magiczoom/ macht! :-P
Danke für den tollen Artikel.
tolles Tutorial, danke
Schönes Plugin, braucht nur etwas Feinschliff, um den Klick zu blockieren, bis das größere Bild geladen ist, und etwas Ladeanzeige zu zeigen.
Wenn Sie einfach weiter auf das Bild klicken, bevor das größere Bild geladen ist, wird es so viele laden, wie Sie geklickt haben!
Noch ein Diamant Chris! Wie immer lässt du etwas Schwieriges einfach aussehen, um es zu verstehen ;) Cheers, Steve
Sehr coole Effekte. Zuvor habe ich nur eine Hover-Funktion verwendet, um die Bilder zu vergrößern.
Aber das ist viel besser.
Hallo Chris
Eine Sache, die mir aufgefallen ist. Wenn Sie zu schnell auf mehrere Bilder klicken, werfen Sie die Bilder nicht nur über die Seite, sondern Sie verlieren auch einige Bilder auf der Seite.
Wenn ich doppelt auf ein Bild klicke, wird es auf die Hälfte gezoomt. Dann, wenn ich sofort auf ein Bild daneben klicke, wird dieses Bild voll gezoomt, aber auch in der oberen linken Ecke des Bildschirms positioniert. Dann, wenn ich auf dieses gezoomte Bild klicke, wird es vom Bildschirm gelöscht.
T
Wenn ich doppelt auf ein Bild klicke, wird es auf die Hälfte gezoomt. Dann, wenn ich sofort auf ein Bild daneben klicke, wird dieses Bild voll gezoomt, aber auch in der oberen linken Ecke des Bildschirms positioniert. Dann, wenn ich auf dieses gezoomte Bild klicke, wird es vom Bildschirm gelöscht.
Das ist meine Erfahrung beim Ausprobieren.
Hmm, sieht interessant aus, aber benutze JS nicht zu oft – das ist "Stil vs. Userperformance". Nun, man kann Positionen mit CSS machen, benutze es, wenn man nicht mehr braucht. Mit freundlichen Grüßen.
Danke! Die erste Seite, die jQuery Dialog Position so erklärt hat, als wäre ich 5 Jahre alt. Und ich habe es endlich verstanden!