[TUTORIAL] Botão Novo Tópico personalizado

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.


1º - 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 Módulos Portal & Widgets Gestão dos widgets do fórum 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>

2º - 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 Visualização Imagens e cores Cores 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;
}

3º - 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 Módulos Html & JavaScript Gestão dos códigos JavaScript 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"]');
}
}
});
}

OBS: Lembre-se de marcar a função em: Todas as páginas

• Resultado
  

---

© Shiftactíf & Sweet Chili

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