ShiftActif fórum

[TUTORIAL] Botão Novo Tópico personalizado  Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Botão Novo Tópico personalizado  405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Botão Novo Tópico personalizado  1660898911

[TUTORIAL] Botão Novo Tópico personalizado

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

  • 0

[TUTORIAL] Botão Novo Tópico personalizado  Empty [TUTORIAL] Botão Novo Tópico personalizado

Mensagem por Reborn em Qui 23 Ago - 13:44

[TUTORIAL] Botão Novo Tópico personalizado  Review10 Botão novo tópico

Neste tutorial vamos aprender a adicionar uma nova função ao botão ''Novo tópico'' em nossos fóruns. O efeito consistem em que ao clicarmos no botão, nos é oferecida duas funções: Full Editor e Quick Editor. Comentaremos mais sobre a função no decorrer deste tutorial.

--> Tutoriais <--
Botão novo tópico



Detalhamento da função

Ao clicar no botão de ''novo tópico'', é aberta uma pequena ''aba'' onde encontram-se escritas duas palavras: Full Editor e Quick Editor.
Ao clicar em Full Editor, você é direcionado à pagina de criação de tópicos completas, com todas as ferramentas disponíveis, a caixa de respostas avançada.
Por sua vez, ao clicar em Quick Editor, você é direcionado a uma caixa de respostas simplificada, como a criação de uma resposta rápida.


- Criando um widget:
Para adicionar a função ao fórum, é necessário que criemos um novo widget personalizado.
Para isto, devemos seguir em:

Painel de controle Seta 4 Módulos Seta 4 Portal & Widgets Seta 4 Gestão dos widgets do fórum Seta 4 Criar um widget personalizado

Em nosso novo widget, adicionamos o código abaixo:
Código:
<div style="display: none;" id="quickTopic" class="quickTopic"><form enctype="multipart/form-data" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post" method="post" action="/post"><br/>Topic Title: <input type="text"  title="The length of the title for this topic must be ranging between 10 and 255 characters" maxlength="255" value="" name="subject" class="inputbox medium"><br/><br/>Message:<br /><textarea wrap="virtual" name="message" class="inputbox" id="text_editor_textarea"></textarea><br /><br /><div style="text-align: center;"><div id="hiddenIDS" style="display: none;"></div><input class="button2" type="submit" tabindex="5" value="Preview" name="preview"> <input class="button1" type="submit" value="Send" name="post"> <input type="button" onClick="document.getElementById('quickTopic').style.display='none';" value="Close"></div></form></div><div id="chooseNewTopic" style="visibility: hidden; width: auto;" class="select"><button onmouseout="this.className='';" onmouseover="this.className='selectHover';" onclick="window.location=document.getElementsByClassName('i_post')[0].parentNode.href;">Full Editor</button>
<br><button onmouseout="this.className='';" onmouseover="this.className='selectHover';" onclick="document.getElementById('quickTopic').style.display = 'block';selectWysiwyg(this,'chooseNewTopic'); return false;">Quick Editor</button></div>

- Adicionando CSS:
Para que o efeito adeque-se visualmente ao fórum ao qual estamos a adicioná-lo, se faz necessário que adicionemos um código à nossa folha CSS. Para isto, temos que seguir em:

Painel de controle Seta 4 Visualização Seta 4 Imagens e cores Seta 4 Cores Seta 4 Folha de estilo CSS

Adicionamos em nossa folha o seguinte código:
Código:
.quickTopic {
        background-color: #FFFFFF;
        border: 1px solid;
        height: 150px;
        left: 30%;
        position: fixed;
        top: 50%;
        width: 500px;
}

- Adicionando código JavaScript:
Por fim, para que consigamos o efeito que pretendemos obter com este tutorial, é necessário que criemos uma nova página em JavaScript, de modo que a função haja da forma adequada. Para isto, temos que ir em:

Painel de controle Seta 4 Módulos Seta 4 Html & JavaScript Seta 4 Gestão dos códigos JavaScript Seta 4 Criar um novo JavaScript

Criada a nova página, devemos adicionar o seguinte código:
Código:
if(/^\/f\d+.*/.test(window.location.pathname)) {
$(function() {
var x = document.getElementsByClassName('i_post');
for (i = 0; i<x.length; i++) {
x[i].onclick = function(e) {
e.preventDefault();
selectWysiwyg(this, 'chooseNewTopic');
jQuery('#hiddenIDS').load(''+this.parentNode.href+' input[type="hidden"]');
}
}
});
}
Seta 4 OBS: Lembre-se de marcar a função em: Todas as páginas


  • Resultado
    [TUTORIAL] Botão Novo Tópico personalizado  Cats12





© Shiftactíf & Sweet Chili



[TUTORIAL] Botão Novo Tópico personalizado  Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Botão novo tópico personalizado
Reborn

Reborn
Colaborador Actif

Masculino
Idade : 27
PointActif's : 3196
ReputActifs : 26
Mensagens : 406
Inscrição : 13/04/2012

100%

http://suportedesign.forumeiros.com/

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