ajaxToolkit:AccordionPane演示与应用实例
程序员文章站
2024-03-02 11:39:22
一个展开收合的ajaxtoolkit:accordionpane控件。insus.net在专案有用到它。 因为它可以节省显示空间。不过有点不足,就是用户刚开始使用,需要记得...
一个展开收合的ajaxtoolkit:accordionpane控件。insus.net在专案有用到它。 因为它可以节省显示空间。不过有点不足,就是用户刚开始使用,需要记得每个accordionpane内容。或是需要使用一个显而可见的名字。下面的演示中,只是两个收合accordionpane,如果多个的话,就会有上面提及的问题。
下面是html:ajaxtoolkit:accordion
复制代码 代码如下:
<ajaxtoolkit:accordion id="accordion1" runat="server" selectedindex="-1" headercssclass="accordionheader"
headerselectedcssclass="accordionheaderselected" contentcssclass="accordioncontent"
fadetransitions="true" framespersecond="5" transitionduration="250" autosize="none"
requireopenedpane="false" suppressheaderpostbacks="true">
<panes>
<ajaxtoolkit:accordionpane id="accordionpane1" runat="server">
<header>
条件
header>
<content>
<content>
ajaxtoolkit:accordionpane>
<ajaxtoolkit:accordionpane id="accordionpane4" runat="server">
<header>
日期
header>
<content>
<content>
<ajaxtoolkit:accordionpane>
<panes>
<ajaxtoolkit:accordion>
下面是css:accordion
复制代码 代码如下:
.accordionheader
{
border: 1px solid #acacac;
color: #0f2336;
background-color: #d2e6fa;
font-family: arial, sans-serif;
font-size: 12px;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionheaderselected
{
border: 1px solid #acacac;
color: #0f2336;
background-color: #97b3d1;
font-family: arial, sans-serif;
font-size: 12px;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordioncontent
{
background-color: #f4f7fc;
border: 1px dashed #acacac;
border-top: none;
padding: 5px;
padding-top: 10px;
}
上一篇: Java刷视频浏览量点赞量的实现代码
下一篇: ASP.NET过滤器的应用方法介绍
推荐阅读
-
ajaxToolkit:AccordionPane演示与应用实例
-
Android应用中设置alpha值来制作透明与渐变效果的实例
-
Android应用中设置alpha值来制作透明与渐变效果的实例
-
Android应用中实现选择本地文件与目录的实例分享
-
Android应用开发中Fragment的静态加载与动态加载实例
-
Android应用中实现选择本地文件与目录的实例分享
-
Android应用开发中Fragment的静态加载与动态加载实例
-
Sphinx/MySQL 协议支持与SphinxQL应用实例
-
ThinkPHP模板替换与系统常量及应用实例教程,thinkphp实例教程
-
Sphinx/MySQL 协议支持与SphinxQL应用实例