Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


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

Ir à página : 1, 2  Seguinte

#1
 D'Leandro™

avatar
Fundador
TUTORIALNíveis de alerta v2


Depois da atualização que o código original parou de funcionar corretamente eu decidi atualizar o sistema o design e o funcionamento para isso eu fiz o up grade para a versão 2.
Funcionalidade: PunBB, PhpBB2, PhpBB3 e Invision

Vamos começar instalando o código CSS para dar um design legal para o efeito.
Basta colocar este código na folha de estilos CSS.


Código:
/*Níveis de Alerta*/
.alert{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#BDE5F8;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-i10.png');
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius: 8px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.alert2{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#ffcc00;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-a10.png');
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius: 8px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.alert3{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#ff5c5c;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/120px-10.png');
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius: 8px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
/*---/ Creditos: 2012 © Staffer Group BR™ /---*/
/*---/  http://staffergroupbr.stuning.net /---*/


Pronto? Então clique em "Validar"
Agora vamos colocar o novo JavaScript.
Para encurtar o código e evitar problemas você pode adicionar este pequeno código no seu gestor de JavaScript.

Título * : Níveis de alerta v2 ( SGBR™ )
Investimento : Em todas as páginas
Código JavaScript * : Cole o código abaixo.


Código:
//Alerta 1

$(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/40px-i10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert\'>Alerta 1</div>");
         });
      });
});

//Alerta 2

$(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/40px-a10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert2\'>Alerta 2</div>");
         });
      });
});

//Alerta 3

$(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/120px-10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert3\'>Alerta 3</div>");
         });
      });
});




  • Resultado: (botões)



Ver os alertas em funcionamento: Demonstração.
Ver perfil do usuário

#2
 Neto

avatar
Membro
Olá obrigado por compartilhar até mais!!
Ver perfil do usuário

#3
 Publigos

avatar
Membro
Interessante, vou ativar no meu fórum.Obrigado
Ver perfil do usuário

#4
 Hades

avatar
Membro
Vou ativa-lo no meu forum , Obrigado !
Ver perfil do usuário

#5
 Hehe

avatar
Novato
Vou testa!
Ver perfil do usuário

#6
 MURALHA5

avatar
Novato
Testando :D
Ver perfil do usuário

#7
 Hades

avatar
Membro
Vou testar
Ver perfil do usuário

#8
 TiagoDJ-7.0

avatar
Membro
18  Vou testa, deve ser muito bom.
Ver perfil do usuário

#9
 D'Leandro™

avatar
Fundador
  • Tutorial atualizado 05.12.2013

Motivo: O código anterior estava incorreto.
Ver perfil do usuário

#10
 Gmtp

avatar
Membro
Olá, queridos.

Obrigado por compartilhar conosco do Staffer Group BR™.

Até mais.

Assinatura:
Olá Convidado Antes De Tudo, Bem Vindo Ao Staffer Group BR™ !!

Convidado Você Esta No Fórum Deis de E Você Tem 3 Mensagens !
o Fórum Tem 11510 Mensagens Com 890 Membros Registrado. VAMO AJUDA A DIVULGA AE !
Ver perfil do usuário

#11
 iTrevaS

avatar
Membro
Olá manolos, vlw ai, esta muito show esse tutorial!
Ver perfil do usuário

#12
 -Jonathan

avatar
Membro
Vou testar muito obrigado !
Ver perfil do usuário

#13
 Bruna.

avatar
Novato
Vou Testar ^^'
Ver perfil do usuário

#14
 Mr.GamingPT

avatar
Membro
oi
Ver perfil do usuário

#15
 Mr.GamingPT

avatar
Membro
up
Ver perfil do usuário

#16
 houdini

avatar
Membro
Bem legal ficou, gostei muito..
Ver perfil do usuário

#17
 Mr.GamingPT

avatar
Membro
Ver perfil do usuário

#18
 azure

avatar
Membro
Bem legal ficou, gostei muito..
Ver perfil do usuário

#19
 lucasyori

avatar
Membro
Muito bom
Ver perfil do usuário

#20
 Mr.GamingPT

avatar
Membro
oi
Ver perfil do usuário

#21
 DEMORUTO666

avatar
Membro
vou testar aqui deve ser um efeito legal mas podia ter uns prints de como ele e
Ver perfil do usuário

#22
 sivastar

avatar
Membro
cool
Ver perfil do usuário

#23
 JQuery

avatar
Membro
up
Ver perfil do usuário

#24
 GabrielZaia

avatar
Novato
Leegal
Ver perfil do usuário

#25
 Superbomber

avatar
Membro
Isso até que é útil, vou ver!

Assinatura:
Hacker Justice
Ver perfil do usuário

#26
 Conteúdo patrocinado


Ir à página : 1, 2  Seguinte