دعم أحلى منتدى

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA

اذهب الى الأسفل

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Empty (JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr

مُساهمة من طرف Mohamed الجمعة 13 ديسمبر 2013 - 16:46

 بسم الله الرحمان الر 
والصلاة والسلام على افضل الخلق الله سيدنا محمد عليه افضل الصلاة والسلام 
اليوم اتيت لكم بكود جميل جدا 
الا وهو كود تغيير شكل لوحة محرر الالوان في صندوق الكتابه 
وسيصبح بالشكل التالي:(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr MuSoa



قبل كل شئ يجب عمل الاتي:

لوحة الاداره>>ادارة عامة>>الرسائل والايميلات>>تشكيل >>نوع لوحة محرر الألوان في صندوق الكتابة :بسيط



الكود الاول يوضع في JAVASCRIPT
لوحة الاداره>>عناصر اضافية>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان * :حسب ما تريد
أضف الكود الى :جميع الصفحات
كود Javascript * :



الكود:
$(function(){$(function(){
 
  if ($("#text_editor_textarea").length != 0) {
    $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
      var mColorBasic = [],
        html = $('<div />');
       
// Lista de Colores
     
      mColorBasic["أسود"] = "#000000";
      mColorBasic["ازرق قاتم"] = "#00008B";
      mColorBasic["اخضر قاتم"] = "#006400";
      mColorBasic["نيلي"] = "#4B0082";
      mColorBasic["قرمزي"] = "#DC143C";
      mColorBasic["برتقالي"] = "#FF4500";
      mColorBasic["بني قاتم"] = "#663300";
 
      mColorBasic["رمادي قاتم"] = "#666666";
      mColorBasic["ازرق"] = "#4169E1";
      mColorBasic["سماوي قاتم"] = "#00CED1";
      mColorBasic["اخضر"] = "#008000";
      mColorBasic["ارجواني"] = "#9400D3";
      mColorBasic["احمر"] = "#FF0000";
      mColorBasic["برتقالي فاتح"] = "#FF9933";
      mColorBasic["بني"] = "#A0522D";
 
      mColorBasic["رمادي فاتح"] = "#D3D3D3";
      mColorBasic["ازرق فاتح"] = "#87CEEB";
      mColorBasic["سماوي"] = "#00FFFF";
      mColorBasic["اخضر"] = "#32CD32";
      mColorBasic["ارجواني فاتح"] = "#DA70D6";
      mColorBasic["احمر فاتح"] = "#FA8072";
      mColorBasic["ذهبي"] = "#FFD700";
      mColorBasic["بني فاتح"] = "#CD853F";
 
      mColorBasic["ابيض"] = "#FFFFFF";
      mColorBasic["سماوي فاتح"] = "#AFEEEE";
      mColorBasic["اخضر مزرق"] = "#7FFFD4";
      mColorBasic["اخضر فاتح"] = "#98FB98";
      mColorBasic["وردي"] = "#FFC0CB";
    mColorBasic["اصفر"] = "#FFFF00";
      mColorBasic["اخضر"] = "#DEB887";
     
// Fin de la lista de colores
     
 
     for(key in mColorBasic) html.append('<div class="color-option"
title="' + key + '"><span color="' + mColorBasic[key] + '"
style="background-color: ' + mColorBasic[key] + '
!important;"></span></div>');
     
      html.find('span').click(function(e) {
        callback($(this).attr('color'));
        editor.closeDropDown(true);
        e.preventDefault();
      });
     
      editor.createDropDown(caller, "color-picker", html);
    }   
  }
})});


ملحوظه:يمكنك اضافة الوان زيادة الى القائمة عن طريق الكود التالي:
الكود:
mColorBasic["اسم اللون"] = "كود اللون";
وطبعا يمكن وضعه بعد كلمة 
// Lista de Colores
الى
Fin de la lista de colores
بمعني يوضع في اي مكان بين الكلمتين 
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr NxqkB

ثانيا الكود يوضع في ال CSS
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال CSS 
الكود:
/* تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr */
.color-option {
display: inline-block !important;
width: 15px !important;  /* Ancho del icono del color */
height: 15px !important;  /* Altura del icono del color */
border: 2px solid #fff !important;  /* Color del borde del color */
margin: 3px !important;   /* Espacio entre cada icono */
box-shadow: 0 0 2px #778899;   /* Sombras */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* Anchor del icono del color */
height: 15px !important;  /* Altura del icono del color */
}
.color-option, .color-option span {
border-radius: 2px;  /* Redondeado */  
}
 
/* تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* Ancho del icono del color */
height: 100px !important;  /* Ancho del icono del color */
padding: 5px !important;
border-radius: 5px !important;
}
منقول للافادة 

وبها قد انتهى الشرح 
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr 221706 
تحياتي 
Mohamed Nsr
فريق المساعدة
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Help_r10



عدل سابقا من قبل Mohamed Nsr في الجمعة 13 ديسمبر 2013 - 16:58 عدل 1 مرات
Mohamed
Mohamed
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 11357
معدل النشاط : 16013
السُمعة : 454

الرجوع الى أعلى الصفحة اذهب الى الأسفل

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Empty (JAVASCRIPT) كود تغيير شكل المحرر في الصندوق الماسي ***Mohamed Nsr

مُساهمة من طرف Mohamed الإثنين 16 ديسمبر 2013 - 10:53

بسم الله الرحمان الر
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام 
اما بعد 
اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان 
في الصندوق الماسي
صورة للكود بعد الوضع 
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr WhTp0

الان طريقة وضع الكود 
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>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*/

منقول للافادة


وبهذا قد انتهى الشرح
بالتوفيق ليكم
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr 221706
تحياتي
[Mohamed Nsr]
فريق المساعدة
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Help_r10
Mohamed
Mohamed
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 11357
معدل النشاط : 16013
السُمعة : 454

الرجوع الى أعلى الصفحة اذهب الى الأسفل

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Empty (JAVASCRIPT) كود اضافة زر الالوان في صندوق الماسي**Mohamed Nsr

مُساهمة من طرف Mohamed الإثنين 16 ديسمبر 2013 - 12:02

بسم الله الرحمان الر
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام
اما بعد
اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان
في الصندوق الماسي
صورة للكود بعد الوضع
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr GB7cU

الان طريقة وضع الكود
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>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*/

ملحوظه:يمكنك حذف الزر الاصلي لاختيار الالوان الموجود في الصندوق الماسي((JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr S10)
عن طريق الكود التالي :
يوضع الكود في:
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :
الكود:
$(function(){$(function(){
      $(".sceditor-button-color").hide();
})});
منقول للافادة

وبهذا قد انتهى الشرح
بالتوفيق ليكم
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr 221706
تحياتي
[Mohamed Nsr]
فريق المساعدة
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr Help_r10
Mohamed
Mohamed
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 11357
معدل النشاط : 16013
السُمعة : 454

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى