@ Charset "UTF-8"; / SpryTabbedPanels.css * - versão 0.4 - Pré-Lançamento Spry 1.6.1 * / / * Copyright (c) 2006. Adobe Systems Incorporated. Todos os direitos reservados. * / / * Tabbed Panels Horizontal * * O estilo padrão para um widget TabbedPanels coloca todos os botões da guia * (alinhado à esquerda) acima do painel de conteúdo. * / {TabbedPanels. margin: 0px; padding: 0px; :; flutuar deixou nenhum: clear ; width: 100%; / * hack IE para forçar layout adequado quando precedido por um parágrafo. (Bug hasLayout) * / } . TabbedPanelsTabGroup { margin: 0px; padding: 0px; } li.TabbedPanelsTab {background: url (http://n.7k7kimg.cn/uploads/ddt/20100831/newsnos.jpg) no-repeat ; width: 74px; height: 27px; border: 0; position: relative; top: 1px; float: left; padding: 10px 4px; margin: 0px 1px 0px 0px; font: bold 14px sans-serif; color: # 630; list-style: none; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; } {li.TabbedPanelsTabHover background: url (http://n.7k7kimg.cn/uploads/ddt / 20100831/newsle.jpg) no-repeat; } {li.TabbedPanelsTabSelected background: url (http://n.7k7kimg.cn/uploads/ddt/20100831/newsle.jpg) no-repeat; border-bottom: 1px solid # EEE; } li.TabbedPanelsTab a { color: black; text-decoration: none; background: url (http://n.7k7kimg.cn/uploads/ddt/20100831/newsnos.jpg) no-repeat; } . TabbedPanelsContentGroup { clear: both; width: 375px; } {TabbedPanelsContent. background: url (http://n.7k7kimg.cn/uploads/ddt/20100831/newsbg.jpg) no-repeat; padding: 10px 4px; height: 320px; } / * Este seletor é um exemplo de como alterar o appearnce do momento painel container * ativo. A classe "TabbedPanelsContentVisible" é * programaticamente adicionados e removidos do elemento de conteúdo como o painel * é ativado / desativado. * / TabbedPanelsContentVisible. { } / * Tabbed Panels Vertical * * As regras a seguir substituir algumas das regras padrão acima para que o * TabbedPanels widget renderiza com seus botões de guia ao longo do lado esquerdo do painel de conteúdo * do ativo no momento. * * Com as regras definidas abaixo, a única mudança que terá de ser feita * para mudar um widget horizontal painéis com guias para uma painéis verticais com abas * widget, é usar o "VTabbedPanels" classe no widget de alto nível * elemento de recipiente, em vez de "TabbedPanels". * / / * Este seletor de carros alegóricos do TabGroup para que os botões guia que contém * prestar à esquerda do painel de conteúdo ativo. Uma borda é desenhada ao redor * o recipiente grupo para fazer com que pareça um recipiente lista. * / VTabbedPanels TabbedPanelsTabGroup {.. float: left; width: pra 10em; height: 20em; background-color: # EEE; position: relative; border- top: 1px solid # 999; border-right: 1px solid # 999; border-left: 1px solid # CCC; border-bottom: 1px solid # CCC; } / * Este seletor desativa a propriedade float, que é colocado em cada botão guia * pela regra padrão TabbedPanelsTab seletor acima. Inspira-se também um fundo de fronteira * para a guia. O botão guia terá sua margem esquerda e à direita a partir do * TabGroup, e sua borda superior do botão TabGroup ou guia acima dela. * / VTabbedPanels TabbedPanelsTab {.. float: none; margin: 0px; border-top: none; fronteira -left: none; borda direita: none; } / * Este seletor desativa a propriedade float, que é colocado em cada botão guia * pela regra padrão TabbedPanelsTab seletor acima. Inspira-se também um fundo de fronteira * para a guia. O botão guia terá sua margem esquerda e à direita a partir do * TabGroup, e sua borda superior do botão TabGroup ou guia acima dela. * / VTabbedPanels TabbedPanelsTabSelected {.. background: url (http://n.7k7kimg.cn/uploads / ddt/20100831/nosel.jpg) no-repeat; border-bottom: 1px solid # 999; } / * Este seletor de carros alegóricos dos painéis de conteúdo para o widget para que eles * prestar à direita dos botões com guias. * / . VTabbedPanels TabbedPanelsContentGroup. { claro: none; float: left; padding: 0px; width: 30em; height: 20em; }