ajaxToolKit中 的折叠面板用法--Accordion
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 onload="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>
