Com este tutorial, será possível adicionar mais campos de preenchimento na criação de um novo tópico.
Adicionar campos na criação de um tópico
TUTORIAIS, DICAS E ASTÚCIAS |
Instalação do código JavascriptAs páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
| Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum. |
| Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum. |
| Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas. |
| Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento. | Código:
- Código:
/*globals jQuery, FA*/ /** * Criar inputs na criação do tópico. * * @author lffg <https://github.com/lffg> * @version 1.0 */ (function($) { 'use strict'; var inputs = [{ label: 'Label do Input 1', placeholder: 'Placeholder do Input 1', insert: '[b]Valor do Input 1:[/b] {{CONTENT}}. \n\n', // {{CONTENT}} = O que o usuário colocou. required: true }, { label: 'Label do Input 2', placeholder: 'Placeholder do Input 2', insert: '[b]Valor do Input 2:[/b] {{CONTENT}}. \n\n', // O caractere especial \n é o mesmo que uma quebra de linha. required: true }, { label: 'Label do Input 3', insert: '[b]Valor do Input 3:[/b] {{CONTENT}}. \n\n', required: false }]; inputs.reverse(); window.FA = window.FA || {}; FA.Posting = FA.Posting || {}; var Inputs; FA.Posting.Inputs = Inputs = function(userConfig) { var self = this; self.defaults = { label: undefined, placeholder: undefined, insert: undefined, forums: ['*'], required: false }; self.userConfig = userConfig; self.config = $.extend({}, self.defaults, self.userConfig); }; Inputs.prototype.init = function() { var self = this; if (!$.sceditor) { return false; } if (self.config.forums.indexOf('*') === -1) { var hrefId = parseInt(location.href.replace(/^.*\/post\?f=(\d+)&.*$/g, '$1')); if (self.config.forums.indexOf(hrefId) === -1) { return false; } } self.generate(); self.listen(function() { self.parse(); }); }; Inputs.prototype.generate = function() { var self = this; self.$wrapper = $([ '<dl>', ' <dt>', ' ' + $('<label>', { 'text': self.config.label }).prop('outerHTML'), ' </dt>', ' <dd>', ' ' + $('<input />', { 'type': 'text' }).prop('outerHTML'), ' </dd>', '</dl>' ].join('\n')); self.$input = self.$wrapper.find('input'); self.$input .attr('class', 'inputbox medium fa-generated-input') .attr('data-content', self.config.insert) .attr('placeholder', self.config.placeholder || '') ; if (self.config.required) { self.$input.attr('required', 'required'); } $('input[name="subject"]') .parents('dl') .after(self.$wrapper) ; }; Inputs.prototype.listen = function(fn) { var selectors = [ '[required]', '[required="required"]', '[name="subject"]' ]; $('[type="submit"]').on('click', function() { if ($(selectors.join(',')).val() === '') { return; } fn(); }); }; Inputs.prototype.parse = function() { var self = this; var $sceditor = $('#text_editor_textarea').sceditor('instance'); var content = self.config.insert; var value = $.trim(self.$input.val()); content = content.replace(/{{CONTENT}}/gi, value); $sceditor.val(content + $sceditor.val()); }; $(function() { $.each(inputs, function() { var self = this; (new FA.Posting.Inputs(self)).init(); }); }); }(jQuery)); Após a instalação, o código já estará a resultar.
Resultado do tutorial |