Qual é esse comando ?

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

Resolvido Qual é esse comando ?

Mensagem por Dr.Helper em 01/12/12, 09:17 pm

Qual é minha questão:
Bom,eu quero saber como faço isto :


Quando clicka em NOVO PASSO,aparece umas caixas em cima,como faço isso ?

Endereço do meu fórum:
http://legioncheats.forumeiros.com

Versão do fórum:
PHPBB3
avatar

Dr.Helper
Usuário destaque

Masculino
Inscrito dia : 24/06/2012
Mensagens : 832
Pontos Ativos : 1231

Ver perfil do usuário http://ultra-pixel.forumeiros.com/ http://fb.com/DISTRICT.HACKERS https://twitter.com/@matheusvs100

Resolvido Re: Qual é esse comando ?

Mensagem por Consolado em 02/12/12, 09:29 am

Olá!

Aqui está o HTML usado junto ao script:
Código:
<script>jQuery(document).ready(function(){jQuery('#imagemtutorial img').click(function(){jQuery('#imagemtutorial img').removeClass('imgselected');jQuery(this).addClass('imgselected');m=jQuery(this).attr('src');jQuery('#imgtutorialform').val(m)});

jQuery('#imgtutorialform').keyup(function(){imgcampo=jQuery(this).val();if(jQuery('#imagemtutorial img[src="'+imgcampo+'"]').length){jQuery('#imagemtutorial img[src="'+imgcampo+'"]').click()}else{jQuery('#imagemtutorial img').removeClass('imgselected')}});

jQuery('#titulo').keyup(function(){if(jQuery(this).val().toLowerCase().indexOf('[tutorial]')!=-1){jQuery('#tipo').val('Tutoriais, dicas e astúcias')}else if(jQuery(this).val().toLowerCase().indexOf('[faq]')!=-1){jQuery('#tipo').val('Perguntas e respostas frequentes')}});

jQuery('#adpasso').click(function(){var clicktitulo="if(this.value=='Título')this.value=''";var blurtitulo="if(this.value=='')this.value='Título'";var clickdescricao="if(this.value=='Descrição')this.value=''";var blurdescricao="if(this.value=='')this.value='Descrição'";var n=new Number(jQuery('#numdepassos').val())+1;jQuery('#adpasso').closest('dl').before('<dl id="passo"><dt><label>'+n+'º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="'+clicktitulo+'" onblur="'+blurtitulo+'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="'+clickdescricao+'" onblur="'+blurdescricao+'">Descrição</textarea></dd></dl>');jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())+1)});

jQuery('#adpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery(this).closest('dl').replaceWith('<dl id="pergunta"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl><dl><dd><input type="button" value="Adicionar pergunta" id="adicionarpergunta" class="button2"><input type="button" value="Remover pergunta" id="repergunta" class="button2"></dd></dl>');

jQuery('#adicionarpergunta').click(function(){var clickpergunta="if(this.value=='Pergunta')this.value=''";var clickresposta="if(this.value=='Resposta')this.value=''";var blurpergunta="if(this.value=='')this.value='Pergunta'";var blurresposta="if(this.value=='')this.value='Resposta'";jQuery('#adicionarpergunta').closest('dl').before('<dl id="pergunta" style="border-top:1px solid white;padding-top:7px"><dd><input id="titulopergunta" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Pergunta" onclick="'+clickpergunta+'" onblur="'+blurpergunta+'"><br><input id="tituloresposta" class="inputbox" style="clear:both;width:510px;margin-top: 8px;" value="Resposta" onclick="'+clickresposta+'" onblur="'+blurresposta+'"></dd></dl>')});

jQuery('#repergunta').click(function(){jQuery(this).closest('fieldset').find('dl#pergunta').eq(-1).remove();});});

jQuery('#repasso').click(function(){if(jQuery('#numdepassos').val()>1){jQuery('#numdepassos').val(new Number(jQuery('#numdepassos').val())-1);jQuery(this).closest('fieldset').find('dl#passo').eq(-1).remove()};});

jQuery('#gerarcodigotutorial').click(function(){jQuery('#divresultadopainel').slideDown();passos='';jQuery('#adpasso').closest('fieldset').find('#passo').each(function(n){titulo=jQuery(this).find('#titulopasso').val();descricao=jQuery(this).find('#descricaopasso').val();numero=n+1;passos+='[b][size=18]'+numero+'º[/size] - [color=darkblue]'+titulo+'[/color][/b]\n'+descricao+'\n\n\n'});

var aviso='';
if(jQuery('#aviso').length){var aviso='[table][tr][td][img]http://forumeiros.com/i/img/act_bottom.png[/img][/td][td]'+jQuery('#aviso').val()+'[/td][/tr][/table]'};

var perguntas='';jQuery('#adicionarpergunta').closest('fieldset').find('#pergunta').each(function(){pergunta=jQuery(this).find('#titulopergunta').val();resposta=jQuery(this).find('#tituloresposta').val();perguntas+='[list][*][b][color=indigo]'+pergunta+'?[/color][/b]\n'+resposta+'[/list]\n\n'});if(perguntas!=''){perguntas=perguntas+'\n'};

a='[center][table style="margin:auto"][tr][td]\n[img]'+jQuery('#imgtutorialform').val()+'[/img] [/td][td]\n[size=24][color=#86b125]'+jQuery('#titulo').val()+'[/color][/size][/td][/tr][/table][/center]\n\n'+jQuery('#descricao').val()+'\n\n'+aviso+'\n[b][center][color=green][size=16]--> '+jQuery('#tipo').val()+' <--[/size][/color]\n[size=16][color=red] '+jQuery('#titulo').val()+' [/color][/size][/center][/b]\n\n\n'+passos+perguntas+'[hr]\n[size=18][center]© Fórum dos Fóruns[/center][/size]\n\n[table][tr][td][img]http://www.forumeiros.com/i/img/act_bottom.png[/img] [/td][td]Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:\n[b]'+jQuery('#titulo').val()+'[/b][/td][/tr][/table]';

jQuery('#resultadopainel').val(a)});





});


    </script>

<input type=hidden id="numdepassos" value="1">
<dl id="passo"><dt><label>1º -</label></dt><dd><input id="titulopasso" class="inputbox" style="clear:both;width:510px;color:darkblue;font-weight:bold" value="Título" onclick="if(this.value=='Título')this.value=''" onblur="if(this.value=='')this.value='Título'"><br><br><textarea id="descricaopasso" class="inputbox" style="clear:both;height:100px;width:627px" onclick="if(this.value=='Descrição')this.value=''" onblur="if(this.value=='')this.value='Descrição'">Descrição</textarea></dd></dl>

<dl>
    <dd><input type="button" value="Adicionar passo" id="adpasso" class="button2">
    </dd></dl><br><dl>
Melhores cumprimentos.
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Qual é esse comando ?

Mensagem por MateusV. em 02/12/12, 11:44 am

Você quer saber como fazer isso com javascript, certo?

Vamos supor que você tem um código HTML assim:

<div id="MateusV">
<input type="text" placeholder="Escreva algo... " id="1" />


</div><br>
<span id="clique">Clique aqui pra adicionar mais um campo</span>

Iremos usar esse código jQuery:
jQuery(document).ready(function(){
//Quando clicar no botão com a id "clique" faz a função
jQuery('#clique').function(){
/*Aqui criamos uma variável com nome "id" que pega o id do ultimo campo input do tipo texto da div "MateusV"
*/

var id=jQuery('#MateusV input[type="text"]:last').attr('id');
/*Aqui estamos criando uma variável com o nome "newId" e o valor dela é o valor da id do ultimo campo de texto mais 1, ou seja, se o ultimo campo de texto tiver a id 5 essa variável terá o valor de 6
*/

var newId=new Number(id) + 1;
/*Aqui nós estamos mandando o código adicionar dentro da div "MateusV" um novo input do tipo texto e a id ele será o valor da variável newId
*/

jQuery('#MateusV').append('<input type="text" id="'+newId+'" placeholder="Escreva algo..."/><br>');
});
});

Leia o código e veja se entende.

Abraços.
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Qual é esse comando ?

Mensagem por Dr.Helper em 02/12/12, 06:58 pm

Valeu.
Mas teria uma forma mais facil ?
avatar

Dr.Helper
Usuário destaque

Masculino
Inscrito dia : 24/06/2012
Mensagens : 832
Pontos Ativos : 1231

Ver perfil do usuário http://ultra-pixel.forumeiros.com/ http://fb.com/DISTRICT.HACKERS https://twitter.com/@matheusvs100

Resolvido Re: Qual é esse comando ?

Mensagem por MateusV. em 03/12/12, 08:14 pm

@Dr.Helper escreveu:Valeu.
Mas teria uma forma mais facil ?

Olá,

Não que eu saiba. Essa é a forma mais básica que conheço.

Abraços.
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Qual é esse comando ?

Mensagem por Dr.Helper em 04/12/12, 08:43 am

Obrigado,pode fechar.
avatar

Dr.Helper
Usuário destaque

Masculino
Inscrito dia : 24/06/2012
Mensagens : 832
Pontos Ativos : 1231

Ver perfil do usuário http://ultra-pixel.forumeiros.com/ http://fb.com/DISTRICT.HACKERS https://twitter.com/@matheusvs100

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