דוגמה לחלונית צפה פשוטה

חפש

עודכן לאחרונה בתאריך May 20, 2021 01:17:35 PM GMT

בדוגמה זו, אתה יוצר הרחבת Script Editor שיוצרת חלונית צפה כדי להציג את קוד ה-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) ואת הגדרת ברירת המחדל של visibility ‏(visible) של החלוניות הצפות. החלונית blanklayer משתמשת בתכונה center ובסדרה של תגי מעבר (br) כדי למקם את הטקסט במרכז החלונית. החלונית scriptlayer יוצרת טופס עם textarea בודד להצגת קוד ה-JavaScript שנבחר. התג textarea מציין גם כי כאשר מתרחש אירוע onBlur, לרבות שינוי בקוד שנבחר, הפונקציה updateScript()‎ נקראת לכתוב מחדש במסמך את הטקסט שהשתנה.

כתוב את קוד ה-JavaScript

קוד ה-JavaScript של ה-Script Editor מכיל פונקציית חלונית צפה אחת ש-Dreamweaver קורא לה, selectionchanged()‎ ופונקציה אחת בהגדרת המשתמש, updateScript()‎‏.

selectionChanged()‎‏: האם נבחר סמן סקריפט?

הפונקציה selectionChanged()‎ קובעת אם נבחר סמן סקריפט בתצוגת Design. סמן סקריפט מופיע בתצוגת Design אם קיים הליך JavaScript במקטע גוף המסמך ואם נבחרה האפשרות Scripts במקטע Invisible Elements של תיבת הדו-שיח Preferences. האיור הבא מציג סמל של סמן סקריפט:

הפונקציה selectionChanged()‎ קוראת תחילה לפונקציה dw.getDocumentDOM()‎ כדי לקבל את Document Object Model (‏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')" />

שמור את הקובץ.

כניסה לחשבון

דוגמה לחלונית צפה פשוטה

יצירת החלוניות הצפות

כתוב את קוד ה-JavaScript

יצירת פריט תפריט

שאל את הקהילה

איך פונים אלינו