Você não está conectado. Conecte-se ou registre-se

[Tutorial] Niveis de Alerta

Ir em baixo  Mensagem [Página 1 de 1]

1 [Tutorial] Niveis de Alerta em Dom Jan 13, 2013 12:57 pm

Cʀɑzy

avatar
Administrador
Administrador
Botão Niveis de Alerta

A um tempo atas nós aprendemos com o fdf a criar o alerta azul, mas sem botão sem nada...
Mas agora, nós criamos o botão que faça esse alerta, em três níveis diferentes...
Neste tutorial, vamos aprender a implantar esta ferramenta em nossos fóruns, para isso siga os passos abaixo atenciosamente.

Tutoriais sobre Programação
Botão Niveis de Alerta


1- Inserindo o código CSS:
Vamos criar o CSS para suportar as funções do botão, vá até.
Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilos CSS

E adicione o seguinte código...
Código:
.alert{border:1px solid;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')}
.alert2{border:1px solid;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')}
.alert3{border:1px solid;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')}

Feito isso, os alertas já estarão funcionando em seu fórum, faltara apenas o botão...


2- Inserindo o código JavaScript:
Vamos agora aceder a gestão das páginas JavaScript para adicionarmos o nosso código:
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript
Depois carregue-se no botão "Criar um novo javascript".


Seta Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;
Seta Investimento - Escolha a opção "Em todas as páginas"
Seta Código JavaScript - Neste campo teremos de inserir o código que esta logo abaixo;
Seta Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

Código a ser utilizado:
Código:
jQuery(document).ready(function() {
jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue">Alert!</button>');
jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:orange">Alert!</button>');
jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red">Alert!</button>');
});
function alert(){
bbfontstyle('<div class="alert">','</div>');selectWysiwyg(this,'other');return false}
function alert2(){
bbfontstyle('<div class="alert2">','</div>');selectWysiwyg(this,'other');return false}
function alert3(){
bbfontstyle('<div class="alert3">','</div>');selectWysiwyg(this,'other');return false}


3- O resultado final:



----------------------------------------------------------------------------

© SP-Design & Cyllaz / Games forum

Ver perfil do usuário http://kingercheats.forumeiros.com

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum