
224
EXTENDING DREAMWEAVER CS4
Floating panels
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Script Editor</title>
<script language="JavaScript">
The extension defines two floating panels that display either (no script selected) if the user has not selected a
script marker or the JavaScript code that underlies a selected script marker. The following code defines these two
floating panels, or absolutely positioned (AP) elements, called
blanklayer and scriptlayer:
Create the two floating panels
1 Add the following code after the header in the HTML file:
<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>
2 Save the file as scriptEditor.htm in the Configuration/Floaters folder.
Both div tags use the style attribute to specify the position (absolute), size (width:422px and height:181px),
and default
visibility setting (visible) of the floating panels. The blanklayer panel uses the center attribute
and a series of break (
br) tags to position the text in the center of the panel. The scriptlayer panel creates a form
with a single
textarea to display the selected JavaScript code. The textarea tag also specifies that when an onBlur
event occurs, indicating that the selected code has changed, the
updateScript() function is called to write the
changed text back to the document.
Writing the JavaScript code
The JavaScript code for the Script Editor consists of one floating panel function that Dreamweaver calls,
selectionchanged(), and one user-defined function, updateScript().
Comentarios a estos manuales