利用MS Ajax实现动画的一个层的伸缩

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Reg.aspx.cs" Inherits="AjaxPage.Reg" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
            <asp:ScriptReference Path="/js/libary.js" />
            <asp:ScriptReference Path="/js/ShopReg.js" />
        </Scripts>
    </asp:ScriptManager>
    <div class="RegShop">
        <table width="100%" class="RegTb">
        <col />
        <col width="250px" />
        <col />
            <tr>
                <th>
                    用户名：
                </th>
                <td>
                    <asp:TextBox ID="txtLoginName" runat="server" MaxLength="50" onfocus="OnLoginNameFocus()"
                        onblur="OnLoginNameBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgLoginName" class="msgNormal">
                        2～50位字符数字下划线的组合(注册成功后，不可修改)</div>
                </td>
            </tr>
            <tr>
                <th>
                    登录密码：
                </th>
                <td>
                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" MaxLength="32" onfocus="OnPwdFocus()"
                        onblur="OnPwdBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgPwd" class="msgNormal">
                        6～32个非汉字字符，区分大小写，为提高安全性，建议除英文字母外，<br />至少应包含1个或更多数字或特殊字符，比如a1b2.cc；</div>
                </td>
            </tr>
            <tr>
                <th>
                    再次输入密码：
                </th>
                <td>
                    <asp:TextBox ID="txtPwd2" runat="server" TextMode="Password" onfocus="OnPwd2Focus()"
                        onblur="OnPwd2Blur()" MaxLength="32"></asp:TextBox>
                </td>
                <td>
                    <div id="msgPwd2" class="msgNormal">
                        必须与上面的密码输入一致</div>
                </td>
            </tr>
            <tr>
                <th>
                    电子邮箱：
                </th>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server" onfocus="OnEmailFocus()" onblur="OnEmailBlur()"
                        MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgEmail" class="msgNormal">
                        强烈建议您如实填写电子邮箱，找回密码、登录七星支付中心、<br />接受七星优惠活动通知等都需要电子邮箱.<a href="http://reg.126.com/reg1.jsp?from=http://app.cntvs.com"
                            target="_blank" style="color: #ff6600">[免费注册126邮箱]</a></div>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:CheckBox ID="ChkPay" runat="server" Text="同时将该邮箱注册为七星支付帐号" Checked="false" onclick="OnChkPayClick()" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <th>
                    店铺名称：
                </th>
                <td>
                    <asp:TextBox ID="txtShopName" runat="server" onfocus="OnShopNameFocus()" onblur="OnShopNameBlur()"
                        MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgShopName" class="msgNormal">
                        您的店铺名称，支持中文(注册成功后，不可修改)</div>
                </td>
            </tr>
            <tr>
                <th>
                    店铺类别：
                </th>
                <td>
                    <asp:DropDownList ID="ddlClsID" runat="server" onfocus="OnDdlClsIDFocus()" onblur="OnDdlClsIDBlur()">
                    </asp:DropDownList>
                </td>
                <td>
                    <div id="msgClsID" class="msgNormal">
                        请选择您的店铺分类</div>
                </td>
            </tr>
            <tr>
                <th>
                    联系人：
                </th>
                <td>
                    姓：<asp:TextBox ID="txtFirstName" runat="server" Width="30" MaxLength="2" onfocus="OnFirstNameFocus()"
                        onblur="OnFirstNameBlur()"></asp:TextBox>
                    名：<asp:TextBox ID="txtLastName" runat="server" MaxLength="30" onfocus="OnLastNameFocus()"
                        onblur="OnLastNameBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgName" class="msgNormal">
                        请如实填写您的姓名</div>
                </td>
            </tr>
            <tr>
                <th>
                    销售电话/手机：
                </th>
                <td>
                    <asp:TextBox ID="txtSalesTel" runat="server" MaxLength="50" onfocus="OnSalesTelFocus()"
                        onblur="OnSalesTelBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgSalesTel" class="msgNormal">
                        此电话/手机号码将显示在您的网店以及商品页面上</div>
                </td>
            </tr>
            <tr>
                <th>
                    所在省/市/区：
                </th>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:DropDownList ID="ddlSheng" runat="server" AutoPostBack="true">
                            </asp:DropDownList>
                            <asp:DropDownList ID="ddlShi" runat="server"
                                AutoPostBack="true">
                            </asp:DropDownList>
                            <asp:DropDownList ID="ddlQu" runat="server">
                            </asp:DropDownList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td>
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
                        DynamicLayout="true">
                        <ProgressTemplate>
                            <div id="msgSheng" class="msgError">
                                数据加载中</div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </td>
            </tr>
        </table>
        <hr />
        <asp:Panel ID="pnlAdvHeader" runat="server" style="cursor:pointer">
                <h4 style="padding:5px 0 5px 12px;margin:0px 70px 0 110px;text-align:left;background-Color:#fff8f3;">
                    <asp:Label ID="lblAdvHeader" runat="server" Text="高级注册选项(隐藏)" ></asp:Label>&nbsp;<asp:Image
                        ID="Image1" runat="server" ImageUrl="http://images.cntvs.com/public/images/expand.jpg" ImageAlign="AbsMiddle" /></h4>
        </asp:Panel> 
        <asp:Panel ID="pnlAdvOption" runat="server"  >    
        <table width="100%" class="RegTb">
        <col />
        <col width="250px" />
        <col />
            <tr>
                <th>
                    密码提示问题：
                </th>
                <td>
                    <asp:DropDownList ID="ddlPwdQuestion" runat="server" onfocus="OnPwdQuestionFocus()"
                        onblur="OnPwdQuestionBlur()">
                    </asp:DropDownList>
                </td>
                <td>
                    <div id="msgQuestion" class="msgNormal">
                        强烈建议设置密码提示问题，它可帮助您在丢失密码时找回登录密码</div>
                </td>
            </tr>
            <tr>
                <th>
                    密码问题答案：
                </th>
                <td>
                    <asp:TextBox ID="txtAnswer" runat="server" Width="200" onfocus="OnPwdAnswerFocus()"
                        onblur="OnPwdAnswerBlur()" MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgAnswer" class="msgNormal">
                        请输入密码提示答案，2～50个字符</div>
                </td>
            </tr>
            <tr>
                <th>
                    店主性别：
                </th>
                <td>
                    <asp:RadioButtonList ID="rdoSex" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal"
                        onfocus="OnSexFocus()" onblur="OnSexBlur()">
                        <asp:ListItem Text="先生" Value="0"></asp:ListItem>
                        <asp:ListItem Text="女士" Value="1"></asp:ListItem>
                        <asp:ListItem Text="保密" Value="-1" Selected="true"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
                <td>
                    <div id="msgSex" class="msgNormal">
                        请选择您的性别</div>
                </td>
            </tr>
            <tr>
                <th>
                    店主生日：
                </th>
                <td>
                    <asp:TextBox ID="txtBirthday" runat="server" onfocus="OnBirthdayFocus()" onblur="OnBirthdayBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgBirthday" class="msgNormal">
                        请填写您的生日</div>
                </td>
            </tr>
            <tr>
                <th>
                    身份证号码：
                </th>
                <td>
                    <asp:TextBox ID="txtIdCard" runat="server" onfocus="OnIdCardFocus()" onblur="OnIdCardBlur()"></asp:TextBox>
                </td>
                <td>
                    <div id="msgIdCard" class="msgNormal">
                        15或18位身份证号码</div>
                </td>
            </tr>
            <tr>
                <th>
                    联系地址：
                </th>
                <td>
                    <asp:TextBox ID="txtAddress" runat="server" Width="200" onfocus="OnAddressFocus()"
                        onblur="OnAddressBlur()" MaxLength="100"></asp:TextBox>
                </td>
                <td>
                    <div id="msgAddress" class="msgNormal">
                        为了保证您能收到七星给您寄出的礼物，请如实填写<br />(不含上面的省市区选择，否则会重复)，比如：解放路888号</div>
                </td>
            </tr>
            <tr>
                <th>
                    邮政编码：
                </th>
                <td>
                    <asp:TextBox ID="txtPostCode" runat="server" onfocus="OnPostCodeFocus()" onblur="OnPostCodeBlur()"
                        MaxLength="6"></asp:TextBox>
                </td>
                <td>
                    <div id="msgPostCode" class="msgNormal">
                        请正确填写上面街道地址的邮政编码(6位半角数字)</div>
                </td>
            </tr>
            <tr>
                <th>
                    公司名称：
                </th>
                <td>
                    <asp:TextBox ID="txtCompanyName" runat="server" onfocus="OnCompanyNameFocus()" onblur="OnCompanyNameBlur()"
                        MaxLength="100"></asp:TextBox>
                </td>
                <td>
                    <div id="msgCompanyName" class="msgNormal">
                        您的店铺所属公司的名称</div>
                </td>
            </tr>
            <tr>
                <th>
                    主营项目：
                </th>
                <td>
                    <asp:TextBox ID="txtService" runat="server" onfocus="OnServiceFocus()" onblur="OnServiceBlur()"
                        MaxLength="100"></asp:TextBox>
                </td>
                <td>
                    <div id="msgService" class="msgNormal">
                        您的店铺主要的经营项目或服务</div>
                </td>
            </tr>
            <tr>
                <th>
                    网站网址：
                </th>
                <td>
                    <asp:TextBox ID="txtWebsite" runat="server" onfocus="OnWebsiteFocus()" onblur="OnWebsiteBlur()"
                        MaxLength="200" Text="http://"></asp:TextBox>
                </td>
                <td>
                    <div id="msgWebsite" class="msgNormal">
                        如果您的公司/店铺有其它网址，请在此输入(必须以http://开头)</div>
                </td>
            </tr>
            <tr>
                <th>
                    所属行业：
                </th>
                <td>
                    <asp:DropDownList ID="ddlIndustry" runat="server" onfocus="OnIndustryFocus()" onblur="OnIndustryBlur()">
                    </asp:DropDownList>
                </td>
                <td>
                    <div id="msgIndustry" class="msgNormal">
                        您的公司/店铺所在的行业</div>
                </td>
            </tr>
            <tr>
                <th>
                    组织机构代码：
                </th>
                <td>
                    <asp:TextBox ID="txtOrgNo" runat="server" onfocus="OnOrgNoFocus()" onblur="OnOrgNoBlur()"
                        MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgOrgNo" class="msgNormal">
                        您所在公司的组织机构代码</div>
                </td>
            </tr>
            <tr>
                <th>
                    其它联系人：
                </th>
                <td>
                    <asp:TextBox ID="txtContactor" runat="server" onfocus="OnContactorFocus()" onblur="OnContactorBlur()"
                        MaxLength="6"></asp:TextBox>
                </td>
                <td>
                    <div id="msgContactor" class="msgNormal">
                        如果您的店铺/公司还有其它联系人，请在此输入</div>
                </td>
            </tr>
            <tr>
                <th>
                    其它联系手机：
                </th>
                <td>
                    <asp:TextBox ID="txtMobile" runat="server" onfocus="OnMobileFocus()" onblur="OnMobileBlur()"
                        MaxLength="11"></asp:TextBox>
                </td>
                <td>
                    <div id="msgMobile" class="msgNormal">
                        如果您还有其它联系手机号，请在此输入</div>
                </td>
            </tr>
            <tr>
                <th>
                    其它联系电话：
                </th>
                <td>
                    区号<asp:TextBox ID="txtTel1" runat="server" Width="30" onfocus="OnTelFocus()" onblur="OnTelBlur()"
                        MaxLength="4"></asp:TextBox>
                    -电话<asp:TextBox ID="txtTel2" runat="server" Width="65" MaxLength="8" onfocus="OnTelFocus()"
                        onblur="OnTelBlur()"></asp:TextBox>
                    -分机号<asp:TextBox ID="txtTel3" runat="server" Width="20" onfocus="OnTelFocus()" onblur="OnTelBlur()"
                        MaxLength="3"></asp:TextBox>
                </td>
                <td>
                    <div id="msgTel" class="msgNormal">
                        如果您还有其它联系电话，请在此输入(分机号为选填)</div>
                </td>
            </tr>
            <tr>
                <th>
                    传真号码：
                </th>
                <td>
                    区号<asp:TextBox ID="txtFax1" runat="server" Width="30" onfocus="OnFaxFocus()" onblur="OnFaxBlur()"
                        MaxLength="4"></asp:TextBox>
                    -号码<asp:TextBox ID="txtFax2" runat="server" Width="65" MaxLength="8" onfocus="OnFaxFocus()"
                        onblur="OnFaxBlur()"></asp:TextBox>
                    -分机号<asp:TextBox ID="txtFax3" runat="server" Width="20" onfocus="OnFaxFocus()" onblur="OnFaxBlur()"
                        MaxLength="3"></asp:TextBox>
                </td>
                <td>
                    <div id="msgFax" class="msgNormal">
                        传真号码，如 021-64711680，(分机号为选填)</div>
                </td>
            </tr>
            <tr>
                <th>
                    联系QQ：
                </th>
                <td>
                    <asp:TextBox ID="txtQQ" runat="server" onfocus="OnQQFocus()" onblur="OnQQBlur()"
                        MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgQQ" class="msgNormal">
                        请输入您的联系QQ号码</div>
                </td>
            </tr>
            <tr>
                <th>
                    联系MSN：
                </th>
                <td>
                    <asp:TextBox ID="txtMSN" runat="server" onfocus="OnMSNFocus()" onblur="OnMSNBlur()"
                        MaxLength="50"></asp:TextBox>
                </td>
                <td>
                    <div id="msgMSN" class="msgNormal">
                        请输入您的联系MSN</div>
                </td>
            </tr>
        </table>
        </asp:Panel>
        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"            
                TargetControlID = "pnlAdvOption"         
                ExpandControlID = "pnlAdvHeader"
                CollapseControlID = "pnlAdvHeader"
                Collapsed = "True"                    
                TextLabelID ="lblAdvHeader"
                ExpandedText="高级注册选项(隐藏)"
                CollapsedText="高级注册选项(展开)"
                ImageControlID="Image1"
                ExpandedImage="http://images.cntvs.com/public/images/collapse.jpg"
                CollapsedImage="http://images.cntvs.com/public/images/expand.jpg"
                SuppressPostBack="true"             
            />    
                <asp:ImageButton ID="BtnRegister" runat="server" ImageUrl="http://images.cntvs.com/webapp/images/reg/RegBtn1.gif" OnClientClick="return OnRegSubmit()" UseSubmitBehavior="false" />

            </div>
    </form>
</body>
</html>
posted @ 2008-11-27 17:20  海底的鱼  阅读(347)  评论(0)    收藏  举报