الكائن jQuery.cssHooks()‎‎ في jQuery

jQuery.cssHooks

القيم المعادة

يعيد كائنًا من النوع Object.

الوصف

يتعلَّق هذا التابع بـ jQuery مباشرةً للتحكم بكيفيَّة استعادة أو ضبط قيم خاصِّيَّات CSS محدَّدة، أو توحيد أسماء خاصِّيَّات CSS، أو إنشاء خاصِّيَّات CSS مخصَّصة.

jQuery.cssHooks

أُضيف مع الإصدار: 1.4.3.

يوفِّر الكائن ‎$.cssHooks طريقةً لتعريف دوالٍ من أجل جلب أو ضبط قيم خاصِّيَّات CSS محدَّدة. يمكن أيضًا أن يُستخدَم لإنشاء cssHooks جديد من أجل توحيد (normalizing) ميزات CSS3 مثل تأثير الظلال على إطار العناصر (box shadows)، والتدرُّجات (gradients).

على سبيل المثال، بعض الإصدارات القديمة من المتصفحات التي تعتمد على Webkit تتطلب ‎-webkit-border-radius لتعيين قيمة الخاصِّيَّة border-radius لعنصرٍ بينما تتطلَّب الإصدارات القديمة من المتصفح Firefox وجود ‎-moz-border-radius. يستطيع خطَّاف CSS توحيد هذه الخاصِّيَّات التي تُسبق ببادئة ليتمكن التابع ‎.css()‎ من قبول اسم خاصِّيَّة قياسي موحَّد (مثل الاسم border-radius أو borderRadius مع صياغة الخاصِّيَّة في DOM).

بالإضافة إلى أنَّ التابع ‎$.cssHooks يوفِّر تحكمًا بالغ الدقَّة بكيفيَّة معالجة خاصِّيَّات محدَّدة، فعمله يمتدُّ أيضًا إلى ضبط قيم الخاصِّيَّات المتاحة للاستعمال مع التابع ‎.animate()‎.

تعريف خطَّاف CSS جديد هو أمرٌ بسيط جدًا. تعدُّ الشيفرة التالية نموذجًا ودليلًا لإنشاء واحدٍ جديدٍ خاصٍّ بك:

(function( $ ) {
 
// cssHooks يجب التحقق أولًا من دعم
if ( !$.cssHooks ) {
  // إن لم تكن مدعومة، فستظهر رسالة خطأ
  throw( new Error( "يجب استعمال الإصدار jQuery 1.4.3 وما بعده لعمل هذه الإضافة " ) );
}
 
// تكتب jQuery في الصفحة لأن ready استعمل هذه الشيفرة ضمن الاستدعاء 
// في هذا الأثناء، إذ ستختفي جميع الدوال إن كانت موجودة حينذاك cssHooks
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // CSS تحدث هنا عملية معالجة جلب خاصِّيَّة
    },
    set: function( elem, value ) {
      // CSS تحدث هنا عملية معالجة ضبط قيمة خاصِّيَّة
    }
  };
});
 
})( jQuery );

اختبار الميزات

يجب أولًا قبل توحيد خاصِّيَّة CSS محدَّدة مَعرِفَة إن كان المتصفح يدعم أسماء قياسيَّة للخاصِّيَّات أم تختلف بادئة أسماء الخاصِّيَّات تبعًا للمتصفح (vendor-prefixed). فللتحقُّق مثلًا من دعم الخاصِّيَّة border-radius، تأكَّد إن كانت توجد أيَّة أسماء مشتقة أو مبدوئة ببادئة للخاصِّيَّة ضمن الكائن style المؤقَّت.

(function( $ ) {
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
 
    // جعل الحرف الأول من اسم الخاصِّيَّة كبيرًا لتحقق من البادئة 
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "ms" ],
    div = document.createElement( "div" );
 
  if ( prop in div.style ) {
 
    // القياسية CSS المتصفح يدعم أسماء خاصِّيَّات
    supportedProp = prop;
  } else {
 
    // خلا ذلك، المتصفح يدعم إضافة بادئة معينة لاسم الخاصِّيَّة
    for ( var i = 0; i < prefixes.length; i++ ) {
      vendorProp = prefixes[ i ] + capProp;
      if ( vendorProp in div.style ) {
        supportedProp = vendorProp;
        break;
      }
    }
  }
 
  // IE تجنب حصول تسريب في الذاكرة في المتصفح
  div = null;
 
  // للوصول إليها من أي مكان $.support أضف الخاصِّيَّة إلى
  $.support[ prop ] = supportedProp;
  return supportedProp;
}
 
// :أنها تدعم "border-radius" استدعي الدالة؛ على سبيل المثال، وُجد بعد التحقق من 
styleSupport( "borderRadius" );
 
})( jQuery );

تعريف خطَّاف CSS كامل

لتعريف خطَّاف CSS كامل، ادمج المثال السابق مع المثال الأول بالشكل التالي:

function( $ ) {
 
if ( !$.cssHooks ) {
  throw( new Error( "يجب استعمال الإصدار jQuery 1.4.3 وما بعده لعمل هذه الإضافة " ) );
}
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "ms" ],
    div = document.createElement( "div" );
 
  if ( prop in div.style ) {
    supportedProp = prop;
  } else {
    for ( var i = 0; i < prefixes.length; i++ ) {
      vendorProp = prefixes[ i ] + capProp;
      if ( vendorProp in div.style ) {
        supportedProp = vendorProp;
        break;
      }
    }
  }
 
  div = null;
  $.support[ prop ] = supportedProp;
  return supportedProp;
}
 
var borderRadius = styleSupport( "borderRadius" );
 
// التي يبدأ اسمها ببادئة border-radius للمتصفحات التي تدعم الخاصِّيَّة cssHooks اضبط 
if ( borderRadius && borderRadius !== "borderRadius" ) {
  $.cssHooks.borderRadius = {
    get: function( elem, computed, extra ) {
      return $.css( elem, borderRadius );
    },
    set: function( elem, value) {
      elem.style[ borderRadius ] = value;
    }
  };
}
 
})( jQuery );

يمكنك بعد ذلك ضبط قيمة الخاصِّيَّة border-radius في المتصفح المدعوم باستعمال نمط DOM (سِنَام الجمل [camelCased]) أو نمط CSS (الوصل بشَرِطَة [hyphenated]):

$( "#element" ).css( "borderRadius", "10px" );
$( "#another" ).css( "border-radius", "20px" );

إن لم يكن المتصفح يدعم أي شكل من أشكال الخاصِّيَّة CSS سواءً التي يبدأ اسمها ببادئة أو لا، فلن يُطبَّق التنسيق على العنصر. أمَّا إن كان المتصفح يدعم خاصِّيَّةً بديلةً، فيمكن تطبيقها على cssHooks بدلًا من ذلك.

(function( $ ) {
 
// CSS ميزة دعم اختبار خاصِّيَّة
// والخاصِّيَّة البديلة
// ...
if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
 
  // للمتصفح الذي يدعم cssHooks تعيين
  // بعض الخاصِّيَّات التي تبدأ ببادئة فقط
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      return $.css( elem, $.support.someCSSProp );
    },
    set: function( elem, value) {
      elem.style[ $.support.someCSSProp ] = value;
    }
  };
} else if ( supportsProprietaryAlternative ) {
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      // عالج هنا عملية التحويل من الخاصِّيَّة البديلة
    },
    set: function( elem, value ) {
      // عالج هنا عملية التحويل إلى الخاصِّيَّة البديلة
    }
  }
}
 
})( jQuery );

واحدات خاصة

تضيف jQuery افتراضيًّا الواحدة "px" إلى القيم الممرَّرة إلى التابع ‎.css()‎. يمكن أن يُمنَع هذا السلوك عبر إضافة الخاصِّيَّة إلى الكائن jQuery.cssNumber:

$.cssNumber.someCSSProp = true;

التحريك مع cssHooks

يمكن تعليق خطَّاف css أيضًا بآلية التحريك (animation mechanism) في jQuery عبر إضافة الخاصِّيَّة إلى الكائن jQuery.fx.step:

$.fx.step.someCSSProp = function( fx ) {
 $.cssHooks.someCSSProp.set( fx.elem, fx.now + fx.unit );
};

انتبه إلى أنَّ هذا الأمر مناسبٌ تمامًا للحركات ذات القيم العدديَّة البسيطة. قد تحتاج إلى تخصيص الشيفرة أكثر من ذلك وهذا يعتمد على الخاصِّيَّة CSS، ونوع القيمة التي تعيدها، ودرجة تعقيد الحركة.

مصادر

• صفحة الكائن cssHooks. في توثيق jQuery الرسمي.