Hitskin.comهذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
انشاء منتدى مجاني(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr
من طرف Mohamed الجمعة 13 ديسمبر 2013 - 16:46
والصلاة والسلام على افضل الخلق الله سيدنا محمد عليه افضل الصلاة والسلام
اليوم اتيت لكم بكود جميل جدا
اليوم اتيت لكم بكود جميل جدا
الا وهو كود تغيير شكل لوحة محرر الالوان في صندوق الكتابه
وسيصبح بالشكل التالي:
قبل كل شئ يجب عمل الاتي:
لوحة الاداره>>ادارة عامة>>الرسائل والايميلات>>تشكيل >>نوع لوحة محرر الألوان في صندوق الكتابة :بسيط
الكود الاول يوضع في 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
بمعني يوضع في اي مكان بين الكلمتين
ثانيا الكود يوضع في ال 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;
}
وبها قد انتهى الشرح
تحياتي
Mohamed Nsr
Mohamed Nsr
فريق المساعدة
عدل سابقا من قبل Mohamed Nsr في الجمعة 13 ديسمبر 2013 - 16:58 عدل 1 مرات
Mohamed- احلى إدارة
-
عدد المساهمات : 11350
معدل النشاط : 15984
السُمعة : 454
(JAVASCRIPT) كود تغيير شكل المحرر في الصندوق الماسي ***Mohamed Nsr
من طرف Mohamed الإثنين 16 ديسمبر 2013 - 10:53
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام
اما بعد
اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان
في الصندوق الماسي
في الصندوق الماسي
صورة للكود بعد الوضع
الان طريقة وضع الكود
اولا في الجافا
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد 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- احلى إدارة
-
عدد المساهمات : 11350
معدل النشاط : 15984
السُمعة : 454
(JAVASCRIPT) كود اضافة زر الالوان في صندوق الماسي**Mohamed Nsr
من طرف Mohamed الإثنين 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 * :
وبهذا قد انتهى الشرح
بالتوفيق ليكم
تحياتي
[Mohamed Nsr]
فريق المساعدة
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :
- الكود:
$(function(){$(function(){
$(".sceditor-button-color").hide();
})});
وبهذا قد انتهى الشرح
بالتوفيق ليكم
تحياتي
[Mohamed Nsr]
فريق المساعدة
Mohamed- احلى إدارة
-
عدد المساهمات : 11350
معدل النشاط : 15984
السُمعة : 454
مواضيع مماثلة» (JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr لايعمل
» تغيير شكل لوحة محرر الألوان في صندوق الكتابة
» مشكلة في تغيير شكل لوحة محرر الألوان في صندوق (تم الحل)
» (JAVASCRIPT)كود تغيير شكل المتواجدون الان للنسخه PHPBB3 ليصبح مثل النسخهPHPBB2 الثانيه***MoHaMeD NsR
» (JAVASCRIPT)كود تغيير الواجهه في تاريخ معيين***MoHaMeD NsR
» تغيير شكل لوحة محرر الألوان في صندوق الكتابة
» مشكلة في تغيير شكل لوحة محرر الألوان في صندوق (تم الحل)
» (JAVASCRIPT)كود تغيير شكل المتواجدون الان للنسخه PHPBB3 ليصبح مثل النسخهPHPBB2 الثانيه***MoHaMeD NsR
» (JAVASCRIPT)كود تغيير الواجهه في تاريخ معيين***MoHaMeD NsR
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى