Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


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

 » Programação » jQuery e JavaScript » Arquivo: Resolvido » 

Botões de informações

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar
Usuário ativo

em Ter Ago 26, 2014 12:23 am
Minha questão:
Saudações!

Eu gostaria de saber como adicionar em meu fórum as caixas de 'sucesso', 'aviso', 'alerta' e 'informação'.


Endereço do meu fórum:
http://colonia.livreforum.com

Versão:
Phpbb3

Ver perfil do usuário
avatar

em Ter Ago 26, 2014 12:31 am
Enquanto ninguém responder, se preferir tem estes aqui:

Código .CSS:
Código:
.sucesso, .infos, .aviso, .alerta {
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
width: 83%;
font-weight: normal;
font-style: normal;
font-size: 13px;
margin: 15px;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
position: relative;
left: 34px;
}
.sucesso h5, .infos h5, .aviso h5, .alerta h5 {
font-size: 14px;
font-weight: bold;
margin-bottom: .65em;
}
.sucesso p, .infos p, .aviso p, .alerta p {
  margin-bottom: 1.3em;
}
.infos {
background-color: #C6D8F0;
color: #285797;
border: 1px solid #4381CD;
}
.sucesso {
background-color: #EEF4D4;
color: #596C26;
border: 1px solid #8FAD3D;
}
.aviso {
background-color: #FFEA97;
color: #796100;
border: 1px solid #E1B500;
}
.alerta {
background-color: #EFCEC9;
color: #933628;
border: 1px solid #AE3F2F;
}
.sucesso span, .infos span, .aviso span, .alerta span {
background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0;
width: 33px;
height: 40px;
position: absolute;
left: -34px;
top: 9px;
}
.alerta span {
background-position: 100% -400px;
}
.sucesso span {
background-position: 100% 0;
}
.infos span {
background-position: 100% -1200px;
}
.aviso span {
background-position: 100% -800px;
}
.quadrado_box {
        background: #FFF url(http://i50.tinypic.com/2uqsx.png) repeat-x bottom;
        padding: 10px;
        border: 1px solid #c5c5c5;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -moz-box-shadow: inset 0px 2px 4px rgba(0,0,0,0.15);
        font-style: normal;
        font-weight: normal;
        width: 95%;
}
.hideTB {
margin: 5px;
background-color: #f3e3e6;
display: block;
padding: 10px;
border: 1px solid #e599aa;
font-size: 12px;
color: #80001c;
}
.guest {
background-color: #F3E3E6;
border: 1px solid #E599AA;
color: #80001C;
padding: 10px;
display: block;
margin: 15px;
font-size: 11px;
}

Página 1º .jS:
Código:
(function(){var f={bbcodes:{},basics:[],attrReg:/.*?=("|'|)(.*?)\1\]/,parseTag:function(a,b,d){return a.replace(d?RegExp("(\\["+b.tag+"[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/"+b.tag+"]","g"+(b.insensitive?"i":"")):RegExp("\\["+b.tag+"[^\\]]*\\]","g"+(b.insensitive?"i":"")),function(a,c,e){d||(c=a);c=f.attrReg.test(c)?c.replace(f.attrReg,"$2"):b.defaultAttr;if(b.validate&&!(d?b.validate(e,c):b.validate(c)))return a;b.replace&&(a=d?b.replace(e,c):b.replace(c),"string"===typeof a?d?e=a:c=a:a&&"object"===typeof a&&(e=a.content||e,c=a.attr||c));return f.swapReplacers(b.replacement,e,c)})},swapReplacers:function(a,b,d){return(a||"").replace(/{CONTENT}/g,b||"").replace(/{ATTR}/g,d||"")},parse:function(a){for(var b=f.bbcodes,d=f.basics,g=0,c;c=d[g++];){var e=c[0];if("string"===typeof e)for(;-1!==a.indexOf(e);)a=a.replace(e,c[1]);else a=a.replace(e,c[1])}for(var h in b)(d=b[h])&&(d.replacement&&d.tag)&&(a=f.parseTag(a,d,d.close));return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("MBB Tag invalida: "+a);b.tag||(b.tag=a);"close"in b||(b.close=!1);f.bbcodes[a]=b},addSwap:function(a,b){f.basics.push([a,b])}};window.MBB=f})();
$(function(){
  var p = $('.post .entry-content , .a3d_1 .a3d_1_content'); //pega as postagens
  for(var i = 0, e; (e = p[ i++ ]); ) {
    var text = e.innerHTML; //pega o texto que queremos analisar. (o innerHTML de mensagens)
    text = MBB.parse(text); //dar a MBB para analisar.
    e.innerHTML = text; //re-inserir o texto analisado
  }
});
MBB.add('offtopic', {
   close: true,
   replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'
});
MBB.add('sucesso', {
   close : true,
   replacement : '<div class="sucesso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('aviso', {
   close : true,
   replacement : '<div class="aviso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('infos', {
   close : true,
   replacement : '<div class="infos"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('alerta', {
   close : true,
   replacement : '<div class="alerta"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('quadrado', {
   close : true,
   replacement : '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'
});
MBB.add('guest', {
   close : true,
   replacement : '<span class="guest">{CONTENT}</span>',
   replace : function(content) {
      if(!document.getElementById('logout')) return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
      return content;  
}
});

Página 2º .jS:
Código:
$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-quadrado" style="display:none;margin-top: 27px;"><div><label for="quadradotext" style="text-align:left;" >Texto : </label><input type="text" id="quadradotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="quadradonote" style="text-align:left;">Nota : </label><input type="text" id="quadradonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-sucesso"  title="Quadrado"><div style="background-image:url(http://i.imgur.com/Q2pKUiL.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-quadrado").css("display");
if(f =='none') {$(".sceditor-quadrado").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-quadrado").hide(); }
});
$(".sceditor-quadrado .button").click(function () {
var title = $(".sceditor-quadrado #quadradotext").val();
var note = $(".sceditor-quadrado #quadradonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[quadrado='+title+'] '+note+' [/quadrado]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-sucesso" style="display:none;margin-top: 27px;"><div><label for="sucessotext" style="text-align:left;" >Texto : </label><input type="text" id="sucessotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="sucessonote" style="text-align:left;">Nota : </label><input type="text" id="sucessonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-sucesso"  title="Sucesso"><div style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-sucesso").css("display");
if(f =='none') {$(".sceditor-sucesso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-sucesso").hide(); }
});
$(".sceditor-sucesso .button").click(function () {
var title = $(".sceditor-sucesso #sucessotext").val();
var note = $(".sceditor-sucesso #sucessonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[sucesso='+title+'] '+note+' [/sucesso]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-alerta" style="display:none;margin-top: 27px;"><div><label for="alertatext" style="text-align:left;" >Texto : </label><input type="text" id="alertatext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="alertanote" style="text-align:left;">Nota : </label><input type="text" id="alertanote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-alerta"  title="Alerta"><div style="background-image:url(http://i.imgur.com/lMsD0nE.png)">Alerta</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-alerta").css("display");
if(f =='none') {$(".sceditor-alerta").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-alerta").hide(); }
});
$(".sceditor-alerta .button").click(function () {
var title = $(".sceditor-alerta #alertatext").val();
var note = $(".sceditor-alerta #alertanote").val();
$('#text_editor_textarea').sceditor("instance").insert('[alerta='+title+'] '+note+' [/alerta]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-aviso" style="display:none;margin-top: 27px;"><div><label for="avisotext" style="text-align:left;" >Texto : </label><input type="text" id="avisotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="avisonote" style="text-align:left;">Nota : </label><input type="text" id="avisonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-aviso"  title="Aviso"><div style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Aviso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-aviso").css("display");
if(f =='none') {$(".sceditor-aviso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-aviso").hide(); }
});
$(".sceditor-aviso .button").click(function () {
var title = $(".sceditor-aviso #avisotext").val();
var note = $(".sceditor-aviso #avisonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[aviso='+title+'] '+note+' [/aviso]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-infos" style="display:none;margin-top: 27px;"><div><label for="infostext" style="text-align:left;" >Texto : </label><input type="text" id="infostext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="infosnote" style="text-align:left;">Nota : </label><input type="text" id="infosnote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-quadrado"  title="Informação"><div style="background-image:url(http://i.imgur.com/40zM1qS.png)">Informação</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-infos").css("display");
if(f =='none') {$(".sceditor-infos").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-infos").hide(); }
});
$(".sceditor-infos .button").click(function () {
var title = $(".sceditor-infos #infostext").val();
var note = $(".sceditor-infos #infosnote").val();
$('#text_editor_textarea').sceditor("instance").insert('[infos='+title+'] '+note+' [/infos]');
});
$('<a class="sceditor-button sceditor-button-guest" unselectable="on" title="Esconder de visitantes"><div unselectable="on" style="background-image:url(http://i33.servimg.com/u/f33/18/07/42/17/hide11.png)">Visitantes</div></a>').insertBefore('.sceditor-button-quote').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("
","
");
});
});

PS: Sim tem que criar duas páginas de jS. e coloque os códigos, e coloque ambas a funcionar nos tópicos se não resultar coloque em todas as páginas!

Ver perfil do usuário http://www.techmais.forumeiros.com
avatar
Usuário ativo

em Ter Ago 26, 2014 10:18 pm
Olá, novamente.

Tudo deu certo, exceto pelo fato de os botões não funcionarem. Quando clicamos nele e adicionamos nosso texto, a exibição correta não é feita.

Atenciosamente.

Ver perfil do usuário
avatar

em Ter Ago 26, 2014 10:56 pm
Olá,

Troque a suas páginas de código .jS:

1º Página .jS:
Código:
(function(){var f={bbcodes:{},basics:[],attrReg:/.*?=("|'|)(.*?)\1\]/,parseTag:function(a,b,d){return a.replace(d?RegExp("(\\["+b.tag+"[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/"+b.tag+"]","g"+(b.insensitive?"i":"")):RegExp("\\["+b.tag+"[^\\]]*\\]","g"+(b.insensitive?"i":"")),function(a,c,e){d||(c=a);c=f.attrReg.test(c)?c.replace(f.attrReg,"$2"):b.defaultAttr;if(b.validate&&!(d?b.validate(e,c):b.validate(c)))return a;b.replace&&(a=d?b.replace(e,c):b.replace(c),"string"===typeof a?d?e=a:c=a:a&&"object"===typeof a&&(e=a.content||e,c=a.attr||c));return f.swapReplacers(b.replacement,e,c)})},swapReplacers:function(a,b,d){return(a||"").replace(/{CONTENT}/g,b||"").replace(/{ATTR}/g,d||"")},parse:function(a){for(var b=f.bbcodes,d=f.basics,g=0,c;c=d[g++];){var e=c[0];if("string"===typeof e)for(;-1!==a.indexOf(e);)a=a.replace(e,c[1]);else a=a.replace(e,c[1])}for(var h in b)(d=b[h])&&(d.replacement&&d.tag)&&(a=f.parseTag(a,d,d.close));return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("MBB Tag invalida: "+a);b.tag||(b.tag=a);"close"in b||(b.close=!1);f.bbcodes[a]=b},addSwap:function(a,b){f.basics.push([a,b])}};window.MBB=f})();
$(function(){
  var p = $('.post .entry-content , .a3d_1 .a3d_1_content'); //pega as postagens
  for(var i = 0, e; (e = p[ i++ ]); ) {
    var text = e.innerHTML; //pega o texto que queremos analisar. (o innerHTML de mensagens)
    text = MBB.parse(text); //dar a MBB para analisar.
    e.innerHTML = text; //re-inserir o texto analisado
  }
});
MBB.add('offtopic', {
  close: true,
  replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'
});
MBB.add('sucesso', {
  close : true,
  replacement : '<div class="sucesso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('aviso', {
  close : true,
  replacement : '<div class="aviso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('infos', {
  close : true,
  replacement : '<div class="infos"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('alerta', {
  close : true,
  replacement : '<div class="alerta"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('quadrado', {
  close : true,
  replacement : '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'
});
MBB.add('guest', {
  close : true,
  replacement : '<span class="guest">{CONTENT}</span>',
  replace : function(content) {
      if(!document.getElementById('logout')) return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
      return content; 
}
});

2º Página .jS:
Código:
$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-quadrado" style="display:none;margin-top: 27px;"><div><label for="quadradotext" style="text-align:left;" >Texto : </label><input type="text" id="quadradotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="quadradonote" style="text-align:left;">Nota : </label><input type="text" id="quadradonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-sucesso"  title="Quadrado"><div style="background-image:url(http://i.imgur.com/Q2pKUiL.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-quadrado").css("display");
if(f =='none') {$(".sceditor-quadrado").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-quadrado").hide(); }
});
$(".sceditor-quadrado .button").click(function () {
var title = $(".sceditor-quadrado #quadradotext").val();
var note = $(".sceditor-quadrado #quadradonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[quadrado='+title+'] '+note+' [/quadrado]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-sucesso" style="display:none;margin-top: 27px;"><div><label for="sucessotext" style="text-align:left;" >Texto : </label><input type="text" id="sucessotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="sucessonote" style="text-align:left;">Nota : </label><input type="text" id="sucessonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-sucesso"  title="Sucesso"><div style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-sucesso").css("display");
if(f =='none') {$(".sceditor-sucesso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-sucesso").hide(); }
});
$(".sceditor-sucesso .button").click(function () {
var title = $(".sceditor-sucesso #sucessotext").val();
var note = $(".sceditor-sucesso #sucessonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[sucesso='+title+'] '+note+' [/sucesso]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-alerta" style="display:none;margin-top: 27px;"><div><label for="alertatext" style="text-align:left;" >Texto : </label><input type="text" id="alertatext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="alertanote" style="text-align:left;">Nota : </label><input type="text" id="alertanote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-alerta"  title="Alerta"><div style="background-image:url(http://i.imgur.com/lMsD0nE.png)">Alerta</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-alerta").css("display");
if(f =='none') {$(".sceditor-alerta").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-alerta").hide(); }
});
$(".sceditor-alerta .button").click(function () {
var title = $(".sceditor-alerta #alertatext").val();
var note = $(".sceditor-alerta #alertanote").val();
$('#text_editor_textarea').sceditor("instance").insert('[alerta='+title+'] '+note+' [/alerta]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-aviso" style="display:none;margin-top: 27px;"><div><label for="avisotext" style="text-align:left;" >Texto : </label><input type="text" id="avisotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="avisonote" style="text-align:left;">Nota : </label><input type="text" id="avisonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-aviso"  title="Aviso"><div style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Aviso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-aviso").css("display");
if(f =='none') {$(".sceditor-aviso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-aviso").hide(); }
});
$(".sceditor-aviso .button").click(function () {
var title = $(".sceditor-aviso #avisotext").val();
var note = $(".sceditor-aviso #avisonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[aviso='+title+'] '+note+' [/aviso]');
});
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-infos" style="display:none;margin-top: 27px;"><div><label for="infostext" style="text-align:left;" >Texto : </label><input type="text" id="infostext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="infosnote" style="text-align:left;">Nota : </label><input type="text" id="infosnote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-quadrado"  title="Informação"><div style="background-image:url(http://i.imgur.com/40zM1qS.png)">Informação</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-infos").css("display");
if(f =='none') {$(".sceditor-infos").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-infos").hide(); }
});
$(".sceditor-infos .button").click(function () {
var title = $(".sceditor-infos #infostext").val();
var note = $(".sceditor-infos #infosnote").val();
$('#text_editor_textarea').sceditor("instance").insert('[infos='+title+'] '+note+' [/infos]');
});
$('<a class="sceditor-button sceditor-button-guest" unselectable="on" title="Esconder de visitantes"><div unselectable="on" style="background-image:url(http://i33.servimg.com/u/f33/18/07/42/17/hide11.png)">Visitantes</div></a>').insertBefore('.sceditor-button-quote').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("
","
");
});
});

Ver perfil do usuário http://www.techmais.forumeiros.com
avatar
Usuário ativo

em Ter Ago 26, 2014 11:10 pm
Olá.

Continuo com o mesmo problema, quando posto um título, obtenho o seguinte resultado:

+title+

De toda forma, muito obrigado.

Ver perfil do usuário
avatar
Novato

em Qua Ago 27, 2014 3:20 pm
Troque todos os JS adicionados anteriormente por este:
Código:
(function() {
    var f = {bbcodes: {},basics: [],attrReg: /.*?=("|'|)(.*?)\1\]/,parseTag: function(a, b, d) {
            return a.replace(d ? RegExp("(\\[" + b.tag + "[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(a, c, e) {
                d || (c = a);
                c = f.attrReg.test(c) ? c.replace(f.attrReg, "$2") : b.defaultAttr;
                if (b.validate && !(d ? b.validate(e, c) : b.validate(c)))
                    return a;
                b.replace && (a = d ? b.replace(e, c) : b.replace(c), "string" === typeof a ? d ? e = a : c = a : a && "object" === typeof a && (e = a.content || e, c = a.attr || c));
                return f.swapReplacers(b.replacement, e, c)
            })
        },swapReplacers: function(a, b, d) {
            return (a || "").replace(/{CONTENT}/g, b || "").replace(/{ATTR}/g, d || "")
        },parse: function(a) {
            for (var b = f.bbcodes, d = f.basics, g = 0, c; c = d[g++]; ) {
                var e = c[0];
                if ("string" === typeof e)
                    for (; -1 !== a.indexOf(e); )
                        a = a.replace(e, c[1]);
                else
                    a = a.replace(e, c[1])
            }
            for (var h in b)
                (d = b[h]) && (d.replacement && d.tag) && (a = f.parseTag(a, d, d.close));
            return a
        },add: function(a, b) {
            if (!/^\w+$/.test(a))
                throw new Exception("MBB Tag invalida: " + a);
            b.tag || (b.tag = a);
            "close" in b || (b.close = !1);
            f.bbcodes[a] = b
        },addSwap: function(a, b) {
            f.basics.push([a, b])
        }};
    window.MBB = f
})();
$(function() {
    var p = $('.post .entry-content , .a3d_1 .a3d_1_content, .blog_message');
    for (var i = 0, e; (e = p[i++]); ) {
        var text = e.innerHTML;
        text = MBB.parse(text);
        e.innerHTML = text
    }
});
MBB.add('offtopic', {close: true,replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'});
MBB.add('sucesso', {close: true,replacement: '<div class="alert sucesso"><strong>{ATTR}</strong> {CONTENT}</div>'});
MBB.add('aviso', {close: true,replacement: '<div class="alert danger"><strong>{ATTR}</strong> {CONTENT}</div>'});
MBB.add('infos', {close: true,replacement: '<div class="alert infos"><strong>{ATTR}</strong> {CONTENT}</div>'});
MBB.add('alerta', {close: true,replacement: '<div class="alert"><strong>{ATTR}</strong> {CONTENT}</div>'});
MBB.add('codebox', {close: true,replacement: '<codebox><code>{CONTENT}</code></codebox>'});
MBB.add('twitter', {close: true,replacement: '@<a href="http://www.twitter.com/{CONTENT}">{CONTENT}</a>'});
MBB.add('quadrado', {close: true,replacement: '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'});
MBB.add('guest', {close: true,replacement: '<span class="guest">{CONTENT}</span>',replace: function(content) {
        if (!document.getElementById('logout'))
            return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
        return content
    }});

Ver perfil do usuário
avatar
Usuário ativo

em Qua Ago 27, 2014 11:58 pm
Olá. Utilizando seu código, sequer pude ter os botões para ativar a função. Estarei aceitando alternativas.

Obrigado pela ajuda de todos.

Ver perfil do usuário
avatar
Usuário ativo

em Seg Set 01, 2014 1:48 pm
Aguardo novas respostas.

Ver perfil do usuário
avatar
Novato

em Ter Set 02, 2014 4:51 pm
Olá, todos os dados fornecidos tinham erro de syntax em suas composições, estarei a forneceu o conserto dos mesmos:

Para sua JS, crie um módulo investido nos tópicos:

Código:
jQuery(function(){
      jQuery(function(){
        jQuery('<a class="sceditor-button sceditor-button-sucesso" unselectable="on" title="Sucesso"><div unselectable="on" style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=sucesso][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-alerta" unselectable="on" title="Alerta"><div unselectable="on" style="background-image:url(http://i.imgur.com/lMsD0nE.png)">Alerta</div></a>').insertAfter('.sceditor-button-sucesso').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=alerta][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-aviso" unselectable="on" title="Aviso"><div unselectable="on" style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Aviso</div></a>').insertAfter('.sceditor-button-alerta').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=aviso][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-info" unselectable="on" title="Informação"><div unselectable="on" style="background-image:url(http://i.imgur.com/40zM1qS.png)">Informação</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=infos][tr][td]","[/td][/tr][/table]");
        });
        });
      });

A seguir, invista isto em sua folha CSS:

Código:
/*mensagens personalizadas*/
.infos {
background-color: #333333;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: white;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
    border-radius: 0px 0px 0px 0px;
    border-color: #000000;
      padding: 50px;
}
  .sucesso {
background-color: #ACD758;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkgreen;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 0px 0px 0px 0px;
    border-color: #659B10;
      padding: 50px;
}
.alerta {
background-color: #BDE5F8;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkcyan;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 0px 0px 0px 0px;
    border-color: #31B7C7;
      padding: 50px;
}
.aviso {
background-color: #FF5C5C;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkred;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 0px 0px 0px 0px;
    border-color: #D13333;
      padding: 50px;
}
    /*

Até mais.

Ver perfil do usuário
avatar
Usuário ativo

em Ter Set 02, 2014 11:16 pm
O código funcionou, muito obrigado pela ajuda. Como a questão foi resolvida, estarei arquivando o tópico.

Até mais.

[sucesso=Tópico movido para "Arquivo: Questões resolvidas"][/sucesso]

Ver perfil do usuário
Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte 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

 

Desenvolvido por RafaelS. | Proibida à copia parcial ou total deste tema.