| 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 Modulos Portal & Widgets Gestão dos widgets do fórum
|
| Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle. |
| Utilizar um table type: - Nesta opção, deverá ser marcado o "Não". |
| Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente. |
| 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>
|
| Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações. |
Resultado:
© Fórum dos Fóruns & Sennior
| 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
|