دليل المستخدم إلغاء

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

 

 

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

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

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

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

  3. انقر فوق أيقونة Plus، ثم انقر فوق Effects، ثم انقر فوق المؤثر المطلوب.

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

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

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

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

  5. لإضافة تأثيرات 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>
<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>
<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>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<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>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

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

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

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

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

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

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

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

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

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

  2. انقر فوق المؤثر الذي تريد حذفه ثم انقر فوق أيقونة Delete.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟