تم تصميم إطار تأثيرات jQuery UI بشكل نموذجي ، تمامًا مثل إطار عمل الأداة ، مما يسمح لك باختيار أجزاء الحزمة التي تريد استخدامها وتقليل متطلبات الشفرة. تستطيع إنشاء تنزيل مخصص لنفسك ، يأخذ في الاعتبار التبعيات بين الوحدات.
قبل النظر في كيفية إنشاء تأثير جديد ، يجب أن تكون على دراية بالوظائف الأخرى التي يوفرها بالفعل إطار تأثيرات jQuery UI ، بحيث يمكنك استخدامها عند تطوير المؤثرات الخاصة بك.
تكمن وراء وحدات تأثيرات jQuery UI الفردية مجموعة أساسية من الوظائف الشائعة الاستخدام. يتم تنفيذ هذه القدرات هنا بحيث لا تحتاج إلى إعادة اختراعها ويمكن تطبيقها على الفور إلى التأثيرات الخاصة بك. جنبا إلى جنب مع الرسوم المتحركة الملونة ، ستجد الرسوم المتحركة من سمات فئة واحدة إلى أخرى ، والعديد من الوظائف ذات المستوى المنخفض التي قد تكون مفيدة في تطوير تأثيرات جديدة.
تضيف وحدة Effects Core دعمًا مخصصًا للرسوم المتحركة لسمات الأنماط التي تحتوي على قيم اللون: ألوان المقدمة والخلفية ، وألوان الحدود والخطوط الخارجية. لا يسمح jQuery بحد ذاته سوى بتحريك الخصائص المميزة للقيم الرقمية البسيطة ، مع تحديد الوحدات الاختيارية مثل px أو em أو٪. لا يعرف كيفية تفسير قيم أكثر تعقيدًا ، مثل الألوان ، أو كيفية زيادة هذه القيم بشكل صحيح لتحقيق الانتقال المطلوب ، مثل من الأزرق إلى الأحمر عبر لون أرجواني متوسط.
تتكون قيم اللون من ثلاثة عناصر: المساهمات الحمراء والخضراء والزرقاء ، لكل منها قيمة تتراوح بين 0 و 255. ويمكن تحديدها في HTML و CSS بعدة طرق مختلفة ، كما هو موضح هنا:
يجب فصل المكونات الحمراء والخضراء والزرقاء وتحريكها بشكل فردي من قيمها الأولية إلى قيمها النهائية ، قبل دمجها في اللون المركب الجديد للخطوات الوسيطة. يضيف jQuery UI خطوات الحركة لكل سمة متأثرة لفك تشفير الألوان الحالية والمرغوبة بشكل صحيح ، ولتغيير القيمة أثناء تشغيل الرسم المتحرك. بالإضافة إلى تنسيقات الألوان الموضحة في القائمة السابقة ، يمكن أيضًا لمكالمة تنشيطية قبول مصفوفة من ثلاث قيم رقمية (كل منها بين 0 و 255) لتحديد اللون. بمجرد تحديد هذه الوظائف ، يمكنك تحريك الألوان بنفس الطريقة التي يمكنك القيام بها للسمات الرقمية الأخرى:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});يحتوي jQuery UI على قائمة موسعة من الألوان المحددة يفهمها ، من اللون الأحمر والأخضر الأساسي إلى مزيد من الأجزاء الداكنة وغير الظاهرة. بل هناك لون شفاف.
يتيح لك jQuery القياسي إمكانية إضافة فئات أو إزالتها أو تبديلها في العناصر المحددة. تعمل واجهة المستخدم jQuery واحدة بشكل أفضل من خلال السماح لك بتحريك عملية الانتقال بين الحالات السابقة واللاحقة. ويقوم بذلك عن طريق استخراج جميع قيم السمات التي يمكن تحريكها (قيم وألوان رقمية) من تكوينات البداية والنهاية ، ثم استدعاء استدعاء تحريك قياسي مع كل هذه الخصائص لتغييرها. يتم تشغيل هذا الرسم المتحرك الجديد عن طريق تحديد مدة عند استدعاء وظائف addClass أو removeClass أو toggleClass:
$('#myDiv').addClass('highlight', 1000);كما يضيف jQuery UI وظيفة جديدة ، switchClass ، والتي تزيل فئة وتضيف فئة ، مع الانتقال الاختياري بين الدولتين (عند توفير مدة):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);لتقديم دعم أفضل للتأثيرات المختلفة لـ jQuery UI ، توفر وحدة Effects Core العديد من الوظائف التي تكون مفيدة لهذه التأثيرات ، وربما الخاصة بك. لتوضيح كيفية استخدام العديد من هذه الوظائف ، تظهر القائمة التالية الأجزاء ذات الصلة من تأثير الشريحة.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};يمكنك استخدام وظيفة setMode لتحويل صيغة تبديل إلى العرض المناسب أو إخفاء القيمة بناءً على الرؤية الحالية للعنصر. إذا كان الوضع المتوفر يتم إظهاره أو إخفاؤه ، فإنه يحتفظ بتلك القيمة ، وفي هذه الحالة ، يتم عرض القيم الافتراضية إذا لم يتم تقديمها على الإطلاق.
قبل البدء في الرسم المتحرك للتأثير ، قد ترغب في استخدام وظيفة الحفظ لتذكر القيم الأصلية لسمات متعددة (من الأسماء في الدعائم) على العنصر ، بحيث يمكن استعادتها عند الانتهاء. يتم تخزين القيم مقابل العنصر باستخدام وظيفة بيانات jQuery.
لتسهيل حركة عنصر ما للتأثير ، يمكنك لف حاوية حول هذا العنصر باستخدام وظيفة createWrapper كنقطة مرجعية للحركة. يتم نسخ المعلومات الموضعية من العنصر المحدد على الغلاف بحيث تظهر مباشرة فوق العنصر الأصلي. ثم يتم وضع العنصر داخل الحاوية الجديدة في أعلى يمينها بحيث يكون التأثير الكلي غير ملحوظ من قبل المستخدم. تقوم الدالة بإرجاع مرجع إلى المجمّع.
أي تغييرات في الإعدادات اليسرى / اليمنى / العلوية / السفلية للعنصر الأصلي ستكون الآن نسبة إلى موضعها الأصلي ، دون التأثير على العناصر المحيطة. بعد حفظ قيم سمات معينة مسبقًا ، يمكنك استخدام وظيفة الاستعادة عند الانتهاء من الرسم المتحرك لإعادتها إلى إعداداتها الأصلية. في نفس الوقت ، يجب إزالة أي غلاف قمت بإنشائه مسبقًا مع وظيفة remove-Wrapper. تقوم هذه الدالة بإرجاع مرجع إلى المجمّع إذا تمت إزالته ، أو إلى العنصر نفسه إذا لم يكن هناك غلاف.
هناك بعض الوظائف الأخرى التي تقدمها وحدة jQuery UI Effects Core التي قد تكون مفيدة:
getBaseline (origin، original) تعمل هذه الدالة على ضبط مواصفات المنشأ (صفيف مكون من عنصرين من المواضع الرأسية والأفقية) إلى قيم كسرية (من 0.0 إلى 1.0) مع تحديد الحجم الأصلي (كائن له سمات الارتفاع والعرض). يقوم بتحويل مواضع مسماة (أعلى ، يسار ، مركز ، وهكذا) إلى القيم 0.0 ، 0.5 ، أو 1.0 ، وتحويل القيم الرقمية إلى نسبة البعد ذي الصلة. يحتوي الكائن الذي تم إرجاعه على السمتين x و y للاحتفاظ بالقيم الكسرية في الاتجاهات المقابلة. فمثلا،
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (عنصر ، قائمة ، عامل ، قيمة) لتطبيق معامل القياس على قيم سمات متعددة في وقت واحد ، استخدم هذه الوظيفة. لكل اسم سمة في القائمة ، قم باسترداد قيمته الحالية للعنصر وتحديث ذلك بضربه حسب العامل. قم بتعيين النتيجة إلى كائن قيمة تحت اسم السمة ، وإرجاع هذا الكائن من الدالة. على سبيل المثال ، لتقليل قيم معينة بمقدار النصف ، يمكنك القيام بذلك:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (مفتاح) لفصل سمة CSS مسماة (مفتاح) إلى مقدارها ووحداتها (em ، pt ، px ، أو٪) ، يتم إرجاعها كمصفوفة لقيمتين ، استخدم هذه الوظيفة. إذا لم تكن الوحدات من هذه الأنواع المعروفة ، فسيتم إرجاع مصفوفة فارغة. فمثلا،
var value = el.cssUnit('width'); // e.g. value = [200, 'px']يتم استخدام الوظائف المقدمة في هذا القسم بواسطة العديد من التأثيرات التي توفرها واجهة المستخدم jQuery. تتم مراجعة هذه التأثيرات في القسم التالي.
يتم توفير العديد من التأثيرات بواسطة jQuery UI. تم تصميم معظمها لتحسين كيفية ظهور عنصر ما أو اختفائه (مثل المكفوفين والإفلاتين) ، بينما يعمل البعض الآخر على جذب انتباهك إلى عنصر ما (مثل التمييز والتهويل):
يمكن استخدام هذه التأثيرات بالاقتران مع وظائف إظهار واجهة المستخدم jQuery المحسنة وإخفائها وتبديلها من خلال توفير اسم التأثير المرغوب كمعلمة أولى. يمكنك أيضًا توفير خيارات إضافية لتغيير سلوك التأثير ومدة الرسم المتحرك ووظيفة رد الاتصال التي يتم تشغيلها عند الانتهاء.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);مضمنة في وحدات واجهة المستخدم jQuery هي بعض وظائف المرافق الأساسية ، والسلوكيات منخفضة المستوى (مثل السحب والإسقاط) ، والمكونات عالية المستوى أو الحاجيات (مثل علامات التبويب و Datepicker) ، والعديد من التأثيرات المرئية. يمكنك استخدام هذه التأثيرات لتحسين عرض العناصر على صفحة الويب الخاصة بك ، أو لجلب عنصر معين لاهتمام المستخدم. لمساعدتك في إنشاء مؤثراتك الخاصة ، هناك مجموعة أساسية من الوظائف الشائعة الاستخدام.
هل استخدمت إطار عمل jQuery UI؟ كيف يقارن إلى tweens CSS الأصلي؟ دعنا نعرف أفكارك في التعليقات.