Mohamed احلى إدارة
عدد المساهمات : 11354 معدل النشاط : 16001 السُمعة : 454
| موضوع: (JAVASCRIPT) كود تغيير شكل المحرر في الصندوق الماسي ***Mohamed Nsr الإثنين 16 ديسمبر 2013 - 10:53 | |
| والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام اما بعد اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان في الصندوق الماسي صورة للكود بعد الوضع
الان طريقة وضع الكود اولا في الجافا لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد العنوان:كما تريد اضف الكود الى:جميع الصفحات كود Javascript * :
- الكود:
-
$(function(){$(function(){
if ($("#text_editor_textarea").length != 0) {
var lista5ColoresPorGama = [];
//################### ZONA EDITABLE ###################################################################################
lista5ColoresPorGama["ffffff"] = ["f2f2f2", "d8d8d8", "bfbfbf", "a5a5a5", "7f7f7f"]; lista5ColoresPorGama["000000"] = ["7f7f7f", "595959", "3f3f3f", "262626", "0c0c0c"]; lista5ColoresPorGama["eeece1"] = ["ddd9c3", "c4bd97", "938953", "494429", "1d1b10"]; lista5ColoresPorGama["1f497d"] = ["c6d9f0", "8db3e2", "548dd4", "17365d", "0f243e"]; lista5ColoresPorGama["4f81bd"] = ["dbe5f1", "b8cce4", "95b3d7", "366092", "244061"]; lista5ColoresPorGama["c0504d"] = ["f2dcdb", "e5b9b7", "d99694", "953734", "632423"]; lista5ColoresPorGama["9bbb59"] = ["ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128"]; lista5ColoresPorGama["8064a2"] = ["e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151"]; lista5ColoresPorGama["4bacc6"] = ["dbeef3", "b7dde8", "92cddc", "31859b", "205867"]; lista5ColoresPorGama["f79646"] = ["fdeada", "fbd5b5", "fac08f", "e36c09", "974806"];
var lista10ColoresBasicos = ["c00000", "ff0000", "ffc000", "ffff00", "92d050", "00b050", "00b0f0", "0070c0", "002060", "7030a0"];
//################### FIN ZONA EDITABLE ################################################################################
$.sceditor.command.get('color')._dropDown = $.sceditor.command.get('color')._menu = function (editor, caller, callback) { var content = $("<div />"), cmd = $.sceditor.command.get('color'); if (!cmd._htmlCache) { var pre = '<strong style="background-color:#', suf = ';" unselectable="on"><span></span></strong>'; var coloresGama = ""; for (var col = 0; col < 5; col++) { for (key in lista5ColoresPorGama) { if (lista5ColoresPorGama[key][col]) coloresGama += lista5ColoresPorGama[key][col] + ","; } } coloresGama = coloresGama.substring(0, coloresGama.length - 1); var htmlGen = [pre, Object.keys(lista5ColoresPorGama).toString().split(',').join(suf + pre), suf].join(''); var htmlList = [pre, coloresGama.split(',').join(suf + pre), suf].join(''); var htmlStandard = [pre, lista10ColoresBasicos.toString().split(',').join(suf + pre), suf].join(''); var htmlGeneralPanel = ['<div class="editor_color_panel" style="z-index:12;" unselectable="on"><div class="color_general" unselectable="on">', htmlGen, '</div><div class="color_list" unselectable="on">', htmlList, '</div><div class="color_standard" unselectable="on">', htmlStandard, '</div></div>'].join(''); cmd._htmlCache = htmlGeneralPanel; } content.append(cmd._htmlCache).find('strong').click(function (e) { callback($(this).attr('style').substr(17, 7)); editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, "color-picker", content); } } }) }); ثانيا في اكواد ال css
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال css
وضع الكود التالي:
- الكود:
-
/* Mohamed Nsrكود تغيير شكل محرر الالوان*/ .editor_color_panel{ background-color:#fff; width:189px; height:135px; } .editor_color_panel .color_general{ height:16px; margin:11px 7px 9px 11px; } .editor_color_panel .color_list{ height:70px; margin:0 7px 0 11px; } .editor_color_panel .color_standard{ height:16px; margin:13px 7px 8px 11px; } .editor_color_panel strong{ font-size:0; display:block; width:14px; height:14px; margin-right:3px; float:left; cursor:pointer; } /*انتهاء الكود Mohamed Nsr*/
منقول للافادة وبهذا قد انتهى الشرح بالتوفيق ليكم تحياتي[Mohamed Nsr] فريق المساعدة
| |
|
Mohamed احلى إدارة
عدد المساهمات : 11354 معدل النشاط : 16001 السُمعة : 454
| موضوع: (JAVASCRIPT) كود اضافة زر الالوان في صندوق الماسي**Mohamed Nsr الإثنين 16 ديسمبر 2013 - 12:02 | |
| والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام اما بعد اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان في الصندوق الماسي صورة للكود بعد الوضع
الان طريقة وضع الكود اولا في الجافا لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد العنوان:كما تريد اضف الكود الى:جميع الصفحات كود Javascript * : - الكود:
-
var skin_color_picker = "light"; // Cambiar a "dark" si se prefiere oscuro. /** * * Color picker * Author: Stefan Petre www.eyecon.ro * * Dual licensed under the MIT and GPL licenses * */ $(function(){$(function(){$("#text_editor_textarea").length!=0&&(function(e){var t=function(){var t=65,n={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:!0,skin:"light",flat:!1},r=function(t,n){var r=D(t);e(n).data("colorpicker").fields.eq(1).val(r.r).end().eq(2).val(r.g).end().eq(3).val(r.b).end()},i=function(t,n){e(n).data("colorpicker").fields.eq(4).val(t.h).end().eq(5).val(t.s).end().eq(6).val(t.b).end()},s=function(t,n){e(n).data("colorpicker").fields.eq(0).val(P(D(t))).end()},o=function(t,n){e(n).data("colorpicker").selector.css("backgroundColor","#"+P(D({h:t.h,s:100,b:100})));e(n).data("colorpicker").selectorIndic.css({left:parseInt(150*t.s/100,10),top:parseInt(150*(100-t.b)/100,10)})},u=function(t,n){e(n).data("colorpicker").hue.css("top",parseInt(150-150*t.h/360,10))},a=function(t,n){e(n).data("colorpicker").currentColor.css("backgroundColor","#"+P(D(t)))},f=function(t,n){e(n).data("colorpicker").newColor.css("backgroundColor","#"+P(D(t)))},l=function(n){n=n.charCode||n.keyCode||-1;if(n>t&&n<=90||n==32)return!1;e(this).parent().parent().data("colorpicker").livePreview===!0&&h.apply(this)},h=function(t){var n=e(this).parent().parent(),a;if(this.parentNode.className.indexOf("_hex")>0){a=n.data("colorpicker");var l=this.value,h=6-l.length;if(h>0){for(var p=[],d=0;d<h;d++)p.push("0");p.push(l);l=p.join("")}l=_(M(l));a.color=a=l}else this.parentNode.className.indexOf("_hsb")>0?n.data("colorpicker").color=a=O({h:parseInt(n.data("colorpicker").fields.eq(4).val(),10),s:parseInt(n.data("colorpicker").fields.eq(5).val(),10),b:parseInt(n.data("colorpicker").fields.eq(6).val(),10)}):(a=n.data("colorpicker"),l={r:parseInt(n.data("colorpicker").fields.eq(1).val(),10),g:parseInt(n.data("colorpicker").fields.eq(2).val(),10),b:parseInt(n.data("colorpicker").fields.eq(3).val(),10)},a.color=a=_({r:Math.min(255,Math.max(0,l.r)),g:Math.min(255,Math.max(0,l.g)),b:Math.min(255,Math.max(0,l.b))}));t&&(r(a,n.get(0)),s(a,n.get(0)),i(a,n.get(0)));o(a,n.get(0));u(a,n.get(0));f(a,n.get(0));n.data("colorpicker").onChange.apply(n,[a,P(D(a)),D(a)])},p=function(){e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")},d=function(){t=this.parentNode.className.indexOf("_hex")>0?70:65;e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");e(this).parent().addClass("colorpicker_focus")},v=function(t){var n=e(this).parent().find("input").focus(),t={el:e(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:t.pageY,field:n,val:parseInt(n.val(),10),preview:e(this).parent().parent().data("colorpicker").livePreview};e(document).bind("mouseup",t,g);e(document).bind("mousemove",t,m)},m=function(e){e.data.field.val(Math.max(0,Math.min(e.data.max,parseInt(e.data.val+e.pageY-e.data.y,10))));e.data.preview&&h.apply(e.data.field.get(0),[!0]);return!1},g=function(t){h.apply(t.data.field.get(0),[!0]);t.data.el.removeClass("colorpicker_slider").find("input").focus();e(document).unbind("mouseup",g);e(document).unbind("mousemove",m);return!1},y=function(){var t={cal:e(this).parent(),y:e(this).offset().top};t.preview=t.cal.data("colorpicker").livePreview;e(document).bind("mouseup",t,w);e(document).bind("mousemove",t,b)},b=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,e.pageY-e.data.y)))/150,10)).get(0),[e.data.preview]);return!1},w=function(t){r(t.data.cal.data("colorpicker").color,t.data.cal.get(0));s(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).unbind("mouseup",w);e(document).unbind("mousemove",b);return!1},E=function(){var t={cal:e(this).parent(),pos:e(this).offset()};t.preview=t.cal.data("colorpicker").livePreview;e(document).bind("mouseup",t,x);e(document).bind("mousemove",t,S)},S=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,e.pageY-e.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,e.pageX-e.data.pos.left))/150,10)).get(0),[e.data.preview]);return!1},x=function(t){r(t.data.cal.data("colorpicker").color,t.data.cal.get(0));s(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).unbind("mouseup",x);e(document).unbind("mousemove",S);return!1},T=function(){e(this).addClass("colorpicker_focus")},N=function(){e(this).removeClass("colorpicker_focus")},C=function(t){var n=e(this).parent(),r=n.data("colorpicker").color;n.data("colorpicker").origColor=r;a(r,n.get(0));n.data("colorpicker").onSubmit(r,P(D(r)),D(r),n.data("colorpicker").el,t);e(this).parent().hide()},k=function(){var t=e("#"+e(this).data("colorpickerId"));t.data("colorpicker").onBeforeShow.apply(this,[t.get(0)]);var n=e(this).offset(),r;r=document.compatMode=="CSS1Compat";r={l:window.pageXOffset||(r?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(r?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(r?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(r?document.documentElement.clientHeight:document.body.clientHeight)};var i=n.top+this.offsetHeight,n=n.left;i+176>r.t+r.h&&(i-=this.offsetHeight+176);n+356>r.l+r.w&&(n-=356);t.css({left:n+"px",top:i+"px"});t.data("colorpicker").onShow.apply(this,[t.get(0)])!=!1&&t.show("fast");e(document).bind("mousedown",{cal:t},L);return!1},L=function(t){A(t.data.cal.get(0),t.target,t.data.cal.get(0))||(t.data.cal.data("colorpicker").onHide.apply(this,[t.data.cal.get(0)])!=!1&&t.data.cal.hide(),e(document).unbind("mousedown",L))},A=function(e,t,n){if(e==t)return!0;if(e.contains)return e.contains(t);if(e.compareDocumentPosition)return!!(e.compareDocumentPosition(t)&16);for(t=t.parentNode;t&&t!=n;){if(t==e)return!0;t=t.parentNode}return!1},O=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},M=function(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}},_=function(e){var t={h:0,s:0,b:0},n=Math.max(e.r,e.g,e.b),r=n-Math.min(e.r,e.g,e.b);t.b=n;t.s=n!=0?255*r/n:0;t.h=t.s!=0?e.r==n?(e.g-e.b)/r:e.g==n?2+(e.b-e.r)/r:4+(e.r-e.g)/r:-1;t.h*=60;t.h<0&&(t.h+=360);t.s*=100/255;t.b*=100/255;return t},D=function(e){var t={},n=Math.round(e.h),r=Math.round(e.s*255/100),e=Math.round(e.b*255/100);if(r==0)t.r=t.g=t.b=e;else{var r=(255-r)*e/255,i=(e-r)*(n%60)/60;n==360&&(n=0);n<60?(t.r=e,t.b=r,t.g=r+i):n<120?(t.g=e,t.b=r,t.r=e-i):n<180?(t.g=e,t.r=r,t.b=r+i):n<240?(t.b=e,t.r=r,t.g=e-i):n<300?(t.b=e,t.g=r,t.r=r+i):n<360?(t.r=e,t.g=r,t.b=e-i):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},P=function(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){t.length==1&&(n[e]="0"+t)});return n.join("")},H=function(){var t=e(this).parent(),n=t.data("colorpicker").origColor;t.data("colorpicker").color=n;r(n,t.get(0));s(n,t.get(0));i(n,t.get(0));o(n,t.get(0));u(n,t.get(0));f(n,t.get(0))};return{init:function(t){t=e.extend({},n,t||{});if(typeof t.color=="string")t.color=_(M(t.color));else if(t.color.r!=void 0&&t.color.g!=void 0&&t.color.b!=void 0)t.color=_(t.color);else if(t.color.h!=void 0&&t.color.s!=void 0&&t.color.b!=void 0)t.color=O(t.color);else return this;return this.each(function(){if(!e(this).data("colorpickerId")){var n=e.extend({},t);n.origColor=t.color;var m="collorpicker_"+parseInt(Math.random()*1e3);e(this).data("colorpickerId",m);m=e('<div class="sceditor-dropdown colorpicker '+n.skin+'"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",m);n.flat?m.appendTo(this).show("fast"):m.appendTo(document.body);n.fields=m.find("input").bind("keyup",l).bind("change",h).bind("blur",p).bind("focus",d);m.find("span").bind("mousedown",v).end().find(">div.colorpicker_current_color").bind("click",H);n.selector=m.find("div.colorpicker_color").bind("mousedown",E);n.selectorIndic=n.selector.find("div div");n.el=this;n.hue=m.find("div.colorpicker_hue div");m.find("div.colorpicker_hue").bind("mousedown",y);n.newColor=m.find("div.colorpicker_new_color");n.currentColor=m.find("div.colorpicker_current_color");m.data("colorpicker",n);m.find("div.colorpicker_submit").bind("mouseenter",T).bind("mouseleave",N).bind("click",C);r(n.color,m.get(0));i(n.color,m.get(0));s(n.color,m.get(0));u(n.color,m.get(0));o(n.color,m.get(0));a(n.color,m.get(0));f(n.color,m.get(0));n.flat?m.css({position:"relative",display:"block"}):e(this).bind(n.eventName,k)}})},showPicker:function(){return this.each(function(){e(this).data("colorpickerId")&&k.apply(this)})},hidePicker:function(){return this.each(function(){e(this).data("colorpickerId")&&e("#"+e(this).data("colorpickerId")).hide()})},setColor:function(t){if(typeof t=="string")t=_(M(t));else if(t.r!=void 0&&t.g!=void 0&&t.b!=void 0)t=_(t);else if(t.h!=void 0&&t.s!=void 0&&t.b!=void 0)t=O(t);else return this;return this.each(function(){if(e(this).data("colorpickerId")){var n=e("#"+e(this).data("colorpickerId"));n.data("colorpicker").color=t;n.data("colorpicker").origColor=t;r(t,n.get(0));i(t,n.get(0));s(t,n.get(0));u(t,n.get(0));o(t,n.get(0));a(t,n.get(0));f(t,n.get(0))}})}}}();e.fn.extend({ColorPicker:t.init,ColorPickerHide:t.hidePicker,ColorPickerShow:t.showPicker,ColorPickerSetColor:t.setColor})}(jQuery),$('<a class="sceditor-button sceditor-button-paletaavanzada" unselectable="on" title="لون خط الكتابة"><div unselectable="on" style="cursor: pointer !important; opacity: 1 !important; background-image:url(http://i83.servimg.com/u/f83/17/45/19/77/color_10.png)"></div></a>').insertAfter(".sceditor-button-color").ColorPicker({color:my_getcookie("defColCP")?my_getcookie("defColCP"):"#000000",flat:false,skin:skin_color_picker,onSubmit:function(e,t,n,r){my_setcookie("defColCP",t,1,0);var i=$("#text_editor_textarea").sceditor("instance");i.inSourceMode()?i.insertText("[color=#"+t+"]","[/color]"):i.execCommand("forecolor","#"+t);return!1}}))})}); ثانيا في اكواد ال css لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال css
وضع الكود التالي:
- الكود:
-
/*Mohamed Nsr كود اضافة زر الالوان في الصندوق الماسي*/
.colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url(http://im38.gulfup.com/rxrjB.jpg) !important; font-family: Arial, Helvetica, sans-serif; display: none; padding: 0 !important; } .colorpicker.dark{ background: url(http://im35.gulfup.com/Vliab.jpg) !important; } .colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } .colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.png); } .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.gif); margin: -5px 0 0 -5px; } .colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; } .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.gif) left top; margin: -4px 0 0 0; left: 0px; } .colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; } .colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; } .colorpicker input { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0 !important; height: 11px; } .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(http://i83.servimg.com/u/f83/17/45/19/77/custom11.png) top; left: 212px; top: 142px; } .colorpicker.dark .colorpicker_hex { background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.png) top; } .colorpicker_hex input { right: 6px; } .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } .colorpicker_rgb_r { background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom12.png); top: 52px; left: 212px; } .colorpicker.dark .colorpicker_rgb_r{ background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp12.png); } .colorpicker_rgb_g { background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom13.png); top: 82px; left: 212px; } .colorpicker.dark .colorpicker_rgb_g { background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp13.png); } .colorpicker_rgb_b { background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom14.png); top: 112px; left: 212px; } .colorpicker.dark .colorpicker_rgb_b { background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp14.png); } .colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b { display: none; } .colorpicker_submit { position: absolute; background: url("http://i83.servimg.com/u/f83/17/45/19/77/accept10.png") no-repeat; cursor: pointer; right: 10px; width: 48px; height: 50px; top: 118px; overflow: hidden; } .colorpicker_focus { background-position: center; } .colorpicker_hex.colorpicker_focus { background-position: bottom; } .colorpicker_submit.colorpicker_focus { background-position: bottom; } .colorpicker_slider { background-position: bottom; } .colorpicker { z-index: 3; } /*انتهاء الكود Mohamed Nsr*/ ملحوظه:يمكنك حذف الزر الاصلي لاختيار الالوان الموجود في الصندوق الماسي() عن طريق الكود التالي : يوضع الكود في: لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديدالعنوان:كما تريداضف الكود الى:جميع الصفحاتكود Javascript * : - الكود:
-
$(function(){$(function(){ $(".sceditor-button-color").hide(); })}); منقول للافادة وبهذا قد انتهى الشرح بالتوفيق ليكم تحياتي[Mohamed Nsr] فريق المساعدة
| |
|