Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Botão neon resposta rapida
Hoje à(s) 4:44 por Daemon

» Mudar cor Da Barrinha e mudar cor do menu
Hoje à(s) 4:35 por Mr.Probz

» [Ranks] Laranja - Médio - Texto branco
Hoje à(s) 3:47 por Harold C+

» Imagem de fundo no fórum
Hoje à(s) 3:29 por Cream

» Membro do mês
Hoje à(s) 2:42 por while

» Personalizar o menu
Hoje à(s) 2:09 por Cream

» Redução dos Ranks...
Hoje à(s) 1:58 por Sennior

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Mr.Probz
 
Cream
 
while
 
idarkdg
 
Nean
 
Apollo
 
Harleen
 
lavinnia
 
Sennior
 
William_iHarDz
 

Quem está conectado
74 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 69 Visitantes :: 2 Motores de busca

Castiel, Daemon, IsmaelS., Mr.Probz, while

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Sistema de Abas

Página 1 de 2 1, 2  Seguinte

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 14:50

Detalhes da questão


Endereço do fórum: www.tutorialdopw.com
Versão do fórum: Phpbb3

Descrição


Bom dia,

Como posso implementar este sistema de abas que existe no início do FdF?



Última edição por ZombieW em Ter 27 Out 2015 - 14:34, editado 1 vez(es)

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 14:54

Olá! Muito feliz

Eu penso que as imagens que estão aí sejam da propriedade Forumeiros. Ou seja, poderá usar, mas terá de substituir as imagens para evitar futuros problemas.
Aceda a Painel de Controle > Visualização > Página Inicial > Geral e na mensagem da página inicial coloque o seguinte código:
Código:
<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://illiweb.com/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://illiweb.com/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span>  
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a>  
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span>  
</div>
  
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema.  
</div>
   <br class="clear" />  
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a>  
</div>
  
<div id="faInfo">
          
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.        
 <div id="faNewsBox">
              
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>    
 </div>
            
 </div>
            
 <div style="display:none" id="faNewsRSS">
      
 </div>
          
 </div>
          
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:        
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>    
 </div>
            
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />        
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.     <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.      
 </div>
      
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
  
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
      
      homepage = J('.introduction', main)[0], // homepage message
      
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
      
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
      
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
      
      // profile variables
      profil,
      login;
      
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
      
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
      
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
  
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
  
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
      
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
      
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
      
      return false;
    }
  }
  
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
  
    if (this.src == 'http://illiweb.com/fa/m/tabs_less1.gif') {
      this.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://illiweb.com/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Atenciosamente.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 14:57

A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 14:59

Poderá também seguir este tutorial:
Seta http://ajuda.forumeiros.com/t76837-

Para que não fique igual. Feliz
Algo mais em relação a isto ou está resolvido?

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:03

Ainda não.

Vi o tutorial que você me passou, ele serve para:

@seender escreveu:2º - Aplicação do código:
O código poderá ser aplicado em vários locais, para mais informações leia o tutorial referente ao local de possível adição:
Widgets do portal;
Widgets do fórum;
Mensagem na home page;
Página HTML.

Eu preciso inserir isso em tópicos, é possível?

Se sim, como eu chamarei o código de abas de dentro do tópico?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:06

Sim, é possível. Pórem, você precisa de ter o HTML ativo nos tópicos. (Painel de Controle > Geral > Mensagens e e-mails > Configuração Seta Permitir HTML: Sim.)

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:07

@ZombieW escreveu:Se sim, como eu chamarei o código de abas de dentro do tópico?

Faltou você me responder isso! Mostrando a lingua

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:09

Desculpe. Rindo
Basta colocar exatamente o código como eu lhe forneci.
Código:
<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://illiweb.com/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://illiweb.com/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span> 
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a> 
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span> 
</div>
 
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema. 
</div>
  <br class="clear" /> 
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a> 
</div>
 
<div id="faInfo">
         
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.       
 <div id="faNewsBox">
             
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>   
 </div>
           
 </div>
           
 <div style="display:none" id="faNewsRSS">
     
 </div>
         
 </div>
         
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:       
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>   
 </div>
           
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />       
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.    <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.     
 </div>
     
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
 
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
     
      homepage = J('.introduction', main)[0], // homepage message
     
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
     
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
     
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
     
      // profile variables
      profil,
      login;
     
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
     
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
     
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
 
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
     
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
     
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
     
      return false;
    }
  }
 
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
 
    if (this.src == 'http://illiweb.com/fa/m/tabs_less1.gif') {
      this.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://illiweb.com/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por Shek em Sex 16 Out 2015 - 15:10

@ZombieW escreveu:A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.
Esse é o problema. Fizemos este recurso com base neste tutorial: http://ajuda.forumeiros.com/t76837- , sendo assim, não há motivos de usar o mesmo código do que temos aqui, basta personalizar o do tutorial e terá o mesmo efeito.


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:13

@Fraise

É que eu ainda acho muito confuso...

Você poderia (se possível) mastigar um pouco mais?

Qual trecho vai no CSS?

Poderia fornecer um código de exemplo aqui com algumas abas e uma frase, só para eu entender?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Sex 16 Out 2015 - 15:15

Olá.

Tudo que está dentro do <style></style> é CSS.


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:16

@Shek escreveu:Olá.

Tudo que está dentro do <style></style> é CSS.

Certo, mas preciso deixar as tags de "Style" dentro do CSS? Normalmente não uso isso lá...

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:18

Senhor, não precisa colocar nada na folha de estilos!
Poderá fazer simplesmente assim quando quiser apresentar isso numa mensagem:
Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:21

Certo, vamos por partes:

Inserido isso no meu CSS:

Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>

Depois dentro de um tópico, eu coloquei esse código:

Código:
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado foi esse:


ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:24

Vamos fazer de uma forma diferente, okay?
Adicione este código à sua folha de estilos:
Código:
div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}

Em seguida, crie um novo JS com investimento em todas as páginas:
Código:
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

Depois é só usar este código nas mensagens:
Código:
<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise



Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:36

Seguido o passo-a-passo e o resultado foi esse:



Além de bugar meu perfil à esquerda (está muito para baixo).

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:38

Impossivel! O senhor usou apenas este código, certo?
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:42

@Fraise

Sim amigo,

JavaScript:



Tópico:


ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Sex 16 Out 2015 - 15:44

Não é esse o código e sim este:
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Atenciosamente.


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 16 Out 2015 - 15:45

Eu sei @Fraise , você passou errado antes, mas testei também com esse outro correto e o resultado ainda é o mesmo.

http://www.tutorialdopw.com/t1165-#3527

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Dom 18 Out 2015 - 6:08

Bom dia.

Mas... Se você vai usar o script somente para os tópicos, então por o marcou para todas as páginas? Assim que fiz isso, você gerou um erro "Uncaught SyntaxError: Unexpected identifier" em todos os seus javascripts. Triste


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Dom 18 Out 2015 - 22:33

@Shek

Alterei para "nos Tópicos", mas o resultado ainda é o mesmo.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Seg 19 Out 2015 - 4:48

Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada. Triste


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Seg 19 Out 2015 - 12:48

@Shek escreveu:Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada. Triste

Você se refere ao meu fórum?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Ter 20 Out 2015 - 4:09

Exatamente. Thumbleft


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Ter 20 Out 2015 - 12:32

@Shek escreveu:Exatamente. Thumbleft

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:


ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Ter 20 Out 2015 - 12:36

@ZombieW escreveu:
@Shek escreveu:Exatamente. Thumbleft

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:


Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Ter 20 Out 2015 - 12:59

@Fraise escreveu:Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.

Não me recordo de tê-lo colocado em "Férias", mas enfim, removi a opção.

Tente novamente Shek.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 23 Out 2015 - 12:09

"up"

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Seg 26 Out 2015 - 13:19

"up"

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Ter 27 Out 2015 - 13:39

Certo, vamos recomeçar...

Removi todo meu CSS, exceto por:

Código:
/* Sistema de Abas - Início */
div.aba {
  background:#000;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}
/* Sistema de Abas - Fim */

Este é o JS:

Código:
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

E este é o que está no tópico:

Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado é esse:


ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Ter 27 Out 2015 - 14:08

Olá!

Mas... Para tópicos não funciona. Só funciona nos setores de aceitam o HTML, como mensagem da página inicia, páginas HTML, Widgets e etc.


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Ter 27 Out 2015 - 14:30

Certo Shek,

Sendo assim, há como criar um sistema parecido?

Só para você entender, eu preciso melhorar a forma de como o usuário olha que está nessa postagem.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Ter 27 Out 2015 - 14:34

Olá!

É como o seender mencionou aqui: http://ajuda.forumeiros.com/t78753-sistema-de-abas É complicado, pois, se usar DIVs dentro dos posts, é provável que ocorra bugs. Se houvesse BBcode (nativo) do tipo DIV, talvez desse certo.

Até mais!


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Ter 27 Out 2015 - 15:13

Ok Shek,

Você disse que em páginas HTML funciona, correto? Podemos fazer um teste então?

Mantenho o CSS, mantenho o JS, mas como insiro o sistema numa página HTML?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Qua 28 Out 2015 - 0:04

Utilizando o mesmo código que estava a utilizar nas mensagens. Feliz
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Qua 28 Out 2015 - 11:40

Estranhamente continua não funcionando...

http://www.tutorialdopw.com/h10-sistema-de-abas

Código:
<div id="seender_abas"><div id="aba1" class="aba">Conteúdo da aba 1.</div><div id="aba2" class="aba">Conteúdo da aba 2.</div>
</div>

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sab 31 Out 2015 - 18:05

Bora lá galerinha, não deve ser tão difícil assim! =/

"up"

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em Sab 31 Out 2015 - 22:13

Mas... Como vai funcionar se você colocou apenas o HTML?? Suspeito... Além do mais, não é difícil, o que eu não entendo é o motivo pelo qual o senhor não tentou usar o que é ensinado no tutorial, ao invés de só colocar o HTML.


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14615
Pontos Ativos : 21637

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Seg 2 Nov 2015 - 15:44

Porque o CSS e o JS já estão ativos no fórum.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em Qui 5 Nov 2015 - 1:22

Que tal tentarmos um outro código?
jQuery:
Código:
$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

CSS:
Código:
#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}

HTML:
Código:
<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
         <table align="left" border="0" width="2%">
            <tr>
               <td>
          USUA
               </td>
            </tr>
         </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                     NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      SOFT
                  </td>
                </tr>
            </table>
        </div>       

Resulta? Feliz

Até mais.
Fraise


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7058

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Qui 5 Nov 2015 - 11:32

Para evitar erros ou conflitos, ao invés de fazer no "Tutorial do PW", eu fiz no "Tutorial do CA".

Sendo assim, esse foi o resultado:

http://www.tutorialdoca.com/h38-sistema-de-abas

Triste

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Qui 5 Nov 2015 - 16:49

Boa tarde!

Vamos testar em uma página HTML, ok? Peguei um script aleatório dos que o Fraise postou, modifiquei e veja:
(Coloque-o completamente na página HTML)

Código:
<html><head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head>
<script>$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
  }</script>
<style>#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
  }</style>

<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
            <tr>
              <td>
          USUA
              </td>
            </tr>
        </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                    NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      SOFT
                  </td>
                </tr>
            </table>
  </div>    </html>

Mas, você deseja para os tópicos, certo?

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 13:07

@MateusAnjosV

Opa, esse funcionou para a página HTML!

http://www.tutorialdoca.com/h38-sistema-de-abas

Sim, desejo para os tópicos (se for possível)

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 13:18

Bom dia!

Nesse caso, aplique o CSS:
Código:
#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}
Crie um javascript, nos tópicos:
Código:
$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

E quando for postar, utilize:
Código:
<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
 <tr>
     <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
   <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
   <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
   <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
 </tr>
</table>
     <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
           <tr>
              <td>
         USUA
              </td>
           </tr>
        </table>
     </div>

     <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     EMPR
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                    NOTA
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     SOFT
                 </td>
               </tr>
           </table>
       </div>

Feliz

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 13:32

Certo, tudo instalado.

http://www.tutorialdoca.com/t1746-teste-sistema-de-abas#2042

Fiz apenas uma modificação na tabela para ficar menor e quebrar em 2 linhas:

Código:
<table id="tabelafraise" width="450" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
<tr><td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
<td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td></tr>
<tr><td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
<td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
</tr>
</table>
<div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
<table align="left" border="0" width="2%">
<tr>
<td>USUA</td>
</tr>
</table></div>
<div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>EMPR</td>
</tr>
</table></div>
<div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>NOTA</td>
</tr>
</table></div>     
<div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>SOFT</td>
</tr>
</table></div>

Mas como você pode ver o texto ao clicar nos "botões" não funciona.

Sei que fui avisado que bugs podiam ocorrer.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 13:35

Relaxe, não vai "rolar" bugs, ok?
Ele funciona sim, veja:
http://prntscr.com/8zonsh


Acrescente em seu CSS, assim, modificamos a cor do texto:
Código:
.conteudo {color: gray !important}

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 13:40

@MateusAnjosV

Funcionou, obrigado.

Porém, eu vi que cada botão trás o texto em uma linha.

É possível sempre trazer na mesma linha?

Pergunto porque minha ideia é criar de fato uma tabela bem grande com diversas armas. E o usuário escolher uma das versões das armas nesse sistema de abas.

Só que se uma arma sair numa posição e outra mais abaixo, vai dar no mesmo de não ter o sistema de abas! :S

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em Sex 6 Nov 2015 - 13:54

Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1411
Pontos Ativos : 2314

http://ajuda.forumeiros.com/

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em Sex 6 Nov 2015 - 15:36

@MateusAnjosV escreveu:Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

É, ele bugou após clicar em qualquer uma das abas.

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1226
Pontos Ativos : 3970

http://www.perfectteam.org

Página 1 de 2 1, 2  Seguinte

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5