Efeito de mudança de abas
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Efeito de mudança de abas
Detalhes da questão
Endereço do fórum: https://www.narutorpgakatsuki.net
Versão do fórum: phpBB3
Descrição
Bom dia! Eu tenho este javascript de abas de categoria, mas o efeito de troca vem de baixo pra cima, eu gostaria que ele fosse lateral, já que as vezes as páginas ficam subindo devido a isso.
Código javascript:
- Código:
(function ($, css) {
'use strict';
$(function () {
var $div = $('<div>', { 'class': 'fa-category-controller' });
$('.forabg').each(function (index, selector) {
var $this = $(this);
var title = $this.find('.table-title > h2').text();
$this.attr('data-category-id', index);
if (index === 0) {
$this.addClass('fa-category-visible');
$div.insertBefore($this);
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item fa-category-controller-active',
'data-id': index,
'text' : title
}));
return;
}
$this.hide();
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item',
'data-id': index,
'text' : title
}));
});
$div
.children('a')
.on('click', function () {
var $this = $(this);
var id = $this.attr('data-id');
var current = $('.fa-category-visible').attr('data-category-id');
$('.fa-category-controller-active').removeClass('fa-category-controller-active');
$this.addClass('.fa-category-controller-active');
if (id === current) {
return;
}
$('.fa-category-visible')
.removeClass('fa-category-visible')
.stop()
.slideUp(450, function () {
$('.forabg[data-category-id="' + id + '"]')
.addClass('fa-category-visible')
.stop()
.slideDown(450)
;
})
;
})
;
$('<style>', { 'text': css.join('\n') }).appendTo('head');
});
}(jQuery, [
]));
Re: Efeito de mudança de abas
Olá, teste isto abaixo. Não testei, mas deve funcionar.
Editado.
Editado.
- Código:
(function ($, css) {
'use strict';
$(function () {
var $div = $('<div>', { 'class': 'fa-category-controller' });
$('.forabg').each(function (index, selector) {
var $this = $(this);
var title = $this.find('.table-title > h2').text();
$this.attr('data-category-id', index);
if (index === 0) {
$this.addClass('fa-category-visible');
$div.insertBefore($this);
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item fa-category-controller-active',
'data-id': index,
'text' : title
}));
return;
}
$this.hide();
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item',
'data-id': index,
'text' : title
}));
});
$div
.children('a')
.on('click', function () {
var $this = $(this);
var id = $this.attr('data-id');
var current = $('.fa-category-visible').attr('data-category-id');
$('.fa-category-controller-active').removeClass('fa-category-controller-active');
$this.addClass('.fa-category-controller-active');
if (id === current) {
return;
}
$('.fa-category-visible')
.removeClass('fa-category-visible')
.stop()
toggle("linear")
;
})
;
$('<style>', { 'text': css.join('\n') }).appendTo('head');
});
}(jQuery, [
]));
Re: Efeito de mudança de abas
Connor R. escreveu:Olá, teste isto abaixo. Não testei, mas deve funcionar.
Editado.
- Código:
(function ($, css) {
'use strict';
$(function () {
var $div = $('<div>', { 'class': 'fa-category-controller' });
$('.forabg').each(function (index, selector) {
var $this = $(this);
var title = $this.find('.table-title > h2').text();
$this.attr('data-category-id', index);
if (index === 0) {
$this.addClass('fa-category-visible');
$div.insertBefore($this);
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item fa-category-controller-active',
'data-id': index,
'text' : title
}));
return;
}
$this.hide();
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item',
'data-id': index,
'text' : title
}));
});
$div
.children('a')
.on('click', function () {
var $this = $(this);
var id = $this.attr('data-id');
var current = $('.fa-category-visible').attr('data-category-id');
$('.fa-category-controller-active').removeClass('fa-category-controller-active');
$this.addClass('.fa-category-controller-active');
if (id === current) {
return;
}
$('.fa-category-visible')
.removeClass('fa-category-visible')
.stop()
toggle("linear")
;
})
;
$('<style>', { 'text': css.join('\n') }).appendTo('head');
});
}(jQuery, [
]));
Boa noite, o código não funcionou, as categorias voltaram na organização normal, no caso sem abas.
Re: Efeito de mudança de abas
Olá @Akeido,
Veja se é este o efeito pretendido:
Cordialmente,
pedxz.
Veja se é este o efeito pretendido:
- Código:
(function ($, css) {
'use strict';
$(function () {
var $div = $('<div>', { 'class': 'fa-category-controller' });
$('.forabg').each(function (index, selector) {
var $this = $(this);
var title = $this.find('.table-title > h2').text();
$this.attr('data-category-id', index);
if (index === 0) {
$this.addClass('fa-category-visible');
$div.insertBefore($this);
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item fa-category-controller-active',
'data-id': index,
'text' : title
}));
return;
}
$this.hide();
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item',
'data-id': index,
'text' : title
}));
});
$div
.children('a')
.on('click', function () {
var $this = $(this);
var id = $this.attr('data-id');
var current = $('.fa-category-visible').attr('data-category-id');
$('.fa-category-controller-active').removeClass('fa-category-controller-active');
$this.addClass('.fa-category-controller-active');
if (id === current) {
return;
}
$('.fa-category-visible')
.removeClass('fa-category-visible')
.stop()
.animate({width: 'toggle'}, 1000, function () {
$('.forabg[data-category-id="' + id + '"]')
.addClass('fa-category-visible')
.stop()
.animate({width: 'toggle'}, 1000)
;
})
;
})
;
$('<style>', { 'text': css.join('\n') }).appendTo('head');
});
}(jQuery, [
]));
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7933
Pontos : 9174
Re: Efeito de mudança de abas
Pedxz escreveu:Olá @Akeido,
Veja se é este o efeito pretendido:
- Código:
(function ($, css) {
'use strict';
$(function () {
var $div = $('<div>', { 'class': 'fa-category-controller' });
$('.forabg').each(function (index, selector) {
var $this = $(this);
var title = $this.find('.table-title > h2').text();
$this.attr('data-category-id', index);
if (index === 0) {
$this.addClass('fa-category-visible');
$div.insertBefore($this);
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item fa-category-controller-active',
'data-id': index,
'text' : title
}));
return;
}
$this.hide();
$div.append($('<a>', {
'href' : 'javascript:void(0);',
'class' : 'fa-category-controller-item',
'data-id': index,
'text' : title
}));
});
$div
.children('a')
.on('click', function () {
var $this = $(this);
var id = $this.attr('data-id');
var current = $('.fa-category-visible').attr('data-category-id');
$('.fa-category-controller-active').removeClass('fa-category-controller-active');
$this.addClass('.fa-category-controller-active');
if (id === current) {
return;
}
$('.fa-category-visible')
.removeClass('fa-category-visible')
.stop()
.animate({width: 'toggle'}, 1000, function () {
$('.forabg[data-category-id="' + id + '"]')
.addClass('fa-category-visible')
.stop()
.animate({width: 'toggle'}, 1000)
;
})
;
})
;
$('<style>', { 'text': css.join('\n') }).appendTo('head');
});
}(jQuery, [
]));
Cordialmente,
pedxz.
Isso, está ótimo pra mim, muito obrigado.
Re: Efeito de mudança de abas
Questão resolvidaEsta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7933
Pontos : 9174
Tópicos semelhantes
» Colocar efeito de abas na Home Page
» Categoria em abas
» Categorias por abas
» Sistema de abas
» Sistema de Abas
» Categoria em abas
» Categorias por abas
» Sistema de abas
» Sistema de Abas
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos