HIRO's.NET Blog

PowerShellが好き

目次

Blog 利用状況

ニュース

あわせて読みたい

書庫

日記カテゴリ

リンク

Microsoft Ajax Control Toolkit - AlwaysVisibleControlを使用する -

AlwaysVisibleControlは、コントロールを指定した位置に表示させておくためのものです。
スクロールしようが、リサイズしようが指定位置に表示させることが出来ます。
よく、スクロールされてもメニューは一定の位置に表示されるサイトを見かけますが、あれを実現させることができます。
使用するプロパティは最低3つです。
・TargetControlID
指定位置に表示したいコントロールをセットします。
・VerticalSide
垂直方向の表示位置です。Bottom/Middle/Top のいずれかを指定します。
・Horizontal
水平方向の表示位置です。Center/Left/Right のいずれかを指定します。

それ以外のプロパティとしては
・VerticalOffset
Webブラウザ表示領域上端からののオフセット位置です。単位はピクセルです。
・HorizontalOffset Webブラウザ表示領域左端からののオフセット位置です。単位はピクセルです。
・ScrollEffectDuration
Webブラウザがスクロールやリサイズが行われた際、どのくらいの時間をかけて指定し
た位置に移動するかを示す時間をセットします。単位は秒です。

下記サンプルソースです。
サンプルではPanel1を指定した位置(垂直方向:Middle, 垂直方向オフセット:10pixel, 水平方向:Left, 水平方向オフセット:10pixel)に表示します。


<%Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AlwaysVisibleControlサンプル</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" 
                TargetControlID="Panel1" 
                VerticalSide="Middle"
                VerticalOffset="10"
                HorizontalSide="Left"
                HorizontalOffset="10"
                ScrollEffectDuration=".1">
            </ajaxToolkit:AlwaysVisibleControlExtender>
            <asp:Panel ID="Panel1" runat="server" BorderColor="Blue" 
                Height="50px" Width="125px" BorderStyle="Ridge">
                <ul>
                    <li><a href="http://www.yahoo.co.jp">Yahoo</a></li>
                    <li><a href="http://www.google.co.jp">Google</a></li>
                    <li><a href="http://hiro.wankuma.com">HIRO's.NET</a></li>
                </ul>
            </asp:Panel>
         </div>
    </form>   
</body>
</html>



下記実行結果です。


投稿日時 : 2007年5月8日 11:39

コメントを追加

No comments posted yet.
タイトル
名前
URL
コメント