Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[TUTORIAL] Salvamento automático de texto em Widget do fórum

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados

Ir para baixo

[TUTORIAL] Salvamento automático de texto em Widget do fórum Empty [TUTORIAL] Salvamento automático de texto em Widget do fórum

Mensagem por Shek 14.12.14 13:15


[TUTORIAL] Salvamento automático de texto em Widget do fórum Templates
Salvamento automático de texto em Widget do fórum

Por varias vezes em nossos fóruns, nós temos que sair e assim um trabalho como um texto, um lembrete pode ser perdido. Neste tutorial iremos mostrar como colocar a função Notepad em teu fórum e assim salvar qualquer texto no Widget.


--> Tutoriais, dicas e astúcias <--
Salvamento automático de texto em Widget do fórum


1º - Noção básica da função:
Antes, teremos que criar um Widget personalizado para que o código possa ser executado. Abaixo mostramos algumas etapas na hora de criar o Widget que recebera o código.


Painel de controle :seta2:  Modulos :seta2: Portal & Widgets :seta2:  Gestão dos widgets do fórum
[TUTORIAL] Salvamento automático de texto em Widget do fórum Wf310

[TUTORIAL] Salvamento automático de texto em Widget do fórum 110111SetaNome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
[TUTORIAL] Salvamento automático de texto em Widget do fórum 110210Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
[TUTORIAL] Salvamento automático de texto em Widget do fórum 110310Seta Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
[TUTORIAL] Salvamento automático de texto em Widget do fórum 110410Seta Fonte do widget: - Neste campo, Devemos inserir o seguinte código:

Código:
<style>
    .notepad {
    text-shadow: 0 1px 0 white;
    font: bold 11px Helvetica, Arial, sans-serif;
    color: rgb(68, 68, 68);
    line-height: 17px;
    }
    .notepad {
    text-decoration: none;
    text-shadow: 0 1px 0 white;
    font: bold 11px Helvetica, Arial, sans-serif;
    color: rgb(68, 68, 68);
    line-height: 17px;
    height: 18px;
    display: inline-block;
    margin: 5px;
    padding: 5px 6px 4px 6px;
    background: rgb(243, 243, 243);
    border: solid 1px rgb(217, 217, 217);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: border-color .20s;
    -moz-transition: border-color .20s;
    -o-transition: border-color .20s;
    transition: border-color .20s;
    position: absolute;
        z-index: 99999!important;
    }
    .notepad span.icon {
    background-image: url('http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-gray.png');
    display: inline-block;
    margin: 0 7px;
    float: left;
    line-height: 18px;
    height: 18px;
    width: 18px;
    max-width: 18px;
    overflow: hidden;
    text-indent: -9999px;
    background-repeat: no-repeat;
    -webkit-transition: background-image 0.20s linear;
    -moz-transition: background-image 0.20s linear;
    -o-transition: background-image 0.20s linear;
    transition: background-image 0.20s linear;
    }
    span.icon137 {
    background-position: -288px -108px;
    }
    .notepad:hover span.icon {
    background-image: url(http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-colour.png);
    }
    .contnotepad {
        position: absolute;
        z-index: 9999!important;
        background: white;
        border: 2px solid rgb(38, 114, 200);
        margin-left: 49px;
        margin-top: 5px;
        min-height: 100px;
        padding: 10px;
    }
    .notepad.ativo {
      
        border: 2px solid rgb(38, 114, 200);
        border-right: none;
        border-radius: 0px;
    }
    .wrapnotepad {
        height: 50px;
    }
    #notepadval {
        display: block;
        margin: 10px;
        height: 150px;
        width: 300px;
    }
    span.icon67 {
    background-position: -108px -54px;
    }
    </style><script>
    jQuery(document).ready(function () {
        if (localStorage.getItem('notepad') != null && localStorage.getItem('notepad') != '') {
            jQuery('#notepadval').val(localStorage.getItem('notepad'));
        }
        jQuery('a.notepad').click(function () {
            if (jQuery(this).attr('class').indexOf('ativo') != -1) {
                jQuery(this).removeClass('ativo');
            } else {
                jQuery(this).addClass('ativo');
            }
            jQuery('.contnotepad').fadeToggle(100);
            if (jQuery('#notepadval').val() != null && jQuery('#notepadval').val() != '') {
                localStorage.setItem('notepad', jQuery('#notepadval').val());
            }
            return false
        });
    });
    </script>
    <div class="wrapnotepad">
        <a href="#" class="notepad"><span class="icon icon67"></span></a>
      <div class="contnotepad" style="display:none;">
          Escreva aqui o conteúdo a ser salvo:<textarea id="notepadval"></textarea>
      </div>
      
    </div>
[TUTORIAL] Salvamento automático de texto em Widget do fórum 110510Seta Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Resultado:
[TUTORIAL] Salvamento automático de texto em Widget do fórum L7eQpf2


© Fórum dos Fóruns & Sennior
[TUTORIAL] Salvamento automático de texto em Widget do fórum Questi11 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Salvamento automático de texto em Widget do fórum
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados

 
Permissões neste sub-fórum
Não podes responder a tópicos