المدير العام المدير العام
عدد المساهمات : 277
تاريخ التسجيل : 22/01/2014 نقاط : 500762 السٌّمعَة : 0
| موضوع: حصريا اضافة زر في صندوق ماسي لتغيير خلفية تلقائيا السبت مارس 29, 2014 12:03 pm | |
| السلام عليكم ورحمة الله وبركاته اليوم كود جديد جميل ومميز نعرضه لكم على الدعم هدية لاعضائا الغاليين
الكود عبارة عن زر يظهر في ازرار حقل كتابة مواضيع وردود لوضع خلفية تختارها انت لي تظهر خلفية لموضوعك او ردك الزر يحتوي على العديد من خلفيات كل ما عليك ضغط عليها وتكرار ويتتغير خلفية وتظهر تلقائيا للمعاينة في حق كتابة
مثال في صورة
http://im37.gulfup.com/1JgnV.png
صورة لعمل الكود
http://im37.gulfup.com/TlQqk.png
==== طريقة التركيب سهلة جدا ======
نتوجه الى لوحة ادارة >> مظهر المنتدى >> الوان >> ورقة تصميم css >> تم نضع الكود التالي
الكود: - الكود:
-
div.sceditor-container iframe, div.sceditor-container textarea { background: transparent;}.postbg { background-position: 0 0; background-repeat: repeat;}
تم نتوجه الى لوحة ادارة >> عناصر إضافية >>إدارة اكواد Javascript >> تم نضغ الكود التالي
الكود: - الكود:
-
$(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 val } if(n.nodeValue.substr(0, 8) != "[postbg=") { return val } var m = n.nodeValue.match(/^\[postbg=([^\[]*)\]/); $(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.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/p fTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i .imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwo Vi.png,http://i.imgur.com/EHp45H1.png,http://i .imgur.com/8bhbqFF.png,http://i.imgur.com/tb80 sYG.png,http://i.imgur.com/6LPhzcp.png r. 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 }) } }) }) }}); كدى الكود صار شغال ونتمنى ان يكون الكود قد نال اعجابكم
اما لمن يريد اضافة خلفيات خاصة به لتعمل على صندوق ايضا يقوم باخد رابط صورة وضمها الى مجموعة الصور الموجودة في الكود والتي هي مع عدم نسيان الفاصلة بين روابط الخلفيات (,)
الكود: - الكود:
-
http: https://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/4 8CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.im gur.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 فريق العمل | |
|