Frage
Ich habe einen ziehbar YUI-Panel wie folgt definiert
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
Wenn die Tafel angezeigt wird, will ich es immer sichtbar bleiben, auch wenn das Fenster gescrollt wird.
Dies ist auch dann der Fall, dank fixedcenter: true
. Das Problem ist, dass, wenn das Fenster, um die Platte positioniert sich in die Mitte des Fensters gescrollt wird, auch wenn es woanders vorher gezogen wurde.
Wie soll ich die obige Definition ändern, so dass die Position der Platte konstant relativ zum Fenster bleibt, wenn das Fenster gescrollt wird?
Lösung
Wickeln Sie Ihre Platte Behälter in einem Hüllenelement, das Positionierung fixiert hat, z.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Konstruieren Sie Ihr Panel ohne fixedcenter
Konfigurationseigenschaft, und in der Mitte der Platte unmittelbar nachdem Sie es machen, z.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
Das Panel sollte nun in der gleichen Position bleiben, wenn das Fenster gescrollt wird. Getestet habe ich nur diese in Firefox 3.0 und Internet Explorer 7 und 8.
Ich habe die Quelle eines umluftunabhängigem geschrieben Beispiel, das diese Arbeits demonstrieren.
Andere Tipps
Gemäß der Dokumentation, stellen Sie die fixedcenter an:
"enthalten" feste Mittelpunkt Positionierung zu ermöglichen, wie mit dem wahren Möglichkeit. Doch anders als die Eigenschaft auf true setzen, wenn die Eigenschaft auf „enthalten“, wenn die Auflage für die zu groß ist Ansichtsfenster, wird es nicht automatisch erhalten zentriert, wenn der Benutzer einen Bildlauf oder ändert die Größe des Fensters (bis das Fenster groß genug ist, die enthalten Overlay). Dies ist nützlich in Fällen, in denen das Overlay beide Header hat und Fußzeilen UI-Steuerelemente, die der Benutzer zugreifen müssen.
http://developer.yahoo.com/yui/docs/ YAHOO.widget.Overlay.html