Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

D'Leandro™
Fundador
TUTORIALDemarcador de texto


E ae galera blz? Eu estava lendo alguns artigos de que gosto e pensei... como vou demarcar partes importantes? Já estou cansado de usar edições estranhas como negrito, sublinhado e itálico pelo texto todo, então eu criei este código, o conceito é simples, mas o efeito é fantástico, com ele você pode demarcar o texto como quiser e realçar as partes importantes.

Versão: Todas (Eu acho)

Então vamos lá, primeiro adicione o código responsável pelo estilo da marcação. (Painel de controle > Visualizações > Imagens e Cores > Cores > Folha de estilo CSS)
Código:
/* Demarcador de texto © Staffer Group BR™ */
.text_markup {
   border-radius: 2px;
   background: yellow;
   color: #000;
   display: inline-block;
   box-shadow: 1px 1px 0px rgba(220, 193, 206, 0.8);
}
/* TUTORIAL = http://staffergroupbr.stuning.net/t2243- */
Agora valide a folha e vamos colocar o código que exibirá o botão, para que você possa usar mais facilmente o sistema.
Para colocar este código insira um novo JavaScript. (Painel de controle > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript)
Código:
$(function(){
    var CopyrightNotice = 'Copyright StafferGroupBR™ © 2013 / All right reserved.';
//Tutorial = http://staffergroupbr.stuning.net/t2243-
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/17/71/75/73/revu-f11.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<span class=\'text_markup\'>","</span>");
         });
      });
});
Use investimento Nos tópicos e salve clicando em confirmar. A parte de instalação já está pronta.
Agora vá até um tópico e perceba o botão ■ Demarcador de texto Revu-f12 que estará na barra de ferramentas, ele será responsável pela marcação. Para marcar um texto selecione-o e dê um clique sobre o botão.

Demonstração: Veja o efeito clicando aqui.

Criador: D'Leandro™
Site: http://staffergroupbr.stuning.net/

#2
 Ryse

Ryse
Membro
Obrigado pelo compartilhamento amigo!

#3
 fascicularia

fascicularia
Membro
Obrigado

#4
 DEMORUTO666

DEMORUTO666
Membro
muito interessante este efeito

#5
 sivastar

sivastar
Membro
Thanks for sharing

#6
 JQuery

JQuery
Membro
gostei legal

#7
 heitorsimonetti

heitorsimonetti
Membro
adoreii, irei usar

#8
 Teste123

Teste123
Membro
Vou usar

#9
 Conteúdo patrocinado