Salutare, 
1. Introducere:
 Urmand cu atentie pasii din acest tutorial veti obtine un buton  la editor care va va permite sa alegeti o imagine de fundal pentru mesajul pe care urmeaza a fi postat.
2. Codurile CSS:
Pentru inceput vizitati:
| Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS |
Adaugati urmatorul cod:
- Cod:
div.sceditor-container iframe, div.sceditor-container textarea {
background: transparent;
}
.postbg {
background-position: 0 0; background-repeat: repeat;
}
3. Codurile JavaScript:
Acum trebuie sa vizitati:
| Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript |
Completati rubricile ce urmeaza astfel:
- Titlu: Selectionare imagine de fundal
- Amplasare: Toate paginile
- Cod JavaScript: Adaugati urmatorul cod...
- Cod:
$(function() {
$("div.postbody").each(function() {
var n = this;
if($(".post-entry", n).length) {
n = $(".post-entry", n)[0]
}else {
if($(".content", n).length) {
n = $(".content", n)[0]
}
}
while(n.nodeType != 3 && n.hasChildNodes()) {
n = n.childNodes[0]
}
if(n.nodeType != 3) {
return;
}
if(n.nodeValue.substr(0, 8) != "[postbg=") {
return;
}
var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/);
if(!m) return;
$(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
if(!n.nodeValue && n.nextSibling && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
$(n.nextSibling).remove()
}
});
if($("#text_editor_textarea").length && $.sceditor) {
var bglist = "http://i.imgur.com/20aRJFn.png,http://i.imgur.com/DcTM2Ng.jpg,http://i.imgur.com/tkC3deY.jpg,http://i.imgur.com/pfTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i.imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.imgur.com/8bhbqFF.png,http://i.imgur.com/tb80sYG.png,http://i.imgur.com/6LPhzcp.png,http://i.imgur.com/DkRuYf1.png,http://i.imgur.com/57F0z86.jpg,http://i.imgur.com/PZyMuXF.png".split(",");
var bgnum = -1;
var val = $("#text_editor_textarea").val();
if(val.substr(0, 8) == "[postbg=") {
var m = val.match(/^\[postbg=([^\]]*)\]/);
if(m) {
var r = $.inArray(m[1], bglist);
if(r != -1) {
bgnum = r
}else {
bgnum = bglist.length - 1
}
$(function() {
$(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
$(".sceditor-container").css("background-image", "url(" + m[1] + ")")
});
$("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
}
}
$(function() {
if(!$("#text_editor_textarea").sceditor("instance")) {
return
}
$('<a class="sceditor-button" unselectable="on" title="Fond de message"><div unselectable="on" style="background:url(http://i.imgur.com/Hrf5w1i.gif);opacity:1">Fond de message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
if(e.ctrlKey) {
$(".sceditor-container").css("background-image", "");
bgnum = -1
}else {
bgnum++;
if(!bgnum) {
$(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
}
$(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
}
})
});
$(function() {
$('form[name="post"]').submit(function() {
if(bgnum != -1) {
$("#text_editor_textarea").val(function(i, val) {
return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
})
}
})
})
}
});
Puteti adauga, elimina sau schimba imaginile actuale de fundal inlocuind link-urile urmatoare din codul JavaScript:
- Cod:
http://i.imgur.com/20aRJFn.png,http://i.imgur.com/DcTM2Ng.jpg,http://i.imgur.com/tkC3deY.jpg,http://i.imgur.com/pfTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i.imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.imgur.com/8bhbqFF.png,http://i.imgur.com/tb80sYG.png,http://i.imgur.com/6LPhzcp.png,http://i.imgur.com/DkRuYf1.png,http://i.imgur.com/57F0z86.jpg,http://i.imgur.com/PZyMuXF.png
Daca doriti sa puneti o imagine de fundal ce nu se afla in lista folositi urmatoarea baliza BB:
- Cod:
[postbg=http://adresa-imagini]
Nota: De fiecare data cand faceti click pe butonul , o alta imagine de fundal este afisata, iar apasand pe tasta Control (Ctrl) fundalul va fi anulat.
Succes! 
|
Acasa
Buton de selectare a imaginii de fundal pentru mesaje
Scris de Cassius Dio Mier Aug 14, 2013 7:54 pm
Subiecte similare