استخدام تأثيرات jQuery في Dreamweaver

تاريخ آخر تحديث 10‏/12‏/2018

يمكنك تصميم مواقع جذابة باستخدام تأثيرات jQuery الرائعة. يسمح لك تكامل Dreamweaver مع jQuery بتضمين تأثيرات مثل المنزلقات بدون الحاجة إلى كتابة أية تعليمة برمجية.

إضافة تأثيرات jQuery

في عرض Design أو Code بمستند Dreamweaver، حدد العنصر المطلوب تطبيق تأثير jQuery عليه.

حدد Windows > Behaviors لفتح اللوحة Behaviors.

انقر على أيقونة Plus، وانقر على Effects، ثم انقر على التأثير المطلوب.

إضافة تأثيرات jQuery
إضافة تأثيرات jQuery

تظهر لوحة التخصيص مع إعدادات التأثير المحدد.

حدد الإعدادات مثل عنصر الهدف المطلوب تطبيق التأثير علية ومدة التأثير.

يمكن أن يكون العنصر الهدف هو نفس العنصر الذي حددته أولاً أو عنصر آخر في الصفحة. على سبيل المثال، إذا كنت تريد من المستخدمين النقر فوق العنصر A لإخفاء أو إظهار العنصر B، فإن العنصر الهدف يكون B.

لإضافة تأثيرات jQuery متعددة، كرر الخطوات أعلاه.

عند اختيار تأثيرات متعددة، يقوم Dreamweaver بتطبيق التأثيرات بترتيب العرض في اللوحة Behaviors. لتغيير ترتيب التأثيرات، استخدم الأسهم السفلية الموجودة أعلى اللوحة.

يقوم Dreamweaver تلقائيًا بإدخال التعليمات البرمجية المناسبة في المستند. على سبيل المثال، إذا قمت بتحديد التأثير'Fade'، يتم إدخال التعليمات البرمجية التالية:

  • مراجع الملفات الخارجية للملفات التابعة المطلوبة لتشغيل تأثيرات jQuery:

<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>

  • يتم تطبيق التعليمات البرمجية التالية على العنصر في علامة الموضوع:

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>

  • تتم إضافة علامة نصية بجانب التعليمات البرمجية:

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

تأثيرات jQuery المستندة إلى الحدث

عند تطبيق تأثير jQuery، يتم تخصيصه لحدث onClick افتراضيًا. يمكنك تغيير حدث التشغيل للتأثير باستخدام اللوحة Behaviors.

حدد عنصر الصفحة المطلوب.

في اللوحة Windows > Behaviors انقر فوق الرمز Show Set Events.

انقر فوق السهم المناظر للتأثير الذي يتم تطبيقه حاليًا. لاحظ أن العمود الأول يتغير إلى قائمة منسدلة توفر الأحداث التي يمكنك الاختيار منها.

انقر فوق الحدث المطلوب.

إزالة تأثيرات jQuery

حدد عنصر الصفحة المطلوب.

تسرد اللوحة Behaviors كل التأثيرات التي يتم تطبيقها على عنصر الصفحة المحدد.

انقر على التأثير الذي تريد حذفه ثم انقر على أيقونة الحذف.