ajaxToolKit中 的折叠面板用法--Accordion

 1)在web.config 的<controls>中增中<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>

2)在页面中增加

 

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

<!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 id="Head1" runat="server">
    <title>在问卷中,使用可折叠控件以避免版面过长</title>
    <link href="style.css" rel="Stylesheet" type="text/css" />
    <%-- 给手风琴方格使用的样式表 --%>
    <style type="text/css">
    TABLE.testtable INPUT
    {
     MARGIN-LEFT: -4px;
    }
   
    TABLE.testtable TR
    {
     VERTICAL-ALIGN: top;
    }
   
    .hrclass
    {
        border: 2px ridge #0000FF
    } 

    /* 默认的标头样式表 */
    .accordionHeaderDef
    {
        border: 2px solid #0B0109;
        background-color: #8B7149;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        text-align: left;
    }

    /* 默认的内容样式表 */
    .accordionContentDef
    {
        border: thick ridge #FFD8D8;
        background-color: #A7D9AF;
        border-top: none;
        padding: 5px;
        padding-top: 10px;
        text-align: left;
    }

    /* 默认的标头之超级链接样式表 */
    .accordionHeaderDef a
    {
        color: #FFFFCC;
        text-decoration: none;
    }

    /* 当鼠标移过默认的标头之超级链接样式表 */
    .accordionHeaderDef a:hover
    {
        background-color: LightSlateGray;
        color: Yellow;
        text-decoration: underline overline;
    }
    </style>
</head>
<body οnlοad="focus();">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div align="center">
           
            <%-- 手风琴折 --%>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="accordionContentDef"
                HeaderCssClass="accordionHeaderDef" RequireOpenedPane="false" SuppressHeaderPostbacks="true"
                Width="880px">
                <Panes>
                    <%-- 手风琴方格 --%>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <a href="">1、基本信息</a>
                        </Header>
                        <Content>
                            全名<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxName" runat="server" Width="472px"></asp:TextBox><br />
                            称谓 (先生/小姐)<br />
                            <asp:TextBox ID="TextBoxAppellation" runat="server">先生</asp:TextBox><br />
                            地点/国名<font color="#FF0000"> *</font></b><br />
                            <asp:DropDownList ID="DropDownListCountry" runat="server">
                                <asp:ListItem>中国</asp:ListItem>
                                <asp:ListItem>美国</asp:ListItem>
                                <asp:ListItem>英国</asp:ListItem>
                                <asp:ListItem>日本</asp:ListItem>
                            </asp:DropDownList><br />
                            我的电子邮件地址<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxEmail" runat="server" Width="472px"></asp:TextBox>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                   
                    <%-- 手风琴方格 --%>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>
                            <a href="">2、家庭信息</a>
                        </Header>
                        <Content>
                            家庭电话<br />
                            <asp:TextBox ID="TextBoxPhoneHome" runat="server" Width="472px"></asp:TextBox><br />
                            公司电话号码 (区码 - 号码 - 分机) <b><font color="#FF0000">*</font></b><br />
                            <asp:TextBox ID="TextBoxPhoneOfficeAreaCode" runat="server" Width="58px">010</asp:TextBox>
                            <asp:TextBox ID="TextBoxPhoneOfficeNumber" runat="server">12345678</asp:TextBox>
                            <asp:TextBox ID="TextBoxExtension" runat="server"></asp:TextBox><br />
                            移动电话<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxPhoneCellular" runat="server" Width="472px"></asp:TextBox><br />
                            车上移动电话<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxPhoneCar" runat="server" Width="472px"></asp:TextBox>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                   
                    <%-- 手风琴方格 --%>
                    <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                        <Header>
                            <a href="">3、工用经历</a>
                        </Header>
                        <Content>
                            公司/组织名称<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxCompany" runat="server" Width="472px"></asp:TextBox><br />
                            部门<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxDepartment" runat="server" Width="472px"></asp:TextBox><br />
                            职务<b><font color="#FF0000"> *</font></b><br />
                            <asp:TextBox ID="TextBoxTitle" runat="server" Width="472px"></asp:TextBox><br />
                            公司地址<br />
                            <asp:TextBox ID="TextBoxOfficeAddress" runat="server" Width="472px"></asp:TextBox><br />
                        </Content>
                    </ajaxToolkit:AccordionPane>
                   
                    <%-- 手风琴方格 --%>
                    <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                        <Header>
                            <a href="">4、教育情况</a>
                        </Header>
                        <Content>
                            <table id="table1" border="0" width="100%">
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox1" runat="server" Text="应用程序设计及开发工具" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox2" runat="server" Text="大型主机操作系统" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox3" runat="server" Text="系统管理软件" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox4" runat="server" Text="商业智能应用软件(BI)" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox5" runat="server" Text="信息与协同合作应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox6" runat="server" Text="通信系统" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox7" runat="server" Text="客户关系管理应用软件(CRM)" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox8" runat="server" Text="中介软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox9" runat="server" Text="Unix 操作系统" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox10" runat="server" Text="数据库管理系统" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox11" runat="server" Text="移动通信设备" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox12" runat="server" Text="网站设计、发布或维护" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox13" runat="server" Text="台式计算机操作系统" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox14" runat="server" Text="网络基础架构相关系统" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox15" runat="server" Text="Windows Server - NT" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox16" runat="server" Text="台式计算机应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox17" runat="server" Text="Novell NetWare" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox18" runat="server" Text="Windows Server 2000" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox19" runat="server" Text="ERP 应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox20" runat="server" Text="信息安全应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox21" runat="server" Text="Windows Server 2003" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox22" runat="server" Text="特定产业商用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox23" runat="server" Text="存储设备应用系统" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox24" runat="server" Text="无线网络技术" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox25" runat="server" Text="知识管理应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox26" runat="server" Text="供应炼管理应用软件" />
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckBox27" runat="server" Text="其它" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CheckBox28" runat="server" Text="Linux" />
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
            <asp:Button ID="ButtonOk" runat="server" Text="确定"  />
            <asp:Button ID="ButtonCancel" runat="server" Text="取消" />
        </div>
    </form>
</body>
</html>

 

转载于:https://www.cnblogs.com/Gsun/archive/2009/03/16/1413286.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值