Ajax Tookit TabContainer Styles (关于Ajax TabContainer 样式定义)
2008-05-09 14:29
597 查看
根据:http://www.cnblogs.com/DonLiang/archive/2007/05/08/739078.html
找到:Tab作者Ronald Buckton的文章:http://blogs.msdn.com/rbuckton/pages/ajaxskinning.aspx
在这里提到了如何去修改ajax__tab_xp样式 ,然后应用到自己的项目中去。但是依然会有问题:
I am trying to skin the tab controls. When I used the above styles I
lost the styles that define the tabs and all you see is text (rather
than the expected visual appearance of tabs with text labels that
contain the names of my tabs). My guess is that things have changed so
the styles for the tabs no longer work. I did play around witht the
styles to make sure that those definitions were being applied and I was
able to change font size and see it correctly change the font size of
the tabs. How can I get the current definitions of those styles? How
did you get them for the post?
存在。回复中解决的办法在这里:
My problem was that WebResource() was not able to return images from
the installation directory of the Toolkit. I followed the instruction
from the other post and fixed my problem and I also found out where the
original toolkit style definitions were as well ( they were located in
"C:\AjaxControlToolkit-Framework3.5\AjaxControlToolkit\Tabs" on my
machine)
http://forums.asp.net/rss.aspx?ForumID=1022&PostID=1742827
下面是两篇文章,在回复里我会帖出去于这个控件的一点理解。
Skinning model for Calendar and Tabs in Ajax Control Toolkit
(原文引用)
Note: This article was originally posted on 2/2/2007. The
original host of the article is no longer available. Due to the high
demand for the content I am reproducing it in its entirety:
About a week ago we published a new version of the Ajax Control
Toolkit to line up with the RTW bits of ASP.NET AJAX 1.0. This release
included some new features including the Calendar behavior and the
TabContainer control. These two features utilize a CSS skinning model
that is designed to be compatible with all of today's major browsers
(IE 6/7, FireFox, Opera, Safari), however documentation around how the
skinning model works has not yet been included in the Toolkit.
layout to the elements created by Calendar and Tabs. This allows us to
use CSS to define the visual representation for the controls and allow
control implementers to modify the appearance. Each control has a
number of pre-defined skinnable elements which have specific class
names defined. A set of basic required CSS attributes are placed
inside of a CSS file embedded as a WebResource inside the toolkit
assembly. In addition to the required attributes, a number of other
attributes which define the default layout of the control are also
included. Each control contains a default "skin" which is basically a
CSS class name that is applied higher in the DOM than the skinnable
elements. Using CSS child selectors you can override the default style
and define your own custom style.
The default style is called ".ajax__calendar" and uses the following CSS:
To create your own skin for calendar, copy the above CSS and change
the .ajax__calendar skin class name to your own. Finally, set this new
skin class name to the CssClass property of the CalendarBehavior.
The default style is called ".ajax__tab_xp" and uses the following CSS:
To create your own skin for the tabs, copy the above CSS and change
the .ajax__tab_xp skin class name to your own. Finally, set this new
skin class name to the CssClass property of the TabContainer.
解决办法:
This discussion was exactly what I was looking for. Here are the steps that I used to customize the Tab layout:
Note: Make sure you downloaded the AjaxControlToolkit.zip. (Do not download the AjaxControlToolkit-NoSource.zip as this zip file does not contain the images you will need later)
1. Add the "CssClass" attribute to the ajaxToolkit:TabContainer element.
Example: <ajaxToolkit:TabContainer runat="server" ID="Tabs" ActiveTabIndex="1" CssClass="Tabs">
2. Add the following to your master style sheet:
Note: Check out the CSS Class and Image location./* My Custom Tab Theme */
.Tabs .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url("./images/tabs/tab-line.gif") repeat-x bottom;}
.Tabs .ajax__tab_outer {padding-right:4px;background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
.Tabs .ajax__tab_inner {padding-left:3px;background:url("./images/tabs/tab-left.gif") no-repeat;}
.Tabs .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url("./images/tabs/tab.gif") repeat-x;}
.Tabs .ajax__tab_hover .ajax__tab_outer {background:url("./images/tabs/tab-hover-right.gif") no-repeat right;}
.Tabs .ajax__tab_hover .ajax__tab_inner {background:url("./images/tabs/tab-hover-left.gif") no-repeat;}
.Tabs .ajax__tab_hover .ajax__tab_tab {background:url("./images/tabs/tab-hover.gif") repeat-x;}
.Tabs .ajax__tab_active .ajax__tab_outer {background:url("./images/tabs/tab-active-right.gif") no-repeat right;}
.Tabs .ajax__tab_active .ajax__tab_inner {background:url("./images/tabs/tab-active-left.gif") no-repeat;}
.Tabs .ajax__tab_active .ajax__tab_tab {background:url("./images/tabs/tab-active.gif") repeat-x;}
.Tabs .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
3. Copy the images from the AjaxControlToolkit.zip to the folder ./images/tabs.
4. Update this line:
.Tabs .ajax__tab_outer {padding-right:4px;background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
to
Tabs .ajax__tab_outer {background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
5. View your site.... Ick!
找到:Tab作者Ronald Buckton的文章:http://blogs.msdn.com/rbuckton/pages/ajaxskinning.aspx
在这里提到了如何去修改ajax__tab_xp样式 ,然后应用到自己的项目中去。但是依然会有问题:
I am trying to skin the tab controls. When I used the above styles I
lost the styles that define the tabs and all you see is text (rather
than the expected visual appearance of tabs with text labels that
contain the names of my tabs). My guess is that things have changed so
the styles for the tabs no longer work. I did play around witht the
styles to make sure that those definitions were being applied and I was
able to change font size and see it correctly change the font size of
the tabs. How can I get the current definitions of those styles? How
did you get them for the post?
存在。回复中解决的办法在这里:
My problem was that WebResource() was not able to return images from
the installation directory of the Toolkit. I followed the instruction
from the other post and fixed my problem and I also found out where the
original toolkit style definitions were as well ( they were located in
"C:\AjaxControlToolkit-Framework3.5\AjaxControlToolkit\Tabs" on my
machine)
http://forums.asp.net/rss.aspx?ForumID=1022&PostID=1742827
下面是两篇文章,在回复里我会帖出去于这个控件的一点理解。
Skinning model for Calendar and Tabs in Ajax Control Toolkit
(原文引用)
Note: This article was originally posted on 2/2/2007. The
original host of the article is no longer available. Due to the high
demand for the content I am reproducing it in its entirety:
About a week ago we published a new version of the Ajax Control
Toolkit to line up with the RTW bits of ASP.NET AJAX 1.0. This release
included some new features including the Calendar behavior and the
TabContainer control. These two features utilize a CSS skinning model
that is designed to be compatible with all of today's major browsers
(IE 6/7, FireFox, Opera, Safari), however documentation around how the
skinning model works has not yet been included in the Toolkit.
Skinning Model
The new skinning model uses CSS classes and child selectors to applylayout to the elements created by Calendar and Tabs. This allows us to
use CSS to define the visual representation for the controls and allow
control implementers to modify the appearance. Each control has a
number of pre-defined skinnable elements which have specific class
names defined. A set of basic required CSS attributes are placed
inside of a CSS file embedded as a WebResource inside the toolkit
assembly. In addition to the required attributes, a number of other
attributes which define the default layout of the control are also
included. Each control contains a default "skin" which is basically a
CSS class name that is applied higher in the DOM than the skinnable
elements. Using CSS child selectors you can override the default style
and define your own custom style.
CalendarBehavior/Extender
The following table lists the built-in CSS class names applied to the elements within the calendar:Class | Children | Attributes |
---|---|---|
.ajax__calendar_container The outer rectangular container that supplies the border around the calendar element. | .ajax__calendar_header .ajax__calendar_body .ajax__calendar_footer | border-* background-* color font-* |
.ajax__calendar_header A container element that holds the next and previous arrows and the title of the current view. | .ajax__calendar_prev .ajax__calendar_title .ajax__calendar_next | background-* color font-* |
.ajax__calendar_prev An element that displays the arrow to view the previous set of data in the view (previous month/year/decade). | none | background-image |
.ajax__calendar_title An element that displays the title of the current view (month name, year, decade) | none | color font-* |
.ajax__calendar_next An element that displays the arrow to view the previous set of data in the view (previous month/year/decade) | none | |
.ajax__calendar_body A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years) | .ajax__calendar_days .ajax__calendar_months .ajax__calendar_years | background-* color-* font-* |
.ajax__calendar_days A container element that holds the layout for the days in a month. | .ajax__calendar_dayname .ajax__calendar_day | background-* color font-* |
.ajax__calendar_dayname An element that displays the short name of the day of the week. | none | background-* color font-* |
.ajax__calendar_day An element that displays the day of the month. | none | background-* color font-* border-* |
.ajax__calendar_months A container element that holds the layout for the months in a year. | .ajax__calendar_month | background-* color font-* |
.ajax__calendar_month An element that displays the month of the year. | none | background-* color font-* border-* |
.ajax__calendar_years A container element that holds the layout for the years in a decade. | .ajax__calendar_year | background-* color font-* |
.ajax__calendar_year An element that displays the year in a decade. | none | background-* color font-* border-* |
.ajax__calendar_footer A container element that holds the current date | .ajax__calendar_today | background-* color font-* |
.ajax__calendar_today An element that displays the current date | none | background-* color font-* |
.ajax__calendar_hover This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state. | .ajax__calendar_day .ajax__calendar_month .ajax__calendar_year | background-* color font-* border-* |
.ajax__calendar_active This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value. | .ajax__calendar_day .ajax__calendar_month .ajax__calendar_year | background-* color font-* border-* |
.ajax__calendar_other This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade). | .ajax__calendar_day .ajax__calendar_year | background-* color font-* border-* |
.ajax__calendar .ajax__calendar_container { border:1px solid #646464; background-color:#ffffff; color:#000000; } .ajax__calendar .ajax__calendar_footer { border-top:1px solid #f5f5f5; } .ajax__calendar .ajax__calendar_dayname { border-bottom:1px solid #f5f5f5; } .ajax__calendar .ajax__calendar_day { border:1px solid #ffffff; } .ajax__calendar .ajax__calendar_month { border:1px solid #ffffff; } .ajax__calendar .ajax__calendar_year { border:1px solid #ffffff; } .ajax__calendar .ajax__calendar_active .ajax__calendar_day { background-color:#edf9ff; border-color:#0066cc; color:#0066cc; } .ajax__calendar .ajax__calendar_active .ajax__calendar_month { background-color:#edf9ff; border-color:#0066cc; color:#0066cc; } .ajax__calendar .ajax__calendar_active .ajax__calendar_year { background-color:#edf9ff; border-color:#0066cc; color:#0066cc; } .ajax__calendar .ajax__calendar_other .ajax__calendar_day { background-color:#ffffff; border-color:#ffffff; color:#646464; } .ajax__calendar .ajax__calendar_other .ajax__calendar_year { background-color:#ffffff; border-color:#ffffff; color:#646464; } .ajax__calendar .ajax__calendar_hover .ajax__calendar_day { background-color:#edf9ff; border-color:#daf2fc; color:#0066cc; } .ajax__calendar .ajax__calendar_hover .ajax__calendar_month { background-color:#edf9ff; border-color:#daf2fc; color:#0066cc; } .ajax__calendar .ajax__calendar_hover .ajax__calendar_year { background-color:#edf9ff; border-color:#daf2fc; color:#0066cc; } .ajax__calendar .ajax__calendar_hover .ajax__calendar_title { color:#0066cc; } .ajax__calendar .ajax__calendar_hover .ajax__calendar_today { color:#0066cc; }
To create your own skin for calendar, copy the above CSS and change
the .ajax__calendar skin class name to your own. Finally, set this new
skin class name to the CssClass property of the CalendarBehavior.
TabContainer
The following table lists the built-in CSS class names applied to the elements within TabContainer:Class | Children | Attributes |
---|---|---|
.ajax__tab_header A container element that wraps all of the tabs at the top of the TabContainer. | .ajax__tab_outer | border-* background-* color font-* |
.ajax__tab_outer An outer element of a tab, often used to set the left-side background image of the tab. | .ajax__tab_inner | border-* background-* color font-* |
.ajax__tab_inner An inner element of a tab, often used to set the right-side image of the tab | .ajax__tab_tab | border-* background-* color font-* |
.ajax__tab_tab An element of the tab that contains the text content. | none | border-* background-* color font-* |
.ajax__tab_body A container element that wraps the area where a TabPanel is displayed. | none | border-* background-* color font-* |
.ajax__tab_hover This is applied to a tab when the mouse is hovering over. | .ajax__tab_outer | border-* background-* color font-* |
.ajax__tab_active This is applied to a tab when it is the currently selected tab. | .ajax__tab_outer | border-* background-* color font-* |
.ajax__tab_xp .ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom; } .ajax__tab_xp .ajax__tab_outer { padding-right:4px; background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right; height:21px; } .ajax__tab_xp .ajax__tab_inner { padding-left:3px; background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat; } .ajax__tab_xp .ajax__tab_tab { height:13px; padding:4px; margin:0; background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x; } .ajax__tab_xp .ajax__tab_hover .ajax__tab_outer { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right; } .ajax__tab_xp .ajax__tab_hover .ajax__tab_inner { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat; } .ajax__tab_xp .ajax__tab_hover .ajax__tab_tab { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x; } .ajax__tab_xp .ajax__tab_active .ajax__tab_outer { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right; } .ajax__tab_xp .ajax__tab_active .ajax__tab_inner { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat; } .ajax__tab_xp .ajax__tab_active .ajax__tab_tab { background: url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x; } .ajax__tab_xp .ajax__tab_body { font-family:verdana,tahoma,helvetica; font-size:10pt; border:1px solid #999999; border-top:0; padding:8px; background-color:#ffffff; }
To create your own skin for the tabs, copy the above CSS and change
the .ajax__tab_xp skin class name to your own. Finally, set this new
skin class name to the CssClass property of the TabContainer.
解决办法:
This discussion was exactly what I was looking for. Here are the steps that I used to customize the Tab layout:
Note: Make sure you downloaded the AjaxControlToolkit.zip. (Do not download the AjaxControlToolkit-NoSource.zip as this zip file does not contain the images you will need later)
1. Add the "CssClass" attribute to the ajaxToolkit:TabContainer element.
Example: <ajaxToolkit:TabContainer runat="server" ID="Tabs" ActiveTabIndex="1" CssClass="Tabs">
2. Add the following to your master style sheet:
Note: Check out the CSS Class and Image location./* My Custom Tab Theme */
.Tabs .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url("./images/tabs/tab-line.gif") repeat-x bottom;}
.Tabs .ajax__tab_outer {padding-right:4px;background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
.Tabs .ajax__tab_inner {padding-left:3px;background:url("./images/tabs/tab-left.gif") no-repeat;}
.Tabs .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url("./images/tabs/tab.gif") repeat-x;}
.Tabs .ajax__tab_hover .ajax__tab_outer {background:url("./images/tabs/tab-hover-right.gif") no-repeat right;}
.Tabs .ajax__tab_hover .ajax__tab_inner {background:url("./images/tabs/tab-hover-left.gif") no-repeat;}
.Tabs .ajax__tab_hover .ajax__tab_tab {background:url("./images/tabs/tab-hover.gif") repeat-x;}
.Tabs .ajax__tab_active .ajax__tab_outer {background:url("./images/tabs/tab-active-right.gif") no-repeat right;}
.Tabs .ajax__tab_active .ajax__tab_inner {background:url("./images/tabs/tab-active-left.gif") no-repeat;}
.Tabs .ajax__tab_active .ajax__tab_tab {background:url("./images/tabs/tab-active.gif") repeat-x;}
.Tabs .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
3. Copy the images from the AjaxControlToolkit.zip to the folder ./images/tabs.
4. Update this line:
.Tabs .ajax__tab_outer {padding-right:4px;background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
to
Tabs .ajax__tab_outer {background:url("./images/tabs/tab-right.gif") no-repeat right;height:21px;}
5. View your site.... Ick!
相关文章推荐
- ASP.NET AJAX Tookit TabContainer 控件使用常见错误及解决方法
- 关于ASP.NET AJAX中的TabContainer的样式
- [转帖]AjaxControlToolkit.TabContainer 自定义样式续
- 简单的AjaxControlToolkit的TabContainer自定义样式
- AjaxControlToolKit TabContainer 标题头的样式
- AJAX TabContainer 样式设置
- [转帖]AjaxControlToolkit.TabContainer 自定义样式
- TabHost用法—定义Tab标签样式
- AjaxControlTookit中的AutoCompleteExtender位置错位问题 ListSearchExtender不支持中文的问题
- AjaxControlToolkit——TabContainer
- Tip:在使用AjaxControlTookit的控件时响应事件
- ASP.NET AJAX Control Tookit 使用文档
- AjaxControlTookit的ModalPopupExtender弹出应用
- 关于Ajax 错误:'sys'未定义解决方法
- AjaxControlTookit系列之CollapsiblePanel
- vs2010 安装ajax controltookit
- 关于Ajax 错误:'sys'未定义解决方法.
- ajaxToolkit:TabContainer 标签栏文字只显示一半
- Android 怎样在styles.xml中定义自己的样式并引用样式
- ASP.NET AJAX Control Tookit 使用文档