YUIパネルとスクロール

StackOverflow https://stackoverflow.com/questions/624414

  •  05-07-2019
  •  | 
  •  

質問

このように定義されたドラッグ可能なYUIパネルがあります

new YAHOO.widget.Panel("parameters", {
                        fixedcenter: true,
                        constraintoviewport: true,
                        underlay: "shadow",
                        visible: false,
                        close: true,
                        draggable: true,
                        width: "350px" });

パネルが表示されているとき、ウィンドウがスクロールされていても、常に表示されたままにしておきたい。 これは、 fixedcenter：true のおかげです。問題は、ウィンドウがスクロールされると、以前に他の場所にドラッグされた場合でも、パネルがウィンドウの中央に配置されることです。

ウィンドウがスクロールされたときにパネルの位置がウィンドウに対して一定のままになるように、上記の定義を変更するにはどうすればよいですか？

役に立ちましたか？

解決

位置を固定したラッパー要素でパネルコンテナーをラップします。例：

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

fixedcenter 構成プロパティなしでパネルを構築し、レンダリング直後にパネルを中央に配置します。例：

var panel = new YAHOO.widget.Panel("parameters", {
        constraintoviewport: true,
        underlay: "shadow",
        visible: false,
        close: true,
        draggable: true,
        width: "350px"
    });
panel.render();
panel.center();

ウィンドウがスクロールされても、パネルは同じ位置に留まるはずです。これはFirefox 3.0およびInternet Explorer 7および8でのみテストしました。

この動作を実証する自己完結型の例のソースを投稿しました。

>

他のヒント

ドキュメントに従って、fixedcenterを次のように設定します。

  

＆quot; contained＆quot; 真の場合と同様に、固定中央配置を有効にするには   オプション。ただし、プロパティをtrueに設定するのとは異なり、   オーバーレイが大きすぎる場合、プロパティは＆quot; contained＆quot;に設定されます   ビューポート。ユーザーがスクロールしても自動的に中央に配置されません。   または、ウィンドウのサイズを変更します（ウィンドウが、   オーバーレイ）。これは、オーバーレイに両方のヘッダーがある場合に役立ちます   ユーザーがアクセスする必要があるフッターUIコントロール。

http://developer.yahoo.com/yui/docs/ YAHOO.widget.Overlay.html

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top