تطبيق سلوكيات JavaScript المضمنة

تاريخ آخر تحديث 27 أبريل 2021

استخدم هذا الموضوع لفهم كيفية تطبيق سلوكيات JavaScript المدمجة في Adobe Dreamweaver.

استخدام السلوكيات المضمنة

تم كتابة السلوكيات المضمنة مع Dreamweaver لتعمل في المتصفحات الحديثة. تفشل السلوكيات دون إزعاج في المستعرضات القديمة.

ملاحظة

تم كتابة إجراءات Dreamweaver بعناية لتعمل في أكبر عدد ممكن من المتصفحات. إذا قمت بإزالة الكود من إجراء Dreamweaver يدوياً، أو استبدلته بكودك الخاص، فقد تفقد التوافق عبر المتصفحات.

على الرغم من أن إجراءات Dreamweaver تم كتابتها لتعظيم التوافق عبر المتصفحات، إلا أن بعض المتصفحات لا تدعم JavaScript على الإطلاق، والعديد من الأشخاص الذين يتصفحون الويب يحتفظون بـ JavaScript مُعطّلاً في متصفحاتهم. للحصول على أفضل النتائج عبر المنصات، وفّر واجهات بديلة محاطة بعلامات <noscript> حتى يتمكن الأشخاص الذين ليس لديهم JavaScript من استخدام موقعك.

تطبيق السلوك Call JavaScript

ينفذ سلوك Call JavaScript دالة مخصصة أو سطر من كود JavaScript عند حدوث حدث.(يمكنك كتابة دليل البرمجة بنفسك، أو يمكنك استخدام الكود المقدم من مكتبات JavaScript المتاحة مجاناً على الويب.)

حدد كائناً واختر Call JavaScript من قائمة Add Behavior في لوحة Behaviors.
اكتب كود JavaScript الدقيق الذي سيتم تنفيذه، أو اكتب اسم الدالة.

على سبيل المثال، لإنشاء زر Back، قد تكتب if (history.length > 0){history.back()}. إذا كنت قد غلفت الكود الخاص بك في وظيفة، اكتب اسم الوظيفة فقط (على سبيل المثال، hGoBack()).

انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Change Property

استخدم سلوك Change Property لتغيير قيمة إحدى خصائص الكائن (على سبيل المثال، لون الخلفية لـ div أو إجراء النموذج).

ملاحظة

استخدم هذا السلوك فقط إذا كنت مألوفاً جداً مع HTML وJavaScript.

حدد كائناً واختر Change Property من قائمة Add Behavior في لوحة Behaviors.
من قائمة Type Of Element، حدد نوع العنصر لعرض جميع العناصر المحددة من هذا النوع.
حدد عنصرًا من القائمة Element ID.
حدد خاصية من قائمة Property، أو أدخل اسم الخاصية في المربع.
أدخل القيمة الجديدة للخاصية الجديدة في حقل New Value.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Check Plugin

استخدم سلوك Check Plugin لإرسال الزوار إلى صفحات مختلفة حسب ما إذا كان لديهم البرنامج المساعد المحدد مُثبتاً أم لا. على سبيل المثال، قد تريد من الزوار الانتقال إلى صفحة واحدة إذا كان لديهم Shockwave وصفحة أخرى إذا لم يكن لديهم.

ملاحظة

لا يمكنك اكتشاف البرامج المساعدة المحددة في Internet Explorer باستخدام JavaScript. ومع ذلك، فإن تحديد Flash أو Director سيضيف كود VBScript المناسب إلى صفحتك لاكتشاف هذه البرامج المساعدة في Internet Explorer على Windows. اكتشاف المكون الإضافي مستحيل في Internet Explorer على نظام التشغيل Mac OS.

حدد كائناً واختر Check Plugin من قائمة Add Behavior في لوحة Behaviors.
حدد برنامجاً مساعداً من قائمة Plugin، أو انقر Enter واكتب الاسم المحدد للبرنامج المساعد في المربع المجاور.

يجب أن تستخدم الاسم الدقيق للإضافة كما هو محدد بخط عريض في صفحة About Plug‑ins في Netscape Navigator. (في Windows، حدد أمر Help > About Plug‑ins في Navigator؛ على Mac OS، حدد About Plug‑ins من قائمة Apple.)

في مربع If Found, Go To URL، حدد عنوان URL للزوار الذين لديهم الإضافة.

إذا حددت عنوان URL بعيد، يجب أن تضمن البادئة http:// في العنوان. إذا تركت الحقل فارغًا، سيبقى الزوار في نفس الصفحة.

في مربع Otherwise, Go To URL، حدد عنوان URL بديل للزوار الذين ليس لديهم الإضافة. إذا تركت الحقل فارغًا، سيبقى الزوار في نفس الصفحة.
حدد ما الذي تفعله إذا كان اكتشاف المكون الإضافي غير ممكن. بشكل افتراضي، عندما يكون الاكتشاف مستحيلًا، يتم إرسال الزائر إلى عنوان URL المدرج في مربع Otherwise. لإرسال الزائر بدلاً من ذلك إلى عنوان URL الأول (If Found)، حدد الخيار Always Go To First URL If Detection Is Not Possible.عند تحديده، يعني هذا الخيار فعليًا "افترض أن الزائر لديه الإضافة، إلا إذا أشار المتصفح صراحة إلى أن الإضافة غير موجودة." بشكل عام، حدد هذا الخيار إذا كان محتوى الإضافة جزءًا لا يتجزأ من صفحتك؛ وإلا اتركه غير محدد.
ملاحظة

هذا الخيار يطبق فقط على Internet Explorer؛ Netscape Navigator يمكنه دائمًا اكتشاف الإضافات.

انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Drag AP Element

سلوك Drag AP Element يتيح للزائر سحب عنصر مُوضَع تموضعًا مطلقًا (AP).استخدم هذا السلوك لإنشاء الألغاز وعناصر التحكم المنزلقة وعناصر واجهة أخرى قابلة للحركة.

يمكنك تحديد الاتجاه الذي يمكن للزائر فيه سحب عنصر AP (أفقيًا أو عموديًا أو في أي اتجاه)، هدف يجب على الزائر سحب عنصر AP إليه، ما إذا كان سيتم إلحاق عنصر AP بالهدف إذا كان عنصر AP ضمن عدد معين من البكسلات من الهدف، وماذا نفعل عندما يصل عنصر AP إلى الهدف، والمزيد.

لأن سلوك Drag AP Element يجب أن يتم استدعاؤه قبل أن يتمكن الزائر من سحب عنصر AP، يجب أن تربط Drag AP Element بكائن body (مع حدث onLoad).

حدد Insert > Layout Objects > AP Div أو انقر على زر Draw AP Div في لوحة Insert وارسم AP Div في عرض Design لنافذة Document.
انقر على <body> في محدد العلامات في الزاوية السفلية اليسرى من نافذة Document.
حدد Drag AP Element من قائمة Add Behavior في لوحة Behaviors.

إذا كان Drag AP Element غير متاح، فمن المحتمل أنك قمت بتحديد عنصر AP.

في القائمة المنبثقة AP Element، حدد عنصر AP.
حدد إما Constrained أو Unconstrained من قائمة Movement المنبثقة.

الحركة غير المقيدة (Unconstrained) مناسبة للألغاز وألعاب السحب والإفلات الأخرى.لعناصر التحكم المنزلقة والمناظر المتحركة مثل أدراج الملفات والستائر والستائر المصغّرة، حدد الحركة المقيدة.

للحركة المقيدة، أدخل قيمًا (بالبكسل) في مربعات Up وDown وLeft وRight.

القيم نسبية إلى الموضع الابتدائي لعنصر AP. لتقييد الحركة ضمن منطقة مستطيلة، أدخل قيمًا موجبة في جميع المربعات الأربعة. للسماح بالحركة العمودية فقط، أدخل قيمًا موجبة للأعلى والأسفل و0 لليسار واليمين. للسماح بالحركة الأفقية فقط، أدخل قيمًا موجبة لليسار واليمين و0 للأعلى والأسفل.

أدخل القيم (بالبكسل) لهدف الإفلات في مربعي اليسار والأعلى.

هدف الإفلات هو المكان الذي تريد من الزائر سحب عنصر AP إليه.يُعتبر أن عنصر AP قد وصل إلى هدف الإفلات عندما تتطابق إحداثياته اليسرى والعلوية مع القيم التي تدخلها في مربعي اليسار والأعلى.القيم نسبية إلى الزاوية العلوية اليسرى لنافذة المتصفح.انقر فوق "الحصول على الموضع الحالي" لملء مربعات النص تلقائياً بالموضع الحالي لعنصر AP.

أدخل قيمة (بالبكسل) في مربع الالتقاط إذا كان ضمن المسافة لتحديد مدى قرب الزائر من هدف الإفلات قبل أن ينتقل عنصر AP إلى الهدف.

القيم الأكبر تجعل من السهل على الزائر العثور على هدف الإفلات.

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

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

حدد أي خيارات من While Dragging تريد استخدامها:
  • اختر إحضار العنصر إلى المقدمة إذا كان عنصر AP يجب أن ينتقل إلى مقدمة ترتيب التكديس أثناء سحبه.إذا اخترت هذا الخيار، استخدم القائمة المنبثقة لتحديد ما إذا كنت تريد ترك عنصر AP في المقدمة أو استعادته إلى موضعه الأصلي في ترتيب التكديس.

  • أدخل كود JavaScript أو اسم دالة (على سبيل المثال، monitorAPelement()) في مربع استدعاء JavaScript لتنفيذ الكود أو الدالة بشكل متكرر أثناء سحب عنصر AP.على سبيل المثال، يمكنك كتابة دالة تراقب إحداثيات عنصر AP وتعرض تلميحات مثل "أنت تقترب" أو "أنت لست قريبًا من هدف الإفلات" في مربع نص.

أدخل كود JavaScript أو اسم دالة (على سبيل المثال، evaluateAPelementPos()) في مربع استدعاء JavaScript الثاني لتنفيذ الكود أو الدالة عند إفلات عنصر AP.اختر فقط إذا تم الالتقاط إذا كان JavaScript يجب أن يتم تنفيذه فقط إذا وصل عنصر AP إلى هدف الإفلات.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

جمع معلومات عن عنصر AP القابل للسحب

عندما تربط سلوك سحب عنصر AP بكائن، يدرج Dreamweaver دالة MM_dragLayer() في قسم head من مستندك.(تحتفظ الدالة بنظام التسمية القديم لعناصر AP [أي، "الطبقة"] بحيث تبقى الطبقات المُنشأة في الإصدارات السابقة من Dreamweaver قابلة للتعديل.)بالإضافة إلى تسجيل عنصر AP كقابل للسحب، تحدد هذه الدالة ثلاث خصائص لكل عنصر AP قابل للسحب—MM_LEFTRIGHT، MM_UPDOWN، وMM_SNAPPED—التي يمكنك استخدامها في دوال JavaScript الخاصة بك لتحديد الموضع الأفقي النسبي لعنصر AP، والموضع العمودي النسبي لعنصر AP، وما إذا كان عنصر AP قد وصل إلى الهدف المحدد.

ملاحظة

المعلومات المقدمة هنا مخصصة للمبرمجين ذوي الخبرة في JavaScript فقط.

على سبيل المثال، تعرض الدالة التالية قيمة خاصية MM_UPDOWN (الموضع العمودي الحالي لعنصر AP) في حقل نموذج يُسمى curPosField.(حقول النماذج مفيدة لعرض المعلومات المُحدثة باستمرار لأنها ديناميكية—أي يمكنك تغيير محتوياتها بعد انتهاء تحميل الصفحة.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

بدلاً من عرض قيم MM_UPDOWN أو MM_LEFTRIGHT في حقل نموذج، يمكنك استخدام هذه القيم بطرق متنوعة أخرى. على سبيل المثال، يمكنك كتابة دالة تعرض رسالة في حقل النموذج اعتماداً على مدى قرب القيمة من منطقة الإفلات، أو يمكنك استدعاء دالة أخرى لإظهار أو إخفاء عنصر AP اعتماداً على القيمة.

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

تطبيق السلوك Go To URL

سلوك الانتقال إلى URL يفتح صفحة جديدة في النافذة الحالية أو في الإطار المحدد. هذا السلوك مفيد لتغيير محتويات إطارين أو أكثر بنقرة واحدة.

حدد كائناً واختر الانتقال إلى URL من قائمة إضافة سلوك في لوحة السلوكيات.
حدد وجهة لعنوان URL من القائمة Open In.

تسرد قائمة "فتح في" تلقائياً أسماء جميع الإطارات الموجودة في مجموعة الإطارات الحالية بالإضافة إلى النافذة الرئيسية.في حال عدم وجود إطارات، تكون النافذة الرئيسية هي الخيار الوحيد.

ملاحظة

قد يُنتج هذا السلوك نتائج غير متوقعة إذا كان أي إطار يحمل اسم top أو blank أو self أو parent. أحياناً تخطئ المتصفحات في اعتبار هذه الأسماء أسماء أهداف محجوزة.

انقر على استعراض لتحديد مستند للفتح، أو أدخل المسار واسم الملف للمستند في مربع URL.
كرر الخطوتين 2 و 3 لفتح مستندات إضافية في إطارات أخرى.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Jump Menu

عندما تُنشئ قائمة انتقال باستخدام إدراج > نموذج > قائمة انتقال، ينشئ Dreamweaver كائن قائمة ويربط سلوك قائمة الانتقال (أو انتقال قائمة الانتقال) به. لا توجد حاجة عادةً لربط سلوك قائمة الانتقال بكائن يدوياً.

يمكنك تحرير قائمة انتقال موجودة بإحدى طريقتين:

  • يمكنك تحرير وإعادة ترتيب عناصر القائمة، وتغيير الملفات للانتقال إليها، وتغيير النافذة التي تُفتح فيها هذه الملفات، بالنقر المزدوج على سلوك قائمة انتقال موجود في لوحة السلوكيات.

  • يمكنك تحرير العناصر في القائمة تماماً كما تحرر العناصر في أي قائمة، بتحديد القائمة واستخدام زر قيم القائمة في لوحة الخصائص.

أنشئ كائن قائمة انتقال إذا لم يكن موجوداً بالفعل في مستندك.
حدد الكائن واختر Jump Menu من قائمة Add Behavior في لوحة Behaviors.
أجرِ التغييرات المرغوبة في مربع حوار Jump Menu ثم انقر فوق موافق.

تطبيق السلوك Jump Menu Go

سلوك Jump Menu Go مرتبط بشكل وثيق بسلوك Jump Menu؛ يتيح لك Jump Menu Go ربط زر Go بقائمة انتقال. (قبل استخدام هذا السلوك، يجب أن تكون قائمة القفز موجودة بالفعل في المستند.) النقر فوق زر Go يفتح الرابط المحدد في قائمة القفز. لا تحتاج قائمة القفز عادة إلى زر Go؛ تحديد عنصر من قائمة القفز يؤدي عموماً إلى تحميل عنوان URL دون الحاجة لأي إجراء إضافي من المستخدم. لكن إذا حدد الزائر نفس العنصر المختار بالفعل في قائمة القفز، فلن يحدث القفز. بشكل عام، هذا لا يهم، لكن إذا ظهرت قائمة القفز في إطار، وعناصر قائمة القفز ترتبط بصفحات في إطارات أخرى، فإن زر Go غالباً ما يكون مفيداً، للسماح للزوار بإعادة تحديد عنصر محدد بالفعل في قائمة القفز.

ملاحظة

عندما تستخدم زر Go مع قائمة القفز، يصبح زر Go الآلية الوحيدة التي "تقفز" بالمستخدم إلى عنوان URL المرتبط بالتحديد في القائمة.تحديد عنصر قائمة في قائمة القفز لا يعيد توجيه المستخدم تلقائياً إلى صفحة أو إطار آخر.

حدد كائناً لاستخدامه كزر Go (عموماً صورة زر)، واختر Jump Menu Go من قائمة "إضافة سلوك" في لوحة "السلوكيات".
في قائمة اختيار Jump Menu، حدد قائمة لزر Go لتفعيلها وانقر فوق موافق.

تطبيق السلوك Open Browser Window

استخدم سلوك فتح نافذة المتصفح لفتح صفحة في نافذة جديدة. يمكنك تحديد خصائص النافذة الجديدة، بما في ذلك حجمها وسماتها (ما إذا كانت قابلة لتغيير الحجم، لها شريط قوائم، وهكذا) واسمها.على سبيل المثال، يمكنك استخدام هذا السلوك لفتح صورة أكبر في نافذة منفصلة عندما ينقر الزائر على صورة مصغرة؛ مع هذا السلوك، يمكنك جعل النافذة الجديدة بنفس حجم الصورة تماماً.

إذا لم تحدد أي خصائص للنافذة، فستفتح بحجم وخصائص النافذة التي فُتحت منها. تحديد أي خاصية للنافذة يؤدي تلقائياً إلى إيقاف جميع الخصائص الأخرى التي لم يتم تشغيلها بشكل صريح. على سبيل المثال، إذا لم تحدد أي خصائص للنافذة، قد تفتح بحجم 1024 x 768 بكسل وتحتوي على شريط تنقل (يظهر أزرار الرجوع والتقدم والصفحة الرئيسية وإعادة التحميل)، وشريط أدوات الموقع (يظهر عنوان URL)، وشريط الحالة (يظهر رسائل الحالة، في الأسفل)، وشريط القوائم (يظهر قوائم الملف والتعديل والعرض وقوائم أخرى).إذا حددت صراحة العرض إلى 640 والارتفاع إلى 480 ولم تحدد أي خصائص أخرى، ستفتح النافذة بحجم 640 x 480 بكسل، دون أشرطة أدوات.

حدد كائناً واختر فتح نافذة المتصفح من قائمة إضافة سلوك في لوحة السلوكيات.
انقر فوق استعراض لتحديد ملف، أو أدخل عنوان URL الذي تريد عرضه.
اضبط خيارات عرض وارتفاع النافذة (بالبكسل) ولدمج أشرطة الأدوات المختلفة وأشرطة التمرير ومقابض تغيير الحجم وما شابه. امنح النافذة اسماً (لا تستخدم مسافات أو أحرف خاصة) إذا كنت تريدها أن تكون هدفاً للروابط أو تريد التحكم بها باستخدام JavaScript.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Popup Message

يعرض سلوك الرسالة المنبثقة تنبيه JavaScript مع الرسالة التي تحددها.نظراً لأن تنبيهات JavaScript تحتوي على زر واحد فقط (موافق)، استخدم هذا السلوك لإعطاء المستخدم معلومات بدلاً من تقديم خيار.

يمكنك تضمين أي استدعاء وظيفة JavaScript صالح أو خاصية أو متغير عام أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس معقوفة ({}). لعرض قوس معقوف، ضع شرطة مائلة عكسية قبله (\{).

مثال:

عنوان URL لهذه الصفحة هو {window.location}، واليوم هو {new Date()}.

ملاحظة

يتحكم المتصفح في مظهر التنبيه. إذا كنت تريد المزيد من التحكم في المظهر، فكر في استخدام سلوك فتح نافذة المتصفح.

حدد كائنًا واختر رسالة منبثقة من قائمة إضافة سلوك في لوحة السلوكيات.
أدخل رسالتك في المربع Message.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Preload Images

يؤدي سلوك تحميل الصور مسبقًا إلى تقصير وقت العرض عن طريق تخزين الصور مؤقتًا التي لا تظهر عندما تظهر الصفحة لأول مرة (على سبيل المثال، الصور التي سيتم استبدالها بـ سلوكيات أو نصوص برمجية).

ملاحظة

يقوم سلوك تبديل الصورة تلقائيًا بتحميل جميع صور التمييز مسبقًا عند تحديد خيار تحميل الصور مسبقًا في مربع حوار تبديل الصورة، لذا لا تحتاج إلى إضافة تحميل الصور مسبقًا يدويًا عند استخدام تبديل الصورة.

حدد كائنًا واختر تحميل الصور مسبقًا من قائمة إضافة سلوك في لوحة السلوكيات.
انقر على تصفح لتحديد ملف صورة، أو أدخل المسار واسم ملف الصورة في مربع Image Source File.
انقر على زر علامة الجمع (+) في أعلى مربع الحوار لإضافة الصورة إلى قائمة تحميل الصور مسبقًا.
كرر الخطوتين 2 و 3 لجميع الصور المتبقية التي تريد تحميلها مسبقًا في الصفحة الحالية.
لإزالة صورة من قائمة تحميل الصور مسبقًا، حددها وانقر على زر علامة الطرح (–).
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Set Text Of Frame

يتيح لك سلوك تعيين نص الإطار تعيين نص إطار بشكل ديناميكي، واستبدال محتوى وتنسيق الإطار بـ المحتوى الذي تحدده. يمكن أن يتضمن المحتوى أي كود HTML صالح. استخدم هذا السلوك لعرض المعلومات ديناميكيًا.

على الرغم من أن سلوك تعيين نص الإطار يستبدل تنسيق الإطار، يمكنك تحديد الاحتفاظ بـ لون الخلفية للاحتفاظ بخصائص خلفية الصفحة ولون النص.

يمكنك تضمين أي استدعاء وظيفة JavaScript صالح أو خاصية أو متغير عام أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس معقوفة ({}). لعرض قوس معقوف، ضع شرطة مائلة عكسية قبله (\{).

مثال:

عنوان URL لهذه الصفحة هو {window.location}، واليوم هو {new Date()}.

حدد كائنًا واختر تعيين النص > تعيين نص الإطار من قائمة إضافة سلوك في لوحة السلوكيات.
في مربع حوار تعيين نص الإطار، حدد الإطار المستهدف من قائمة الإطار.
انقر على زر الحصول على HTML الحالي لنسخ المحتويات الحالية لقسم body في الإطار المستهدف.
أدخل رسالة في المربع New HTML.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

طبق سلوك تعيين نص الحاوية

سلوك Set Text Of Container يستبدل المحتوى والتنسيق الخاص بحاوية موجودة (أي عنصر يمكنه احتواء نص أو عناصر أخرى) في صفحة بالمحتوى الذي تحدده. يمكن أن يتضمن المحتوى أي تعليمة برمجية مصدر لـ HTML صالحة.

يمكنك تضمين أي استدعاء دالة JavaScript صالح أو خاصية أو متغير عام أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل الأقواس المعقوفة ({}). لعرض قوس معقوف، اسبقه بخط مائل عكسي (\{).

مثال:

رابط URL لهذه الصفحة هو {window.location}، واليوم هو {new Date()}.

حدد كائناً واختر Set Text > Set Text Of Container من قائمة Add Behavior في لوحة Behaviors.
في مربع الحوار Set Text Of Container، استخدم قائمة Container لتحديد العنصر المطلوب.
أدخل نصًا جديدًا أو HTML في المربع New HTML.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق سلوك Set Text Of Status Bar

سلوك Set Text Of Status Bar يعرض رسالة في شريط الحالة في الزاوية السفلى اليسرى من نافذة المتصفح. على سبيل المثال، يمكنك استخدام هذا السلوك لوصف وجهة رابط في شريط الحالة بدلاً من إظهار عنوان URL المرتبط به.غالباً ما يتجاهل الزوار أو يغفلون الرسائل في شريط الحالة (وليست كل المتصفحات توفر دعماً كاملاً لضبط نص شريط الحالة)؛ إذا كانت رسالتك مهمة، فكر في عرضها كرسالة منبثقة أو كنص لعنصر AP.

ملاحظة

إذا كنت تستخدم سلوك Set Text Of Status Bar في Dreamweaver، فإن نص شريط الحالة في المتصفح لا يُضمن تغييره لأن بعض المتصفحات تتطلب تعديلات خاصة عند تغيير نص شريط الحالة. Firefox، على سبيل المثال، يتطلب تغيير خيار متقدم يسمح لـ JavaScript بتغيير نص شريط الحالة. لمزيد من المعلومات، راجع وثائق المستعرض الخاص بك.

يمكنك تضمين أي استدعاء دالة JavaScript صالح أو خاصية أو متغير عام أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل الأقواس المعقوفة ({}). لعرض قوس معقوف، اسبقه بشرطة مائلة عكسية (\{).

مثال:

عنوان URL لهذه الصفحة هو {window.location}، واليوم هو {new Date()}.

حدد كائناً واختر Set Text > Set Text Of Status Bar من قائمة Add Behavior في لوحة Behaviors.
في مربع الحوار Set Text Of Status Bar، اكتب رسالتك في مربع Message.

اجعل الرسالة مختصرة. يقطع المتصفح الرسالة إذا لم تتسع في شريط الحالة.

انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق سلوك Set Text Of Text Field

سلوك Set Text Of Text Field يستبدل محتوى حقل نص النموذج بالمحتوى الذي تحدده.

يمكنك تضمين أي استدعاء دالة JavaScript صالح أو خاصية أو متغير عام أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل الأقواس المعقوفة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

رابط URL لهذه الصفحة هو {window.location}، واليوم هو {new Date()}.

إنشاء حقل نص مسمى

حدد إدراج > نموذج > حقل نص.

إذا طلب منك Dreamweaver إضافة علامة نموذج، انقر على نعم.

في مفتش Property، اكتب اسمًا لحقل النص. تأكد من أن الاسم فريد في الصفحة (لا تستخدم نفس الاسم لعناصر متعددة في نفس الصفحة، حتى لو كانت في نماذج مختلفة).

تطبيق Set Text Of Text Field

حدد حقل نص واختر تعيين النص > تعيين نص الحقل من قائمة إضافة السلوك في لوحة السلوكيات.
حدد حقل النص المطلوب من قائمة حقل النص وأدخل النص الجديد.
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Show-Hide Elements

يُظهر سلوك إظهار-إخفاء العناصر، أو يُخفي، أو يستعيد حالة الظهور الافتراضية لعنصر واحد أو أكثر من عناصر الصفحة.هذا السلوك مفيد لعرض المعلومات بينما يتفاعل المستخدم مع الصفحة. على سبيل المثال، عندما يحرك المستخدم المؤشر فوق صورة نبتة، يمكنك إظهار عنصر صفحة يعطي تفاصيل حول موسم النمو ومنطقة النبتة، وكمية الشمس التي تحتاجها، والحجم الذي يمكن أن تنمو إليه، وهكذا. السلوك يُظهر أو يُخفي فقط العنصر ذا الصلة—لا يزيل في الواقع العنصر من تدفق الصفحة عندما يكون مخفياً.

حدد كائناً واختر إظهار-إخفاء العناصر من قائمة إضافة السلوك في لوحة السلوكيات.

إذا كان إظهار-إخفاء العناصر غير متاح، فربما تكون قد حددت عنصر AP. لأن عناصر AP لا تقبل الأحداث في متصفحات 4.0، يجب أن تحدد كائناً مختلفاً—مثل علامة <body> أو رابط بعلامة (<a>).

من قائمة العناصر، حدد العنصر الذي تريد إظهاره أو إخفاؤه وانقر على إظهار، أو إخفاء، أو استعادة (والتي تستعيد الرؤية الافتراضية).
كرر الخطوة 2 لجميع العناصر المتبقية التي تريد تغيير رؤيتها. (يمكنك تغيير رؤية عناصر متعددة بسلوك واحد.)
انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تم إيقاف هذا السلوك اعتباراً من Dreamweaver CS5.

تطبيق السلوك Swap Image

سلوك تبديل الصورة يبدل صورة بأخرى عن طريق تغيير خاصية src لعلامة <img>. استخدم هذا السلوك لإنشاء تبديلات الأزرار وتأثيرات الصور الأخرى (بما في ذلك تبديل أكثر من صورة واحدة في الوقت نفسه). إدراج صورة تبديل يضيف تلقائياً سلوك تبديل الصورة إلى صفحتك.

ملاحظة

لأن خاصية src فقط تتأثر بهذا السلوك، يجب أن تستبدلها بصورة ذات الأبعاد نفسها (الارتفاع والعرض) مثل الصورة الأصلية.وإلا، فإن الصورة التي تبدلها ستتقلص أو تتمدد لتناسب أبعاد الصورة الأصلية.

هناك أيضاً سلوك استعادة تبديل الصورة، الذي يستعيد آخر مجموعة من الصور المبدلة إلى ملفات المصدر السابقة. هذا السلوك يُضاف تلقائياً كلما ألحقت سلوك تبديل الصورة بكائن؛ إذا تركت خيار الاستعادة محدداً أثناء إلحاق تبديل الصورة، فلن تحتاج أبداً إلى اختيار سلوك استعادة تبديل الصورة يدوياً.

حدد إدراج > صورة أو انقر على زر الصورة في لوحة الإدراج لإدراج صورة.
في مفتش الخصائص، أدخل اسماً للصورة في مربع النص الأيسر.

ليس من الإلزامي تسمية الصور؛ حيث يتم تسميتها تلقائيًا عند ربط السلوك بكائن.ومع ذلك، يصبح الأمر أسهل لتمييز الصور في مربع الحوار استبدال الصورة إذا قمت بتسمية جميع الصور مسبقًا.

كرر الخطوتين 1و2 لإدراج صور إضافية.
حدد كائنًا (عادةً الصورة التي ستقوم باستبدالها) واختر استبدال الصورة من قائمة إضافة سلوك في لوحة السلوكيات.
من قائمة الصور، حدد الصورة التي تريد تغيير المصدر الخاص بها.
انقر فوق استعراض لتحديد ملف الصورة الجديدة، أو أدخل المسار واسم الملف الخاص بالصورة الجديدة في مربع تعيين المصدر إلى.
كرر الخطوتين 5 و6 لأي صور إضافية تريد تغييرها.استخدم نفس إجراء استبدال الصورة لجميع الصور التي تريد تغييرها مرة واحدة؛ وإلا فإن إجراء استعادة استبدال الصورة المقابل لن يستعيدها جميعًا.
حدد خيار التحميل المسبق للصور لتخزين الصور الجديدة مؤقتًا عند تحميل الصفحة.

يمنع هذا تأخير التنزيل عندما يحين وقت ظهور الصور.

انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Validate Form

يتحقق سلوك التحقق من صحة النموذج من محتويات حقول النص المحددة للتأكد من أن المستخدم أدخل النوع الصحيح من البيانات.اربط هذا السلوك بحقول النص الفردية مع حدث onBlur للتحقق من صحة الحقول أثناء قيام المستخدم بملء النموذج، أو اربطه بالنموذج مع حدث onSubmit لتقييم عدة حقول نص مرة واحدة عندما ينقر المستخدم على زر إرسال.ربط هذا السلوك بنموذج يمنع إرسال النماذج التي تحتوي على بيانات غير صحيحة.

حدد إدراج > نموذج أو انقر على زر النموذج في لوحة الإدراج لإدراج نموذج.
حدد إدراج > نموذج > حقل النص أو انقر على زر حقل النص في لوحة الإدراج لإدراج حقل نص.

كرر هذه الخطوة لإدراج حقول نص إضافية.

اختر طريقة التدقيق:
  • للتحقق من صحة الحقول الفردية أثناء قيام المستخدم بملء النموذج، حدد حقل نص واختر نافذة > سلوكيات.

  • للتحقق من صحة حقول متعددة عندما يُرسل المستخدم النموذج، انقر على علامة <form> في محدد العلامة في الزاوية السفلى اليسرى من نافذة المستند واختر نافذة > سلوكيات.

حدد Validate Form من القائمة Add Behavior.
قم بأحد الإجراءات التالية:
  • إذا كنت تتحقق من صحة حقول فردية، حدد نفس الحقل الذي حددته في نافذة المستند من قائمة الحقول.

  • إذا كنت تتحقق من صحة حقول متعددة، حدد حقل نص من قائمة الحقول.

حدد خيار مطلوب إذا كان الحقل يجب أن يحتوي على بعض البيانات.
حدد أحد خيارات Accept التالية:

Use Anything

يتحقق من أن الحقل المطلوب يحتوي على بيانات؛ يمكن أن تكون البيانات من أي نوع.

Use E‑mail address

يتحقق أن الحقل يحتوي على الأيقونة @.

Use Number

يتحقق أن الحقل يحتوي على أرقام فقط.

Use Number From

يتحقق من أن الحقل يحتوي على رقم في نطاق محدد.

إذا اخترت التحقق من صحة حقول متعددة، كرر الخطوتين 6 و7 لأي حقول إضافية تريد التحقق من صحتها.
انقر فوق OK.

إذا كنت تتحقق من صحة حقول متعددة عندما يُرسل المستخدم النموذج، يظهر حدث onSubmit تلقائيًا في قائمة الأحداث.

إذا كنت تتحقق من صحة حقول فردية، تحقق من أن الحدث الافتراضي هو onBlur أو onChange.وإلا، فحدد واحدًا من تلك الأحداث.

يؤدي كلا الحدثين إلى تشغيل سلوك التحقق من صحة النموذج عندما ينتقل المستخدم بعيدًا عن الحقل.الفرق هو أن onBlur يحدث سواء كتب المستخدم في الحقل أم لا، وonChange يحدث فقط إذا غيّر المستخدم محتويات الحقل.حدث onBlur مُفضل إذا كان الحقل مطلوبًا.