@Prog! - ASP.NET -
ASP.NET(C#) - AJAX, Silverlight - のメモ書き
Forums » momotchi » ASP.NET » ボタンの下にパネルを表示する

ボタンの下にパネルを表示する

Previous | Next
Latest post 10-26-2008 21:59 by Yu Asano. 1 replies.

  • 10-26-2008 21:59

    • Yu Asano
    • Top 10 Contributor
    • Joined on 10-22-2008
    • Japan
    • Posts 208
    • Points 0

    ボタンの下にパネルを表示する

    Reply |Contact

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>ボタンの下にパネルを表示する</title>
        <script type="text/javascript">
            var x;
            var y;
            var control;

            function getOffset(obj) {
                x = 0;
                y = 0;
                control = obj;
                offset(obj);
            }

            function offset(obj) {
                y += obj.offsetTop;
                x += obj.offsetLeft;
               
                if (obj.offsetParent != null) {
                    offset(obj.offsetParent);
                } else {
                    document.getElementById('HiddenFieldX').value = x;
                    document.getElementById('HiddenFieldY').value = y;
                    document.getElementById('HiddenFieldHeight').value = control.offsetHeight;
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
           
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button_Click" />
           
            <asp:HiddenField ID="HiddenFieldX" runat="server" />
            <asp:HiddenField ID="HiddenFieldY" runat="server" />
            <asp:HiddenField ID="HiddenFieldHeight" runat="server" />
           
            <asp:Panel ID="Panel1" runat="server" Visible="false">
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            </asp:Panel>
        </form>
    </body>
    </html>
    Filed under:
    • Post Points: 0

  • 10-26-2008 21:59 In reply to

    • Yu Asano
    • Top 10 Contributor
    • Joined on 10-22-2008
    • Japan
    • Posts 208
    • Points 0

    Re: ボタンの下にパネルを表示する

    Reply |Contact

    using System.Text;

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                Button1.Attributes.Add("onclick", "getOffset(this);");
        }

        protected void Button_Click(object sender, EventArgs e)
        {
            if (!Panel1.Visible) Panel1.Visible = true;

            StringBuilder style = new StringBuilder();
            style.Append("position: absolute;");
            style.Append("left: ");
            style.Append(HiddenFieldX.Value);
            style.Append("px;");

            style.Append("top: ");
            style.Append(int.Parse(HiddenFieldY.Value)
                + int.Parse(HiddenFieldHeight.Value) + 1);
            style.Append("px;");

            Panel1.Attributes.Add("style", style.ToString());
        }
    }
    Filed under:
    • Post Points: 0
Page 1 of 1 (2 items) | RSS
momotchi.net
Powered by Community Server (Non-Commercial Edition), by Telligent Systems