tabela com várias abas
2 participantes
Página 1 de 2
Página 1 de 2 • 1, 2
tabela com várias abas
Vejam a imagem abaixo:
Link do efeito abaixo para entenderem o sistema, gostaria de algo assim, com uma lista de A a Z, onde cada letra abrisse uma área onde estariam os links referentes.
Queria saber se e possível fazer.
Link do efeito:
http://www.pieceproject.net/biografias/
Meu fórum:
http://somosmugiwara.forumeiros.com/forum
Link do efeito abaixo para entenderem o sistema, gostaria de algo assim, com uma lista de A a Z, onde cada letra abrisse uma área onde estariam os links referentes.
Queria saber se e possível fazer.
Link do efeito:
http://www.pieceproject.net/biografias/
Meu fórum:
http://somosmugiwara.forumeiros.com/forum
Convidado- Convidado
Re: tabela com várias abas
Olá!
Sim é possível, vou verificar o código utilizado lá pra adaptar em seu fórum ok?
JS
Sim é possível, vou verificar o código utilizado lá pra adaptar em seu fórum ok?
JS
Re: tabela com várias abas
Que estranho, tente copiar o conteúdo desta página aqui
http://jsfiddle.net/CME64/CARcQ/4/embedded/result/
Veja que funciona perfeitamente..
http://jsfiddle.net/CME64/CARcQ/4/embedded/result/
Veja que funciona perfeitamente..
Re: tabela com várias abas
Humrum, funcionou depois que ajustei os links, mais ficará ruim para editar, já que dependerei de links externos, tanto JS quanto CSS...
vou tentar dar um jeito aqui, depois volto com repostas.
vou tentar dar um jeito aqui, depois volto com repostas.
Convidado- Convidado
Re: tabela com várias abas
Testei novamente mais não obtive sucesso, veja abaixo:
http://somosmugiwara.forumeiros.com/h39-
Quando clica em alguma letra, o efeito não funciona....
http://somosmugiwara.forumeiros.com/h39-
Quando clica em alguma letra, o efeito não funciona....
Convidado- Convidado
Re: tabela com várias abas
Olá amigos, muito estranho mesmo. Bom de qualquer forma, tente a versão jQuery UI
http://jqueryui.com/tabs
Poderia pegar o código do fórum la, mas sei la não acho muito certo isso.
http://jqueryui.com/tabs
Poderia pegar o código do fórum la, mas sei la não acho muito certo isso.
Re: tabela com várias abas
Este seria um pouco parecido, mais ainda não teria a função de quando se clicar nas letras apareça somente os links iniciados com tal letra......
queria algo mais parecido com o que mostrei...
queria algo mais parecido com o que mostrei...
Convidado- Convidado
Re: tabela com várias abas
Olá meu amigo, você tem certeza que está fazendo os processos de maneira correta? Porque eu realizei o teste e o efeito funcionou perfeitamente, veja:
http://punbbteste.forumeiros.com/h3-navegacao-por-abas
Inclusive fiz de duas maneiras, com e sem o corpo do fórum
http://punbbteste.forumeiros.com/h4-navegacao-por-abas-2
Veja como fiz
A navegação por abas sem o corpo do fórum
E com o corpo do fórum (lembrando que é você que tem que marcar a opção)
Veja se agora resulta.
http://punbbteste.forumeiros.com/h3-navegacao-por-abas
Inclusive fiz de duas maneiras, com e sem o corpo do fórum
http://punbbteste.forumeiros.com/h4-navegacao-por-abas-2
Veja como fiz
A navegação por abas sem o corpo do fórum
- Código:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
var _alphabets = $('.alphabet > a');
var _contentRows = $('#countries-table tbody tr');
_alphabets.click(function () {
var _letter = $(this), _text = $(this).text(), _count = 0;
if(_text == 'All') _text = '.';
_alphabets.removeClass("active");
_letter.addClass("active");
_contentRows.hide();
_contentRows.each(function (i) {
var _cellText = $(this).children('td').eq(0).text();
if (RegExp('^' + _text).test(_cellText)) {
_count += 1;
$(this).fadeIn(400);
}
});
});
});
</script>
<style type="text/css">
-/* stylesheet contains style for filtering alphabetical lists and tables
http://www.faridesign.net
*/
.wrapper
{
width: 680px;
margin: 0 auto;
}
.wrapper h1
{
color: #555;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
letter-spacing: 2px;
}
#conutries
{
width: 650px;
background: white;
}
.alphabet
{
margin: 0 0 10px;
overflow: hidden;
}
.alphabet a, #countries-table tr
{
transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-webkit-transition: background-color 0.3s ease-in-out;
}
.alphabet a
{
width: 20px;
float: left;
color: #333;
cursor: pointer;
height: 20px;
border: 1px solid #CCC;
display: block;
padding: 2px 2px;
font-size: 14px;
text-align: center;
line-height: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
border-right: none;
text-decoration: none;
background-color: #F1F1F1;
}
.alphabet a.first
{
border-radius: 3px 0 0 3px;
}
.alphabet a.last
{
border-right: 1px solid silver;
border-radius: 0 3px 3px 0;
}
.alphabet a:hover,
.alphabet a.active
{
background: #FBF8E9;
font-weight: bold;
}
@charset "utf-8";
/* CSS Document */
.wrapper { width: 960px; margin: 0px auto; padding-top: 20px; min-height: 600px; }
.table-grid h1 { padding-top: 35px; font-size: 20px; }
.table-grid table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; width: 100%; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 12px; color:Black; }
.table-grid body td { padding: 5px 5px 5px 5px; min-width: 50px; height: 26px; }
.table-grid thead th
{
}
.table-grid tbody td label { display: block; text-transform: uppercase !important; font-size: 110%; }
.table-grid tbody td label { display: block; text-transform: uppercase; font-size: 105%; font-weight: bold; }
.table-grid tbody td span { display: block; opacity: .7; }
.table-grid thead th label { display: block; font-weight: 500; text-transform: uppercase; }
.table-grid thead th span { opacity: .7; }
.table-grid thead th.null { background: #fff; }
/* column rounded */
.table-grid table.bordered
{
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover
{
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th
{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.table-grid table.gray thead th
{
background-color: #F1F1F1;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#EEE));
background-image: -webkit-linear-gradient(top, whiteSmoke, #EEE);
background-image: -moz-linear-gradient(top, whiteSmoke, #EEE);
background-image: -ms-linear-gradient(top, whiteSmoke, #EEE);
background-image: -o-linear-gradient(top, whiteSmoke, #EEE);
background-image: linear-gradient(top, whiteSmoke, #EEE);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.blue thead th
{
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.bordered td:first-child, .bordered th:first-child { border-left: none; }
.table-grid table.bordered th { border-top: none; }
.table-grid table.bordered th:first-child { -moz-border-radius: 6px 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; }
.table-grid table.bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }
.table-grid table.bordered th:only-child { -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
.table-grid table.bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; }
.table-grid table.bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }
.zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #F2F2F2; }
.zebra tbody tr:nth-child(even) { background: #F5F5F5; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; }
/* column colors */
.table-grid thead th.blue { border-bottom: 2px solid #1FA2E1; }
.table-grid thead th.black { border-bottom: 2px solid black; }
.table-grid thead th.red { border-bottom: 2px solid red; }
.table-grid thead th.green { border-bottom: 2px solid green; }
.table-grid thead th.gray { border-bottom: 2px solid #ccc; }
/* column size */
.table-grid thead th.col1 { width: 1%; }
.table-grid thead th.col2 { width: 2%; }
.table-grid thead th.col3 { width: 3%; }
.table-grid thead th.col4 { width: 4%; }
.table-grid thead th.col5 { width: 5%; }
.table-grid thead th.col6 { width: 6%; }
.table-grid thead th.col7 { width: 7%; }
.table-grid thead th.col8 { width: 8%; }
.table-grid thead th.col9 { width: 9%; }
.table-grid thead th.col10 { width: 10%; }
.table-grid thead th.col11 { width: 11%; }
.table-grid thead th.col12 { width: 12%; }
.table-grid thead th.col13 { width: 13%; }
.table-grid thead th.col14 { width: 14%; }
.table-grid thead th.col15 { width: 15%; }
.table-grid thead th.col16 { width: 16%; }
.table-grid thead th.col17 { width: 17%; }
.table-grid thead th.col18 { width: 18%; }
.table-grid thead th.col19 { width: 19%; }
.table-grid thead th.col20 { width: 20%; }
.table-grid thead th.col21 { width: 21%; }
.table-grid thead th.col22 { width: 22%; }
.table-grid thead th.col23 { width: 23%; }
.table-grid thead th.col24 { width: 24%; }
.table-grid thead th.col25 { width: 25%; }
.table-grid thead th.col26 { width: 26%; }
.table-grid thead th.col27 { width: 27%; }
.table-grid thead th.col28 { width: 28%; }
.table-grid thead th.col29 { width: 29%; }
.table-grid thead th.col30 { width: 30%; }
.table-grid thead th.col31 { width: 31%; }
.table-grid thead th.col32 { width: 32%; }
.table-grid thead th.col33 { width: 33%; }
.table-grid thead th.col34 { width: 34%; }
.table-grid thead th.col35 { width: 35%; }
.table-grid thead th.col36 { width: 36%; }
.table-grid thead th.col37 { width: 37%; }
.table-grid thead th.col38 { width: 38%; }
.table-grid thead th.col39 { width: 39%; }
.table-grid thead th.col40 { width: 40%; }
.table-grid thead th.col41 { width: 41%; }
.table-grid thead th.col42 { width: 42%; }
.table-grid thead th.col43 { width: 43%; }
.table-grid thead th.col44 { width: 44%; }
.table-grid thead th.col45 { width: 45%; }
.table-grid thead th.col46 { width: 46%; }
.table-grid thead th.col47 { width: 47%; }
.table-grid thead th.col48 { width: 48%; }
.table-grid thead th.col49 { width: 49%; }
.table-grid thead th.col50 { width: 50%; }
.table-grid thead th.col51 { width: 51%; }
.table-grid thead th.col52 { width: 52%; }
.table-grid thead th.col53 { width: 53%; }
.table-grid thead th.col54 { width: 54%; }
.table-grid thead th.col55 { width: 55%; }
.table-grid thead th.col56 { width: 56%; }
.table-grid thead th.col57 { width: 57%; }
.table-grid thead th.col58 { width: 58%; }
.table-grid thead th.col59 { width: 59%; }
.table-grid thead th.col60 { width: 60%; }
.table-grid thead th.col61 { width: 61%; }
.table-grid thead th.col62 { width: 62%; }
.table-grid thead th.col63 { width: 63%; }
.table-grid thead th.col64 { width: 64%; }
.table-grid thead th.col65 { width: 65%; }
.table-grid thead th.col66 { width: 66%; }
.table-grid thead th.col67 { width: 67%; }
.table-grid thead th.col68 { width: 68%; }
.table-grid thead th.col69 { width: 69%; }
.table-grid thead th.col70 { width: 70%; }
.table-grid thead th.col71 { width: 71%; }
.table-grid thead th.col72 { width: 72%; }
.table-grid thead th.col73 { width: 73%; }
.table-grid thead th.col74 { width: 74%; }
.table-grid thead th.col75 { width: 75%; }
.table-grid thead th.col76 { width: 76%; }
.table-grid thead th.col77 { width: 77%; }
.table-grid thead th.col78 { width: 78%; }
.table-grid thead th.col79 { width: 79%; }
.table-grid thead th.col80 { width: 80%; }
.table-grid thead th.col81 { width: 81%; }
.table-grid thead th.col82 { width: 82%; }
.table-grid thead th.col83 { width: 83%; }
.table-grid thead th.col84 { width: 84%; }
.table-grid thead th.col85 { width: 85%; }
.table-grid thead th.col86 { width: 86%; }
.table-grid thead th.col87 { width: 87%; }
.table-grid thead th.col88 { width: 88%; }
.table-grid thead th.col89 { width: 89%; }
.table-grid thead th.col90 { width: 90%; }
.table-grid thead th.col91 { width: 91%; }
.table-grid thead th.col92 { width: 92%; }
.table-grid thead th.col93 { width: 93%; }
.table-grid thead th.col94 { width: 94%; }
.table-grid thead th.col95 { width: 95%; }
.table-grid thead th.col96 { width: 96%; }
.table-grid thead th.col97 { width: 97%; }
.table-grid thead th.col98 { width: 98%; }
.table-grid thead th.col99 { width: 99%; }
.table-grid thead th.col100 { width: 100%; }
</style><div class="wrapper">
<h1>Countries of the World</h1>
<div class="alphabet">
<a href="#" class="active">All</a>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>
<a href="#">H</a>
<a href="#">I</a>
<a href="#">J</a>
<a href="#">K</a>
<a href="#">L</a>
<a href="#">M</a>
<a href="#">N</a>
<a href="#">O</a>
<a href="#">P</a>
<a href="#">Q</a>
<a href="#">R</a>
<a href="#">S</a>
<a href="#">T</a>
<a href="#">U</a>
<a href="#">V</a>
<a href="#">W</a>
<a href="#">X</a>
<a href="#">Y</a>
<a class="last" href="#">Z</a>
</div>
<div id="conutries" class="table-grid">
<table id="countries-table" class="bordered gray">
<thead>
<tr>
<th class="col22 blue">
<label>Country Name</label><span></span>
</th>
<th class="col22 blue">
<label>University Name</label><span></span>
</th>
</tr>
</thead>
<tr>
<td>Australia</td>
<td>Deakin University</td>
</tr>
<tr>
<td>Australia</td>
<td>Edith Cowan University</td>
</tr>
<tr>
<td>Australia</td>
<td>Flinders University</td>
</tr>
<tr>
<td>Brazil</td>
<td>The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )</td>
</tr>
<tr>
<td>Canada</td>
<td>George Brown College</td>
</tr>
<tr>
<td>China</td>
<td>Shandong Polytechnic University</td>
</tr>
<tr>
<td>Canada</td>
<td>University of Ontario Institute of Technology</td>
</tr>
<tr>
<td>Canada</td>
<td>University of Prince Edward Island (UPEI)</td>
</tr>
<tr>
<td>Canada</td>
<td>Vancouver Island University</td>
</tr>
<tr>
<td>France</td>
<td>ESIGELEC – School of Engineering Rougen</td>
</tr>
<tr>
<td>France</td>
<td>Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA</td>
</tr>
<tr>
<td>France</td>
<td>EM Normandie</td>
</tr>
<tr>
<td>France</td>
<td>Group Euromed Management</td>
</tr>
<tr>
<td>France</td>
<td>Institut D’ Etudes Politiques De Toulouse</td>
</tr>
<tr>
<td>France</td>
<td>Sciences Po Lille</td>
</tr>
<tr>
<td>France</td>
<td>Universite Angers</td>
</tr>
<tr>
<td>Germany</td>
<td>Cologne Business School</td>
</tr>
<tr>
<td>Germany</td>
<td>Hochschule Osnabruck- University of Applied Sciences Osnabruck</td>
</tr>
<tr>
<td>Neitherlands</td>
<td>Fontys University of Applied Sciences</td>
</tr>
<tr>
<td>Switzerland</td>
<td>IMI International Hotel Management Institute Switzerland</td>
</tr>
<tr>
<td>Taiwan</td>
<td>China Medical University</td>
</tr>
<tr>
<td>Taiwan</td>
<td>Providence University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>Central Michigan University</td>
</tr>
<tr>
<td>U.K</td>
<td>Glasgow Caledonian University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>Purdue University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>San Diego State University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>University of Massachusetts, Lowell</td>
</tr>
</table>
</div>
</div>
E com o corpo do fórum (lembrando que é você que tem que marcar a opção)
- Código:
<script>
$(function () {
var _alphabets = $('.alphabet > a');
var _contentRows = $('#countries-table tbody tr');
_alphabets.click(function () {
var _letter = $(this), _text = $(this).text(), _count = 0;
if(_text == 'All') _text = '.';
_alphabets.removeClass("active");
_letter.addClass("active");
_contentRows.hide();
_contentRows.each(function (i) {
var _cellText = $(this).children('td').eq(0).text();
if (RegExp('^' + _text).test(_cellText)) {
_count += 1;
$(this).fadeIn(400);
}
});
});
});
</script>
<style type="text/css">
-/* stylesheet contains style for filtering alphabetical lists and tables
http://www.faridesign.net
*/
.wrapper
{
width: 680px;
margin: 0 auto;
}
.wrapper h1
{
color: #555;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
letter-spacing: 2px;
}
#conutries
{
width: 650px;
background: white;
}
.alphabet
{
margin: 0 0 10px;
overflow: hidden;
}
.alphabet a, #countries-table tr
{
transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-webkit-transition: background-color 0.3s ease-in-out;
}
.alphabet a
{
width: 20px;
float: left;
color: #333;
cursor: pointer;
height: 20px;
border: 1px solid #CCC;
display: block;
padding: 2px 2px;
font-size: 14px;
text-align: center;
line-height: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
border-right: none;
text-decoration: none;
background-color: #F1F1F1;
}
.alphabet a.first
{
border-radius: 3px 0 0 3px;
}
.alphabet a.last
{
border-right: 1px solid silver;
border-radius: 0 3px 3px 0;
}
.alphabet a:hover,
.alphabet a.active
{
background: #FBF8E9;
font-weight: bold;
}
@charset "utf-8";
/* CSS Document */
.wrapper { width: 960px; margin: 0px auto; padding-top: 20px; min-height: 600px; }
.table-grid h1 { padding-top: 35px; font-size: 20px; }
.table-grid table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; width: 100%; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 12px; color:Black; }
.table-grid body td { padding: 5px 5px 5px 5px; min-width: 50px; height: 26px; }
.table-grid thead th
{
}
.table-grid tbody td label { display: block; text-transform: uppercase !important; font-size: 110%; }
.table-grid tbody td label { display: block; text-transform: uppercase; font-size: 105%; font-weight: bold; }
.table-grid tbody td span { display: block; opacity: .7; }
.table-grid thead th label { display: block; font-weight: 500; text-transform: uppercase; }
.table-grid thead th span { opacity: .7; }
.table-grid thead th.null { background: #fff; }
/* column rounded */
.table-grid table.bordered
{
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover
{
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th
{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.table-grid table.gray thead th
{
background-color: #F1F1F1;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#EEE));
background-image: -webkit-linear-gradient(top, whiteSmoke, #EEE);
background-image: -moz-linear-gradient(top, whiteSmoke, #EEE);
background-image: -ms-linear-gradient(top, whiteSmoke, #EEE);
background-image: -o-linear-gradient(top, whiteSmoke, #EEE);
background-image: linear-gradient(top, whiteSmoke, #EEE);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.blue thead th
{
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.bordered td:first-child, .bordered th:first-child { border-left: none; }
.table-grid table.bordered th { border-top: none; }
.table-grid table.bordered th:first-child { -moz-border-radius: 6px 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; }
.table-grid table.bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }
.table-grid table.bordered th:only-child { -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
.table-grid table.bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; }
.table-grid table.bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }
.zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #F2F2F2; }
.zebra tbody tr:nth-child(even) { background: #F5F5F5; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; }
/* column colors */
.table-grid thead th.blue { border-bottom: 2px solid #1FA2E1; }
.table-grid thead th.black { border-bottom: 2px solid black; }
.table-grid thead th.red { border-bottom: 2px solid red; }
.table-grid thead th.green { border-bottom: 2px solid green; }
.table-grid thead th.gray { border-bottom: 2px solid #ccc; }
/* column size */
.table-grid thead th.col1 { width: 1%; }
.table-grid thead th.col2 { width: 2%; }
.table-grid thead th.col3 { width: 3%; }
.table-grid thead th.col4 { width: 4%; }
.table-grid thead th.col5 { width: 5%; }
.table-grid thead th.col6 { width: 6%; }
.table-grid thead th.col7 { width: 7%; }
.table-grid thead th.col8 { width: 8%; }
.table-grid thead th.col9 { width: 9%; }
.table-grid thead th.col10 { width: 10%; }
.table-grid thead th.col11 { width: 11%; }
.table-grid thead th.col12 { width: 12%; }
.table-grid thead th.col13 { width: 13%; }
.table-grid thead th.col14 { width: 14%; }
.table-grid thead th.col15 { width: 15%; }
.table-grid thead th.col16 { width: 16%; }
.table-grid thead th.col17 { width: 17%; }
.table-grid thead th.col18 { width: 18%; }
.table-grid thead th.col19 { width: 19%; }
.table-grid thead th.col20 { width: 20%; }
.table-grid thead th.col21 { width: 21%; }
.table-grid thead th.col22 { width: 22%; }
.table-grid thead th.col23 { width: 23%; }
.table-grid thead th.col24 { width: 24%; }
.table-grid thead th.col25 { width: 25%; }
.table-grid thead th.col26 { width: 26%; }
.table-grid thead th.col27 { width: 27%; }
.table-grid thead th.col28 { width: 28%; }
.table-grid thead th.col29 { width: 29%; }
.table-grid thead th.col30 { width: 30%; }
.table-grid thead th.col31 { width: 31%; }
.table-grid thead th.col32 { width: 32%; }
.table-grid thead th.col33 { width: 33%; }
.table-grid thead th.col34 { width: 34%; }
.table-grid thead th.col35 { width: 35%; }
.table-grid thead th.col36 { width: 36%; }
.table-grid thead th.col37 { width: 37%; }
.table-grid thead th.col38 { width: 38%; }
.table-grid thead th.col39 { width: 39%; }
.table-grid thead th.col40 { width: 40%; }
.table-grid thead th.col41 { width: 41%; }
.table-grid thead th.col42 { width: 42%; }
.table-grid thead th.col43 { width: 43%; }
.table-grid thead th.col44 { width: 44%; }
.table-grid thead th.col45 { width: 45%; }
.table-grid thead th.col46 { width: 46%; }
.table-grid thead th.col47 { width: 47%; }
.table-grid thead th.col48 { width: 48%; }
.table-grid thead th.col49 { width: 49%; }
.table-grid thead th.col50 { width: 50%; }
.table-grid thead th.col51 { width: 51%; }
.table-grid thead th.col52 { width: 52%; }
.table-grid thead th.col53 { width: 53%; }
.table-grid thead th.col54 { width: 54%; }
.table-grid thead th.col55 { width: 55%; }
.table-grid thead th.col56 { width: 56%; }
.table-grid thead th.col57 { width: 57%; }
.table-grid thead th.col58 { width: 58%; }
.table-grid thead th.col59 { width: 59%; }
.table-grid thead th.col60 { width: 60%; }
.table-grid thead th.col61 { width: 61%; }
.table-grid thead th.col62 { width: 62%; }
.table-grid thead th.col63 { width: 63%; }
.table-grid thead th.col64 { width: 64%; }
.table-grid thead th.col65 { width: 65%; }
.table-grid thead th.col66 { width: 66%; }
.table-grid thead th.col67 { width: 67%; }
.table-grid thead th.col68 { width: 68%; }
.table-grid thead th.col69 { width: 69%; }
.table-grid thead th.col70 { width: 70%; }
.table-grid thead th.col71 { width: 71%; }
.table-grid thead th.col72 { width: 72%; }
.table-grid thead th.col73 { width: 73%; }
.table-grid thead th.col74 { width: 74%; }
.table-grid thead th.col75 { width: 75%; }
.table-grid thead th.col76 { width: 76%; }
.table-grid thead th.col77 { width: 77%; }
.table-grid thead th.col78 { width: 78%; }
.table-grid thead th.col79 { width: 79%; }
.table-grid thead th.col80 { width: 80%; }
.table-grid thead th.col81 { width: 81%; }
.table-grid thead th.col82 { width: 82%; }
.table-grid thead th.col83 { width: 83%; }
.table-grid thead th.col84 { width: 84%; }
.table-grid thead th.col85 { width: 85%; }
.table-grid thead th.col86 { width: 86%; }
.table-grid thead th.col87 { width: 87%; }
.table-grid thead th.col88 { width: 88%; }
.table-grid thead th.col89 { width: 89%; }
.table-grid thead th.col90 { width: 90%; }
.table-grid thead th.col91 { width: 91%; }
.table-grid thead th.col92 { width: 92%; }
.table-grid thead th.col93 { width: 93%; }
.table-grid thead th.col94 { width: 94%; }
.table-grid thead th.col95 { width: 95%; }
.table-grid thead th.col96 { width: 96%; }
.table-grid thead th.col97 { width: 97%; }
.table-grid thead th.col98 { width: 98%; }
.table-grid thead th.col99 { width: 99%; }
.table-grid thead th.col100 { width: 100%; }
</style><div class="wrapper">
<h1>Countries of the World</h1>
<div class="alphabet">
<a href="#" class="active">All</a>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>
<a href="#">H</a>
<a href="#">I</a>
<a href="#">J</a>
<a href="#">K</a>
<a href="#">L</a>
<a href="#">M</a>
<a href="#">N</a>
<a href="#">O</a>
<a href="#">P</a>
<a href="#">Q</a>
<a href="#">R</a>
<a href="#">S</a>
<a href="#">T</a>
<a href="#">U</a>
<a href="#">V</a>
<a href="#">W</a>
<a href="#">X</a>
<a href="#">Y</a>
<a class="last" href="#">Z</a>
</div>
<div id="conutries" class="table-grid">
<table id="countries-table" class="bordered gray">
<thead>
<tr>
<th class="col22 blue">
<label>Country Name</label><span></span>
</th>
<th class="col22 blue">
<label>University Name</label><span></span>
</th>
</tr>
</thead>
<tr>
<td>Australia</td>
<td>Deakin University</td>
</tr>
<tr>
<td>Australia</td>
<td>Edith Cowan University</td>
</tr>
<tr>
<td>Australia</td>
<td>Flinders University</td>
</tr>
<tr>
<td>Brazil</td>
<td>The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )</td>
</tr>
<tr>
<td>Canada</td>
<td>George Brown College</td>
</tr>
<tr>
<td>China</td>
<td>Shandong Polytechnic University</td>
</tr>
<tr>
<td>Canada</td>
<td>University of Ontario Institute of Technology</td>
</tr>
<tr>
<td>Canada</td>
<td>University of Prince Edward Island (UPEI)</td>
</tr>
<tr>
<td>Canada</td>
<td>Vancouver Island University</td>
</tr>
<tr>
<td>France</td>
<td>ESIGELEC – School of Engineering Rougen</td>
</tr>
<tr>
<td>France</td>
<td>Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA</td>
</tr>
<tr>
<td>France</td>
<td>EM Normandie</td>
</tr>
<tr>
<td>France</td>
<td>Group Euromed Management</td>
</tr>
<tr>
<td>France</td>
<td>Institut D’ Etudes Politiques De Toulouse</td>
</tr>
<tr>
<td>France</td>
<td>Sciences Po Lille</td>
</tr>
<tr>
<td>France</td>
<td>Universite Angers</td>
</tr>
<tr>
<td>Germany</td>
<td>Cologne Business School</td>
</tr>
<tr>
<td>Germany</td>
<td>Hochschule Osnabruck- University of Applied Sciences Osnabruck</td>
</tr>
<tr>
<td>Neitherlands</td>
<td>Fontys University of Applied Sciences</td>
</tr>
<tr>
<td>Switzerland</td>
<td>IMI International Hotel Management Institute Switzerland</td>
</tr>
<tr>
<td>Taiwan</td>
<td>China Medical University</td>
</tr>
<tr>
<td>Taiwan</td>
<td>Providence University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>Central Michigan University</td>
</tr>
<tr>
<td>U.K</td>
<td>Glasgow Caledonian University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>Purdue University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>San Diego State University</td>
</tr>
<tr>
<td>U.S.A</td>
<td>University of Massachusetts, Lowell</td>
</tr>
</table>
</div>
</div>
Veja se agora resulta.
Re: tabela com várias abas
Resultou sim, eu estava colocando o código JS dentro da tag script...
Acho que estava errando na parte de colocar o código JS, sou meio lerdo ainda nisso....
Pois bem, vou editar o CSS fazer um modelo próprio.....
Depois trago o resultado...
Valeu cara ficou bem legal...
Edit:
quando edito algo na página o efeito deixa de funcionar, queria saber o porque de esta acontecendo isso?
Acho que estava errando na parte de colocar o código JS, sou meio lerdo ainda nisso....
Pois bem, vou editar o CSS fazer um modelo próprio.....
Depois trago o resultado...
Valeu cara ficou bem legal...
Edit:
quando edito algo na página o efeito deixa de funcionar, queria saber o porque de esta acontecendo isso?
Última edição por Houdini em Qui 30 Jan 2014, 1:22 pm, editado 1 vez(es)
Convidado- Convidado
Re: tabela com várias abas
Como pode ver abaixo:
http://somosmugiwara.forumeiros.com/h40-#
Tava editando o CSS, mais quando salvei as alterações o efeito parou de funcionar...
Já tive problemas iguais desde a atualização nas páginas HTML que a forumeiros implantou... em algumas páginas minhas algumas classes de palavras e ID foram modificados quando salvei a página, creio que o mesmo está acontecendo aqui....
http://somosmugiwara.forumeiros.com/h40-#
Tava editando o CSS, mais quando salvei as alterações o efeito parou de funcionar...
Já tive problemas iguais desde a atualização nas páginas HTML que a forumeiros implantou... em algumas páginas minhas algumas classes de palavras e ID foram modificados quando salvei a página, creio que o mesmo está acontecendo aqui....
Convidado- Convidado
Re: tabela com várias abas
Olá, verifiquei o código e encontrei diversos erros, até mesmo no CSS o que estava bugando o código, tente isso
http://pastebin.com/DhwLFnwb
É só repetir essa parte
Caso não obtenha sucesso, edita em qualquer editor HTML, ou mesmo no Bloco de notas se for o caso..
Tutorial de tabelas aqui
http://www.ancibe.com.br/html/tabelas.html
Conteúdo da W3 sobre tabelas
http://www.w3.org/TR/html401/struct/tables.html
Espero que consiga agora
http://pastebin.com/DhwLFnwb
É só repetir essa parte
- Código:
<tr>
<td>Letra que vai começar, no caso aqui seria o L</td>
<td>Descrição :D</td>
</tr>
Caso não obtenha sucesso, edita em qualquer editor HTML, ou mesmo no Bloco de notas se for o caso..
Tutorial de tabelas aqui
http://www.ancibe.com.br/html/tabelas.html
Conteúdo da W3 sobre tabelas
http://www.w3.org/TR/html401/struct/tables.html
Espero que consiga agora
Re: tabela com várias abas
Entendi como funciona esta parte....
mas o fato e que ainda quando salvo, edito e salvo novamente o efeito para de funcionar....
veja abaixo:
http://somosmugiwara.forumeiros.com/h40-
quando clico na letra A o efeito não aparece.....
num sei qual seria este problema...
a única coisa que alterei foi o :
Não seria melhor colocar o CSS em uma outra página e adicionar nesta página, assim poderia editar tranquilamente....
Mais ainda teria o problema de ditar o HTML..
mas o fato e que ainda quando salvo, edito e salvo novamente o efeito para de funcionar....
veja abaixo:
http://somosmugiwara.forumeiros.com/h40-
quando clico na letra A o efeito não aparece.....
num sei qual seria este problema...
a única coisa que alterei foi o :
- Código:
.alphabet a:hover {
background: #333;
}
Não seria melhor colocar o CSS em uma outra página e adicionar nesta página, assim poderia editar tranquilamente....
Mais ainda teria o problema de ditar o HTML..
Convidado- Convidado
Re: tabela com várias abas
Você sabe usar o Google Drive? Ele pode ser usado para hospedar a página de CSS e os scripts
E qual dos editores você está usando?
O simples ou o avançado?
E qual dos editores você está usando?
O simples ou o avançado?
Re: tabela com várias abas
Estou usando o modo simples......
Humrum, mas tenho que ter uma conta ne...
eu uso um outro fórum que tenho....
Humrum, mas tenho que ter uma conta ne...
eu uso um outro fórum que tenho....
Convidado- Convidado
Re: tabela com várias abas
Use o modo avançado, comigo ele não buga os códigos..
E você só precisa ter conta no Google mesmo '-'
E você só precisa ter conta no Google mesmo '-'
Re: tabela com várias abas
Humrum, só que no modo avançado tem o problema de não ter como editar, pois existe um erro que já foi informado na forumeiros....
vou tentar colocar o js e o css separado, dou o resultado no chat...
Editado:
Tentei hospedar no google drive.
veja que o css nem o java funciona...
http://somosmugiwara.forumeiros.com/h39-
creio que fiz algo errado, poderia dizer como hospedar no google drive?
vou tentar colocar o js e o css separado, dou o resultado no chat...
Editado:
Tentei hospedar no google drive.
veja que o css nem o java funciona...
http://somosmugiwara.forumeiros.com/h39-
creio que fiz algo errado, poderia dizer como hospedar no google drive?
Convidado- Convidado
Re: tabela com várias abas
Abre o Google Drive
Ai clica no teu arquivo e clica em detalhes
E ai vai la em baixo e vai ter um campo chamado hospedagem, verifica se ele termina com a extensão do arquivo, por exemplo css.css ou scripts.js ai clica naquele link. Se ele abrir um arquivo tipo esse (não o conteúdo, a página no caso)
https://googledrive.com/host/0Bxaa_QAP8kJtNklndDk5dm5NcVU/js.js
Ai está é a página que você deve usar.
Ai clica no teu arquivo e clica em detalhes
E ai vai la em baixo e vai ter um campo chamado hospedagem, verifica se ele termina com a extensão do arquivo, por exemplo css.css ou scripts.js ai clica naquele link. Se ele abrir um arquivo tipo esse (não o conteúdo, a página no caso)
https://googledrive.com/host/0Bxaa_QAP8kJtNklndDk5dm5NcVU/js.js
Ai está é a página que você deve usar.
Re: tabela com várias abas
O css e o html estão funcionando mais o javascript não está funcionando....
como podem ver:
http://somosmugiwara.forumeiros.com/h39-#
como podem ver:
http://somosmugiwara.forumeiros.com/h39-#
- Código:
<script src="https://googledrive.com/host/0B34n0wN56OlASXBDdnFOektyZkk/java.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B34n0wN56OlASXBDdnFOektyZkk/css.css" />
<div class="wrapper">
<h1>Countries of the World
</h1>
<div class="alphabet">
<a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a class="last" href="#">Z</a>
</div>
<div id="conutries" class="table-grid">
<table id="countries-table" class="bordered gray">
<thead>
<tr>
<th class="col22 blue">
<label>Country Name</label><span></span>
</th>
<th class="col22 blue">
<label>University Name</label><span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Australia
</td>
<td>
Deakin University
</td>
</tr>
<tr>
<td>
Australia
</td>
<td>
Edith Cowan University
</td>
</tr>
<tr>
<td>
Australia
</td>
<td>
Flinders University
</td>
</tr>
<tr>
<td>
Brazil
</td>
<td>
The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )
</td>
</tr>
<tr>
<td>
Canada
</td>
<td>
George Brown College
</td>
</tr>
<tr>
<td>
China
</td>
<td>
Shandong Polytechnic University
</td>
</tr>
<tr>
<td>
Canada
</td>
<td>
University of Ontario Institute of Technology
</td>
</tr>
<tr>
<td>
Canada
</td>
<td>
University of Prince Edward Island (UPEI)
</td>
</tr>
<tr>
<td>
Canada
</td>
<td>
Vancouver Island University
</td>
</tr>
<tr>
<td>
France
</td>
<td>
ESIGELEC – School of Engineering Rougen
</td>
</tr>
<tr>
<td>
France
</td>
<td>
Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA
</td>
</tr>
<tr>
<td>
France
</td>
<td>
EM Normandie
</td>
</tr>
<tr>
<td>
France
</td>
<td>
Group Euromed Management
</td>
</tr>
<tr>
<td>
France
</td>
<td>
Institut D’ Etudes Politiques De Toulouse
</td>
</tr>
<tr>
<td>
France
</td>
<td>
Sciences Po Lille
</td>
</tr>
<tr>
<td>
France
</td>
<td>
Universite Angers
</td>
</tr>
<tr>
<td>
Germany
</td>
<td>
Cologne Business School
</td>
</tr>
<tr>
<td>
Germany
</td>
<td>
Hochschule Osnabruck- University of Applied Sciences Osnabruck
</td>
</tr>
<tr>
<td>
Neitherlands
</td>
<td>
Fontys University of Applied Sciences
</td>
</tr>
<tr>
<td>
Switzerland
</td>
<td>
IMI International Hotel Management Institute Switzerland
</td>
</tr>
<tr>
<td>
Taiwan
</td>
<td>
China Medical University
</td>
</tr>
<tr>
<td>
Taiwan
</td>
<td>
Providence University
</td>
</tr>
<tr>
<td>
U.S.A
</td>
<td>
Central Michigan University
</td>
</tr>
<tr>
<td>
U.K
</td>
<td>
Glasgow Caledonian University
</td>
</tr>
<tr>
<td>
U.S.A
</td>
<td>
Purdue University
</td>
</tr>
<tr>
<td>
U.S.A
</td>
<td>
San Diego State University
</td>
</tr>
<tr>
<td>
U.S.A
</td>
<td>
University of Massachusetts, Lowell
</td>
</tr>
</tbody>
</table>
</div>
</div>
Convidado- Convidado
Re: tabela com várias abas
Isso porque você inseriu a tag script em um documento .js, apague isso
E acho que é melhor usar o último CSS e HTML que eu passei que ja estão desbugados...
E acho que é melhor usar o último CSS e HTML que eu passei que ja estão desbugados...
Página 1 de 2 • 1, 2
Página 1 de 2
Permissões neste sub-fórum
Não podes responder a tópicos