1 [TUTORIAL] Níveis de alerta 08/10/12, 03:57 pm
HenRyqUéè
Administrador
Avaliador
Helper
Olá pessoal, nesse tutorial, irei mostrar a como colocar os níveis de alerta (o título desse tutorial está sobre um alerta) são tres tipos de alerta, e elas se encontram na caixa "OUTROS", onde é criado uma caixa e você pode colocar textos dentro.
CRÉDITOS!
Todos os créditos desse tutorial são de "Cillaz" e "SPDesign"!
1º - Insrindo o codigo 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
- CLIQUE PARA ABRIR:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- 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')}
2º - Insrindo o codigo 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"
- CLIQUE PARA ABRIR:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- 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}
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
__________________________________________________________________________________________________________RMBR, SPDesign, Cillaz & DexTer