AJAX里TabContainer的CSS

来源:互联网 发布:zepto.js文档 编辑:程序博客网 时间:2024/04/28 09:43
AJAX自从引进了Tab,着实让我开心了一番。但是,在调整Tab的样式的时候,也着实让我吃了一惊。
于是,抱着没有困难也要制造困难的原则,开始了征途:
按照Tab作者Ronald Buckton所说,Tab的CSS包含如下几个类:
(1).ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer.
(2).ajax__tab_outer:An outer element of a tab,often used to set the left-side background image of the tab.
(3).ajax__tab_inner:An inner element of a tab,often used to set the right-side image of the tab.
(4).ajax__tab_tab:An element of a tab that contains the text content.
(5).ajax__tab_body:A container element that wraps the area where a TabPanel is displayed.
(6).ajax__tab_hover:This is applied to a tab when the mouse is hovering over.
(7).ajax__tab_active:This is applied to a tab when it is the currently selected tab.

我画了个简图,当然,鼠标放上去(.ajax__tab_hover),和当前Tab(.ajax__tab_active)的那个就没画上去。

层次关系如图所示,弄清楚这个层次关系,对设计Tab样式有很大帮助。

我想说的也就这些,实例晚些时候放出来.  
原创粉丝点击