أهلا وسهلا بك إلى .
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.

الرئيسيةالمجلةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخولدخول


صفحة جديدة 1

ملاحظات !

اذا رأيت تحميل الألعاب لايعمل غير http://188.95.248.41/ من الرابط وضع : http://www.gamestorrents.tv بدله وسوف يعمل بالتأكيد

مرحبآ بك في X-gaming

هذي الرسالة تعني انك غير مشترك
وهذا يعني عليك الأشتراك او الدخول
تسجيل - دخول

شاطر|
قديممنذ /الأحد نوفمبر 25, 2018 9:29 am#1

X-Gaming

Admin


avatar
? عدد المساهمات : : 224
? السٌّمعَة : : 1
? تاريخ التسجيل : : 30/08/2012
? العمر : : 28
? الموقع : : KsA4EvEr


معاينة صفحة البيانات الشخصي للعضو http://x-gaming.forumakers.com/

[حصري] زر الألوان html 5






السلام عليكم ورحمة الله وبركاته



بسم الله الرحمن الرحيم



لدينا اليوم كود لجعل زر الألوان متطور جداً ! وهو html 5 !


https://i.servimg.com/u/f90/19/29/36/78/screen11.png



https://i.servimg.com/u/f41/16/80/02/94/screen11.png



الكود من تطوير العضو Wecoc في منتدى الدعم الاجنبي

لنبدأ :
لوحة الادارة - عناصر إضافية - إدارة اكواد Javascript -إنشاء كود جديد

الاسم : الي يعجبك

جميع الصفحات

الكود :
الكود:
/*
* -- SCEditor HTML5 Color Picker --
* Version: 1.3 EN (2018-05-17)
* Author: Wecoc
* Description: Implements the default HTML5 Color Picker on the SCEditor
*/
 
$(document).ready(function() {
  if ($.sceditor && window.toolbar) {
    // Create SCEditor color buttons
    $.sceditor.command.set('color_h', {
      exec : drawColorHolder,
      txtExec : drawColorHolder
    });
    $.sceditor.command.set('color_p', {
      exec : callColorHolder,
      txtExec : callColorHolder
    });
    toolbar = toolbar.replace(/color/, 'color_h,color_p');
    setTimeout(setColorHTML5Picker, 5);
 
    // Set CSS propierties on SCEditor buttons
    $('head').append('<style type="text/css">' +
        '.sceditor-button-color_h div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
        '}' +
        '.sceditor-button-color_p div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
            'background-position: 0 -16px;' +
        '}' +
        '.sceditor-button-color_h {' +
            'padding-right: 2px !important;' +
            'border-radius: 3px 0px 0px 3px !important;' +
            'margin-right: -1px;' +
        '}' +
        '.sceditor-button-color_p {' +
            'padding-left: 2px !important;' +
            'border-radius: 0px 3px 3px 0px  !important;' +
            'width: 4px !important;' +
        '}' +
        '.color_holder {' +
            'position: absolute;' +
            'filter: alpha(opacity=0);' +
            'opacity: 0;' +
        '}' +
    '</style>');
  }
});
 
function setColorHTML5Picker() {
  // Get the color from last time if defined
  var start_color = startColorHolder();
  // Create HTML5 Color picker (hidden)
  var holder = $('<input type="color" class="color_holder" />')[0];
  $(holder).addClass('color_holder');
  holder.addEventListener("change", updateColorHolder);
  holder.value = start_color;
  // Define buttons "Current Color" & "New Color"
  var holder_button = document.querySelector('.sceditor-button-color_h div');
  var picker_button = document.querySelector('.sceditor-button-color_p div');
  // Set HTML5 button position
  var picker = document.querySelector('.sceditor-button-color_p');
  $(picker).after(holder);
  $('head').append('<style type="text/css">' +
      '.color_holder {' +
          'top: ' + picker.offsetTop + 'px;' +
          'left: ' + picker.offsetLeft + 'px;' +
          'width: ' + picker.offsetWidth + 'px;' +
          'height: ' + picker.offsetHeight + 'px;' +
      '}' +
  '</style>');
  // Set button tooltips
  holder_button.title = "Current Color";
  picker_button.title = "New Color";
  // Set button inner HTML (color line)
  holder_button.innerHTML = '<div class="color_line" style="position:relative;height:2px;top:12px;" />';
  refreshColorHolder(start_color);
  // Double hover effect
  var h = $(holder_button.parentElement), p = $(picker_button.parentElement);
  h.hover(function(){ p.addClass("hover") }, function(){ p.removeClass("hover") });
  p.hover(function(){ h.addClass("hover") }, function(){ h.removeClass("hover") });
  holder.addEventListener("mouseover", function(){ p.addClass("hover"); h.addClass("hover"); });
  holder.addEventListener("mouseout", function(){ p.removeClass("hover"); h.removeClass("hover"); });
};
 
function startColorHolder() {
  if (!localStorage.colorHolder) return "#ff0000";
  return localStorage.colorHolder;
};
 
function drawColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  this.insert("[color=" + holder.value + "]", "[/color]", true, true, true);
};
 
function callColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  holder.click();
};
 
function refreshColorHolder(value) {
  var line = document.querySelector('.color_line'); if (!line) return;
  line.style.background = value;
  localStorage.colorHolder = value;
};
 
function updateColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  refreshColorHolder(holder.value);
};

سجل

ومبروك عليك الكود رائع جداً ولايحذف زر الألوان القديم 








التوقيع


_________________



 


الإشارات المرجعية

(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
ازرار الرد السريع تظهر متأخرة قليلاً




الذين يشاهدون محتوى الموضوع الآن : 24 ( الأعضاء 1 والزوار 23)


تعليمات المشاركة
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML متاحة