none
Controle de abas RRS feed

  • Pergunta

  • Olá pessoal,

    Fiz duas abas usando CSS que peguei na internet. Ficou show, muito bom o código. Mas estou com um pequeno problema que quanto ao DataBind do meu DataGrid. Quando navego entre as páginas do DataGrid, por exemplo, a aba volta para o index padrão. Como faço para manter na mesma aba? Abaixo segue o código aspx e css.

    Página aspx:

    <%@ Page Title="" Language="VB" MasterPageFile="~/administrador/MasterPage.master" AutoEventWireup="false" CodeFile="cadPaises.aspx.vb" Inherits="administrador_cadPaises" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <div style="text-align:left; color:#08C; font-size:12px; margin-bottom:10px;"><asp:Label ID="LbMensagem" runat="server" Text="Label"></asp:Label></div>
        <div>
            <ul class="tabs">
                <li>
                    <input type="radio" checked name="tabs" id="tab1">
                    <label for="tab1">CADASTROS</label>
                    <div id="tab-content1" class="tab-content animated fadeIn">
                        <div>
                            <asp:ImageButton ID="BtnSalvar" runat="server" ImageUrl="~/imagens/Save_24x24.png" />
                            <asp:ImageButton ID="BtnCancelar" runat="server" ImageUrl="~/imagens/Cancel_24x24.png" />
                            <asp:ImageButton ID="BtnExcluir" runat="server" ImageUrl="~/imagens/Delete_24x24.png" />
                        </div>
                        <div><asp:HiddenField ID="hfCodigo" runat="server" /></div>
                        <div>Nome:</div>
                        <div><asp:TextBox ID="TxtNome" runat="server" MaxLength="100" Width="90%"></asp:TextBox></div>
                    </div>
                </li>
                <li>
                    <input type="radio" name="tabs" id="tab2">
                    <label for="tab2">CONSULTAS</label>
                    <div id="tab-content2" class="tab-content animated fadeIn">
                        <div></div>
                        <div><asp:Label ID="LbRegistros" runat="server" Text="Label"></asp:Label></div>
                        <div>
                            <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" 
                                CssClass="grid" GridLines="None">
                                <AlternatingItemStyle CssClass="grid alternate" />
                                <Columns>
                                    <asp:BoundColumn DataField="Pais_ID" HeaderText="CÓDIGO" Visible="False">
                                        <HeaderStyle Width="0%" />
                                    </asp:BoundColumn>
                                    <asp:BoundColumn HeaderText="NOME DO PAÍS" DataField="Pais_Nome">
                                        <HeaderStyle Width="90%" />
                                    </asp:BoundColumn>
                                    <asp:ButtonColumn HeaderText="EDITA" 
                                        Text="&lt;img src=&quot;../imagens/Edit_16x16.png&quot; border=&quot;0&quot;&gt;" 
                                        CommandName="Edit">
                                        <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                                            Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" 
                                            Width="5%" />
                                        <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                                            Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
                                    </asp:ButtonColumn>
                                    <asp:ButtonColumn HeaderText="EXCLUI" 
                                        Text="&lt;img src=&quot;../imagens/Delete_16x16.png&quot; border=&quot;0&quot;&gt;" 
                                        CommandName="Delete">
                                        <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                                            Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" 
                                            Width="5%" />
                                        <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" 
                                            Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
                                    </asp:ButtonColumn>
                                </Columns>
                                <HeaderStyle CssClass="grid header" />
                                <PagerStyle CssClass="grid page" />
                            </asp:DataGrid></div>
                    </div>
                </li>
                
            </ul>
        </div>
    
    </asp:Content>
    

    Código CSS:

    body, html
    {
        /*height: 100%;*/
        margin: 0;
        -webkit-font-smoothing: antialiased;
        font-weight: 12px;
        /*background: #aadfeb;*/
        text-align: center;
        font-family: Tahoma, Verdana, helvetica;
    }
    
    .tabs input[type=radio]
    {
        ;
        top: -9999px;
        left: -9999px;
    }
          
    .tabs
    {
        /*width: 650px;*/
        width:100%;
        float: none;
        list-style: none;
        ;
        padding: 0;
        margin: 0px auto;
        top: 0px;
        left: 0px;
    }
          
    .tabs li
    {
        float: left;
    }
          
    .tabs label
    {
        display: block;
        padding: 5px 10px;
        /*border-radius: 2px 2px 0 0;*/
        color: #08C;
        font-size: 12px;
        font-weight: normal;
        font-family: Tahoma, Verdana, 'Lily Script One', helveti;
        background: rgba(255,255,255,0.2);
        cursor: pointer;
        ;
        /*top: 3px;*/
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
              
        -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */
        -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */
        -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */
        border-radius: 7px 7px 0px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-style:solid;
        border-width:1px;
        border-color:Gray;
    }
          
    .tabs label:hover
    {
        background: rgba(255,255,255,0.5);
        top: 0;
            
        -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */
        -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */
        -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */
        border-radius: 7px 7px 0px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    }
           
    [id^=tab]:checked + label
    {
        background: #08C;
        color: white;
        top: 0;
    }
           
    [id^=tab]:checked ~ [id^=tab-content]
    {
        display: block;
    }
    
    .tab-content
    {
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        font-size: 12px;
        line-height: 140%;
        padding-top: 10px;
        /*background: #08C;*/
        background:white;
        padding: 15px;
        /*color: white;*/
        ;
        top: 33px;
        left: 0;
        
        box-sizing: border-box;        
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
            
        -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */
        -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */
        -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */
        border-radius: 7px 0px 7px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-style:solid;
        border-width:1px;
        border-color:Gray;
    }
    

    Grato,

    Ilano

    segunda-feira, 16 de fevereiro de 2015 19:13

Todas as Respostas