body
{
font-family:verdana,tahoma,helvetica;
}
/* ajax__tab_xp-theme theme */
.ajax__tab_xp-theme .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px;
background:url(img/xp/tab-line.gif) repeat-x bottom;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_outer
{
padding-right:4px;
background:url(img/xp/tab-right.gif) no-repeat right;
height:21px;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_inner
{
padding-left:3px;
background:url(img/xp/tab-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(img/xp/tab.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_outer
{
background:url(img/xp/tab-hover-right.gif) no-repeat right;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_inner
{
background:url(img/xp/tab-hover-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_tab
{
background:url(img/xp/tab-hover.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_outer
{
background:url(img/xp/tab-active-right.gif) no-repeat right;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_inner
{
background:url(img/xp/tab-active-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_tab
{
background:url(img/xp/tab-active.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
/* ajax__tab_yuitabview-theme theme (img/yui/sprite.png) */
.ajax__tab_yuitabview-theme .ajax__tab_header
{
font-family:arial,helvetica,clean,sans-serif;
font-size:small;
border-bottom:solid 5px #2647a0;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_outer
{
background:url(img/yui/sprite.png) #d8d8d8 repeat-x;
margin:0px 0.16em 0px 0px;
padding:1px 0px 1px 0px;
vertical-align:bottom;
border:solid 1px #a3a3a3;
border-bottom-width:0px;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_tab
{
color:#000;
padding:0.35em 0.75em;
margin-right:0.01em;
}
.ajax__tab_yuitabview-theme .ajax__tab_hover .ajax__tab_outer
{
background: url(img/yui/sprite.png) #bfdaff repeat-x left -1300px;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_tab
{
color:#fff;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_outer
{
background:url(img/yui/sprite.png) #2647a0 repeat-x left -1400px;
}
.ajax__tab_yuitabview-theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
padding:0.25em 0.5em;
background-color:#edf5ff;
border:solid 1px #808080;
border-top-width:0px;
}
/* ajax__tab_technorati-theme theme */
.ajax__tab_technorati-theme .ajax__tab_header
{
font-family:"Helvetica Neue", Arial, Sans-Serif;
background:url(img/technorati/tab-line.png) repeat-x bottom;
font-size:12px;
display:block;
}
.ajax__tab_technorati-theme .ajax__tab_header .ajax__tab_outer
{
background:url(img/technorati/tab.png) no-repeat left top;
border-color:#222;
color:#222;
padding-left:10px;
margin-right:3px;
}
.ajax__tab_technorati-theme .ajax__tab_header .ajax__tab_inner
{
background:url(img/technorati/tab.png) no-repeat right top;
border-color:#666;
color:#666;
padding:3px 10px 2px 0px;
}
.ajax__tab_technorati-theme .ajax__tab_hover .ajax__tab_inner
{
color:#000000;
}
.ajax__tab_technorati-theme .ajax__tab_active .ajax__tab_outer
{
background:url(img/technorati/tab.png) no-repeat 0pt -40px;
border-bottom-color:#ffffff;
}
.ajax__tab_technorati-theme .ajax__tab_active .ajax__tab_inner
{
background:url(img/technorati/tab.png) no-repeat right -40px;
color:#000000;
border-color:#333
}
.ajax__tab_technorati-theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
padding:8px;
background-color:#ffffff;
border:solid 1px #d7d7d7;
border-top-width:0;
}
/* ajax__tab_msngallery-theme theme */
.ajax__tab_msngallery-theme .ajax__tab_header
{
background:url(img/msngallery/tab-line.png) repeat-x bottom;
font-size:12px;
display:block;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_outer
{
border:solid 1px #D7DCE1;
padding:1px 1px 0px 1px;
border-bottom:solid 2px #A8D4D9;
background-color:#edf2fb;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab
{
padding:6px 10px 6px 10px;
color:#444444;
width:117px;
display:block;
text-align:center;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab img
{
height:24px;
width:24px;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab div
{
font-family:Verdana, Arial, Sans-Serif;
font-weight:bold;
white-space:nowrap;
line-height:145%;
font-size:92%;
}
.ajax__tab_msngallery-theme .ajax__tab_active .ajax__tab_outer
{
padding:0px 0px 0px 0px;
border:solid 2px #A8D4D9;
border-bottom-color:#ffffff;
background-color:#ffffff;
}
.ajax__tab_msngallery-theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
padding:8px;
background-color:#ffffff;
border:solid 2px #A8D4D9;
border-top-width:0;
}
/* ajax__tab_ie-theme theme */
.ajax__tab_ie-theme .ajax__tab_header
{
padding-left:5px;
}
.ajax__tab_ie-theme .ajax__tab_header .ajax__tab_tab
{
margin-right:0px;
background:url(img/ie/tab_unselected.gif);
width:116px;
padding:9px 0px 3px 0px;
text-align:center;
color:#006699;
font-family:verdana;
font-size:13px;
display:block;
}
.ajax__tab_ie-theme .ajax__tab_active .ajax__tab_tab
{
padding:6px 0px 3px 0px;
background:url(img/ie/tab_selected.gif);
}
.ajax__tab_ie-theme .ajax__tab_body
{
background:url(img/ie/ie_tabbacker_720x296.jpg) no-repeat;
font-size:13px;
font-family:verdana;
height:296px;
width:716px;
}
.ajax__tab_ie-theme .ajax__tab_body div
{
padding:8px;
}
asp.net ajax tabs优化控件
需积分: 0 83 浏览量
更新于2008-07-15
收藏 536KB ZIP 举报
ASP.NET AJAX Tab 控件是微软ASP.NET AJAX库中的一个组件，用于在Web应用程序中创建交互式的选项卡式界面。这个控件允许用户在一个页面上同时显示多个内容区域，通过切换不同的选项卡来浏览不同的信息，提高了用户体验并优化了网页的布局。
在优化ASP.NET AJAX Tab控件时，有几个关键知识点需要考虑：
1. **性能优化**：
- **异步加载**：默认情况下，所有选项卡的内容在页面加载时都会被加载。为了提高性能，可以配置控件只在用户切换到相应选项卡时异步加载内容。
- **缓存策略**：利用AJAX缓存机制，一旦内容加载过一次，就存储在客户端，减少不必要的服务器请求。
- **分页和懒加载**：如果每个选项卡的内容都非常大，可以实现分页或懒加载，仅在用户滚动到可见区域时加载更多数据。
2. **用户体验**：
- **动画效果**：添加平滑的切换动画，提升用户体验。ASP.NET AJAX提供了一些内置的过渡效果，也可以自定义动画。
- **错误处理**：在内容加载失败时，提供友好的错误提示和恢复机制。
- **可访问性**：确保控件符合Web Content Accessibility Guidelines (WCAG)，如添加键盘导航支持。
3. **样式和主题**：
- **CSS自定义**：通过修改或扩展默认的CSS样式，可以改变选项卡的外观以匹配网站设计。
- **预定义主题**：ASP.NET AJAX提供多种预定义的主题，如“tab_theme_II”，可以直接应用到Tab控件上。
- **皮肤自定义**：如果预定义的主题不满足需求，可以通过Skin文件进行深度定制。
4. **编程接口**：
- **事件处理**：利用AJAX TabControl的生命周期事件（如Load、SelectedIndexChanged等）来控制内容的动态加载和处理用户交互。
- **程序matic操作**：可以通过代码动态添加、删除和修改选项卡，以及控制选项卡的可见性和选中状态。
5. **与其他控件集成**：
- **内容多样化**：选项卡内部可以包含任何ASP.NET控件，如GridView、Repeater等，甚至可以嵌套其他Tab控件，构建复杂的UI结构。
- **与更新面板结合**：将Tab控件与UpdatePanel结合使用，可以在切换选项卡时实现局部刷新，避免整个页面的重新加载。
6. **响应式设计**：
- **移动设备适配**：确保控件在不同屏幕尺寸和设备类型上的表现良好，可能需要调整布局和触摸友好的交互设计。
7. **性能监控**：
- 使用性能分析工具来监测控件的加载速度和资源消耗，以便进一步优化。
通过以上所述的知识点，我们可以对ASP.NET AJAX Tab控件进行全方位的优化，使其在功能、性能和用户体验方面都达到理想的效果。在实际项目中，应根据具体需求和场景灵活应用这些技术。
tab_theme_II.zip （46个子文件） 
tab_theme_II webroot 
web.config 6KB App_Data Default.aspx 77KB StyleSheet.css 6KB Img msngallery 
emoticons.png 2KB sideshow.png 4KB sidebar.png 4KB winks.png 2KB toolbarbuttons.png 4KB displaypictures.png 1KB webgadgets.png 2KB tab-line.png 158B ie 
tab_selected.gif 1KB
ie_tabbacker_720x296.jpg 10KB tab_unselected.gif 1KB technorati tab.png 417B tab-line.png 153B xp tab-right.gif 298B tab-hover-left.gif 292B tab.gif 106B tab-left.gif 293B tab-active.gif 52B tab-active-left.gif 115B tab-line.gif 42B tab-active-right.gif 123B tab-hover.gif 252B tab-hover-right.gif 296B yui sprite.png 3KB Bin ko AjaxControlToolkit.resources.dll 5KB ru AjaxControlToolkit.resources.dll 14KB nl AjaxControlToolkit.resources.dll 11KB es AjaxControlToolkit.resources.dll 5KB he AjaxControlToolkit.resources.dll 5KB AjaxControlToolkit.pdb 784KB ja AjaxControlToolkit.resources.dll 5KB fr AjaxControlToolkit.resources.dll 5KB zh-CHS AjaxControlToolkit.resources.dll 11KB zh-CHT AjaxControlToolkit.resources.dll 11KB de AjaxControlToolkit.resources.dll 5KB tr-TR AjaxControlToolkit.resources.dll 12KB pt AjaxControlToolkit.resources.dll 5KB ar AjaxControlToolkit.resources.dll 5KB cs AjaxControlToolkit.resources.dll 6KB AjaxControlToolkit.dll.refresh 156B hi AjaxControlToolkit.resources.dll 5KB AjaxControlToolkit.dll 1.11MB it AjaxControlToolkit.resources.dll 5KB174 浏览量
5星 · 资源好评率100%2009-07-10 上传
136 浏览量
193 浏览量
188 浏览量
139 浏览量
2008-06-26 上传
153 浏览量
170 浏览量
2019-07-10 上传
2009-01-20 上传
2009-01-20 上传
164 浏览量
114 浏览量
152 浏览量
112 浏览量
5星 · 资源好评率100% 5星 · 资源好评率100%184 浏览量
132 浏览量
2010-03-12 上传
177 浏览量
2024-11-17 上传
2022-06-18 上传
2021-11-20 上传
2014-07-30 上传
197 浏览量
188 浏览量
资源评论
xjb922
- 粉丝: 3
最新资源
- 工业机器人系统设计与应用3-2机器人的IO通信.pptx
- 项目管理培训_(final)0305.pptx
- 2023年计算机等级考试一级考试试题及答案.doc
- 位微机原理汇编语言和接口技术教程课后习题答案解析.doc
- 高中数学课时7第一章算法初步1.2.3循环语句作业课件新人教A版必修.ppt
- 小学网络安全主题班会.ppt
- 系统集成项目管理工程师-笔记.docx
- 大数据仓库与大数据挖掘课程设计.doc
- 最全的网络营销推广渠道.pdf
- 通信工程专业综合课程设计范本.doc
- 凤凰厦网站设计方案.doc
- 基于51系列单片机的自动喷水系统.doc
- 国家电网公司技能人员网络培训课件开发工作方案.doc
- 网络综合布线毕业设计.doc
- 基于单片机的数字电子时钟设计.docx
- 项目管理工作流程图.pdf
