مثال للوحة عائمة بسيطة

بحث

تاريخ آخر تحديث 6 مايو 2021

في هذا المثال، يمكنك إنشاء ملحق Script Editor في Dreamweaver يقوم بإنشاء لوحة عائمة لعرض تعليمات JavaScript البرمجية التي تقوم بتسطير علامة برنامج نصي محددة في طريقة عرض Design. يعرض Script Editor التعليمات البرمجية بلغة JavaScript في عنصر textarea الخاص بنموذج HTML المحدد في اللوحة العائمة التي تسمى scriptlayer. وفي حالة إجراء تغييرات على التعليمات البرمجية المحددة في اللوحة العائمة، يستدعي الملحق دالة updateScript() لحفظ تغييراتك. وفي حالة عدم تحديد علامة برنامج نصي عند استدعاء Script Editor، يعرض الملحق (no script selected) في لوحة عائمة تسمى blanklayer.

يمكنك إنشاء هذا الملحق من خلال إنشاء لوحات عائمة، وكتابة التعليمات البرمجية بلغة JavaScript وإنشاء عنصر قائمة.

إنشاء اللوحات العائمة

تحتوي بداية ملف HTML لهذا الملحق على معلومات رأس المستند القياسية، وتضع علامة title كلمات Script Editor في شريط عناوين اللوحات العائمة.

إنشاء رأس ملف HTML

قم بإنشاء مستند فارغ جديد.

أدخل ما يلي:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

يعرف الملحق لوحتين عائمتين تعرضان إما (no script selected) في حالة عدم تحديد المستخدم لعلامة برنامج نصي أو التعليمات البرمجية بلغة JavaScript التي تسطر علامة برنامج نصي محدد. تعرف التعليمات البرمجية التالية هاتين اللوحتين العائمتين، أو عناصر (AP) الموضوعة بشكل مطلق، التي تسمى blanklayer وscriptlayer:

إنشاء اللوحتين العائمتين

أضف التعليمات البرمجية التالية بعد الرأس في ملف HTML:

 <body> 
<div id="blanklayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: hidden"> 
<center> 
<br> 
<br> 
<br> 
<br> 
<br> 
(no script selected) 
</center> 
</div> 
 
<div id="scriptlayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: visible"> 
<form name="theForm"> 
<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ 
onBlur="updateScript()"></textarea> 
</form> 
</div> 
 
</body> 
</html>

احفظ الملف باسم scriptEditor.htm في مجلد Configuration/Floaters.

كلا div العلامتين تستخدم سمة style لتحديد الموضع (absolute)، والحجم (width:422px وheight:181px)، وإعداد الوضوح الافتراضي (visible) لكلا اللوحتين العائمتين. تستخدم اللوحة blanklayer سمة center وسلسلة من علامات الفصل (br) لتحديد موضع النص في مركز اللوحة. تنشئ لوحة scriptlayer نموذجًا داخل textarea واحدة لعرض التعليمات البرمجية بلغة JavaScript المحددة. تحدد العلامة textarea أيضًا أنه عند حدوث الحدث onBlur، والذي يشير إلى أن التعليمات البرمجية المحددة قد تغيرت، يتم استدعاء الدالة updateScript() لكتابة النص الذي تغير مرة أخرى للمستند.

كتابة التعليمات البرمجية بلغة JavaScript

تتكون التعليمات البرمجية بلغة JavaScript لـ Script Editor من دالة اللوحة العائمة التي يستدعيها Dreamweaver calls، وهي selectionchanged()، ودالة واحدة معرفة من قبل المستخدم، وهي updateScript().

selectionChanged(): هل تم تحديد علامة برنامج نصي؟

تحدد الدالة selectionChanged() هل تم تحديد علامة برنامج نصي أم لا في طريقة عرض Design. تظهر علامة البرنامج النصي في طريقة عرض Design في حالة وجود روتين JavaScript في قسم النص في المستند وإذا تم تحديد Scripts في قسم Invisible Elements في مربع حوار Preferences dialog box. يعرض الشكل التالي أيقونة علامة برنامج نصي:

تستدعي دالة selectionChanged() في البداية الدالة dw.getDocumentDOM() للحصول على نموذج كائن المستند (DOM) لمستند المستخدم. ثم تستدعي الدالة getSelectedNode() لمعرفة ما إذا كانت العقدة المحددة للعنصر هي أولاً عبارة عن عنصر وثانيًا عبارة عن علامة SCRIPT. وإذا كان كلا الحالتين صحيح، تجعل الدالة selectionChanged() اللوحة العائمة scripteditor مرئية وتقوم بتحميلها من خلال التعليمات البرمجية المسطرة بلغة JavaScript. كما تقوم أيضًا بتعيين خاصية visibility الخاصة باللوحة العائمة blanklayer للقيمة hidden. يعرض الشكل التالي اللوحة العائمة scriptlayer مع التعليمات البرمجية بلغة JavaScript:

إذا لم تكن العقدة المحددة عنصرًا، أو لم تكن علامة script، تجعل الدالة selectionChanged() اللوحة العائمة blanklayer مرئية وتقوم بإخفاء لوحة scriptlayer. تعرض اللوحة العائمة blanklayer النص (no script selected)، كما هو مبين في الشكل التالي:

إضافة الدالة selectionChanged()

افتح الملف scriptEditor.htm الموجود في مجلد Configuration/Floaters.

أدخل التعليمات البرمجية التالية في قسم الرأس في الملف.

 function selectionChanged(){ 
    /* get the selected node */ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
     
    /* check to see if the node is a script marker */ 
    if (theNode.nodeType == Node.ELEMENT_NODE && ¬ 
    theNode.tagName == "SCRIPT"){ 
        document.layers['scriptlayer'].visibility = 'visible'; 
        document.layers['scriptlayer'].document.theForm.¬ 
        scriptCode.value = theNode.innerHTML; 
        document.layers['blanklayer'].visibility = 'hidden'; 
    }else{ 
        document.layers['scriptlayer'].visibility = 'hidden'; 
        document.layers['blanklayer'].visibility = 'visible'; 
    } 
}

احفظ الملف.

updateScript(): أعد كتابة التغييرات

تعيد الدالة updateScript() كتابة البرنامج النصي المحدد عندما يحدث حدث onBlur في textarea في لوحة scriptlayer. يحتوي عنصر النموذج textarea على التعليمات البرمجية بلغة JavaScript، ويحدث حدث onBlur عندما تفقد textarea التركيز على الإدخال.

افتح ملف scriptEditor.htm الموجود في مجلد Configuration/Floaters.

أدخل التعليمات البرمجية التالية في قسم الرأس في الملف.

 /* update the document with any changes made by 
    the user in the textarea */ 
 
    function updateScript(){ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
    theNode.innerHTML = document.layers['scriptlayer'].document.¬ 
    theForm.scriptCode.value; 
} 
 
</script> 
</head>

احفظ الملف.

إنشاء عنصر قائمة

ليس من الكافي حفظ تعليمات Script Editor البرمجية في مجلد Configuration/Floaters. ويجب عليك إما استدعاء الدالة dw.setFloaterVisibility('scriptEditor',true) أو الدالة dw.toggleFloater('scriptEditor') لتحميل اللوحة العائمة وجعلها مرئية. والمكان الأكثر وضوحًا لاستدعاء Script Editor هو من قائمة Window، التي تم تعريفها في ملف menus.xml. وأنت بحاجة لإنشاء العلامة menuitem التي تنشئ إدخالاً لملحق Script Editor في قائمة Window، كما هو موضح في الشكل التالي:

في حالة تحديد علامة برنامج نصي في طريقة عرض Design للمستند الحالي وتحديد عنصر قائمة Script Editor، فسيستدعي Dreamweaver لوحة Script Editor العائمة وسيعرض التعليمات البرمجية بلغة JavaScript التي تسطر علامة البرنامج النصي. وفي حالة تحديد عنصر قائمة عند عدم تحديد علامة برنامج نصي، يعرض Dreamweaver اللوحة blanklayer التي تحتوي على النص (no script selected).

افتح الملف menus.xml في مجلد Configuration/Menus.
حدد مكان الملف الذي يبدأ بـ <menuitem name="Tile _Vertically" وحدد موضع نقطة الإدراج بعد إغلاق /> للعلامة.

وعلى سطر جديد، قم بإدراج ما يلي:

 <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

احفظ الملف.

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

مستخدم جديد؟