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="<img src="../imagens/Edit_16x16.png" border="0">"
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="<img src="../imagens/Delete_16x16.png" border="0">"
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
