JavaScript Bible, Gold Edition part 211 pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (91.89 KB, 10 trang )
CD-592
Part VI ✦ Appendixes
Listing 31-20 shows how to achieve the same action with IE5+ and NN6+ syntax.
Listing 31-9: Relationships Among zIndex, above, and below
<HTML>
<HEAD>
<TITLE>Layer zIndex</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function setZ(field) {
switch (field.name) {
case “top” :
document.top.zIndex = parseInt(field.value)
break
case “mid” :
document.middle.zIndex = parseInt(field.value)
break
case “bot” :
document.bottom.zIndex = parseInt(field.value)
}
showValues()
}
function showValues() {
document.layers[0].document.forms[0].bot.value = document.bottom.zIndex
document.layers[1].document.forms[0].mid.value = document.middle.zIndex
document.layers[2].document.forms[0].top.value = document.top.zIndex
document.layers[0].document.forms[0].above.value = (document.bottom.above) ?
document.bottom.above.name : “(none)”
document.layers[1].document.forms[0].above.value = (document.middle.above) ?
document.middle.above.name : “(none)”
document.layers[2].document.forms[0].above.value = (document.top.above) ?
document.top.above.name : “(none)”
document.layers[0].document.forms[0].below.value = (document.bottom.below) ?
document.bottom.below.name : “(none)”
document.layers[1].document.forms[0].below.value = (document.middle.below) ?
document.middle.below.name : “(none)”
document.layers[2].document.forms[0].below.value = (document.top.below) ?
document.top.below.name : “(none)”
}
</SCRIPT>
</HEAD>
<BODY onLoad=”showValues()”>
<B>Setting the <TT>layer.zIndex</TT> Property of Sibling Layers</B>
<HR>
Enter new zIndex values to see the effect on three layers.<P>
<LAYER TOP=90 WIDTH=240 BGCOLOR=”coral”>
<FORM>
Control Original Bottom Layer:<BR>
document.layerObject.zIndex
CD-593
Appendix F ✦ Examples from Parts III and IV
<TABLE>
<TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”bot” SIZE=3
onChange=”setZ(this)”></TD></TR>
<TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above”
SIZE=13></TD></TR>
<TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below”
SIZE=13></TD></TR>
</TABLE>
</FORM>
</LAYER>
<LAYER TOP=220 WIDTH=240 BGCOLOR=”aquamarine”>
<FORM>
Control Original Middle Layer:<BR>
<TABLE>
<TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”mid” SIZE=3
onChange=”setZ(this)”></TD></TR>
<TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above”
SIZE=13></TD></TR>
<TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below”
SIZE=13></TD></TR>
</TABLE></FORM>
</LAYER>
<LAYER TOP=350 WIDTH=240 BGCOLOR=”yellow”>
<FORM>
Control Original Top Layer:<BR>
<TABLE><TR><TD ALIGN=”right”>Layer zIndex:</TD><TD><INPUT TYPE=”text” NAME=”top”
SIZE=3 onChange=”setZ(this)”></TD></TR>
<TR><TD ALIGN=”right”>Layer above:</TD><TD><INPUT TYPE=”text” NAME=”above”
SIZE=13></TD></TR>
<TR><TD ALIGN=”right”>Layer below:</TD><TD><INPUT TYPE=”text” NAME=”below”
SIZE=13></TD></TR>
</TABLE>
</FORM>
</LAYER>
<LAYER NAME=”bottom” BGCOLOR=”coral” TOP=90 LEFT=260 WIDTH=300 HEIGHT=190>
<P><B>Original Bottom Layer</B></P>
</LAYER>
<LAYER NAME=”middle” BGCOLOR=”aquamarine” TOP=110 LEFT=280 WIDTH=300
HEIGHT=190>
<P><B>Original Middle Layer</B></P>
</LAYER>
<LAYER NAME=”top” BGCOLOR=”yellow” TOP=130 LEFT=300 WIDTH=300 HEIGHT=190>
<P><B>Original Top Layer</B></P>
</LAYER>
</LAYER>
</BODY>
</HTML>
document.layerObject.zIndex
CD-594
Part VI ✦ Appendixes
Methods
load(“URL”, newLayerWidth)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Example
Buttons in Listing 31-10 enable you to load short and long documents into a layer.
The first two buttons don’t change the width (in fact, the second parameter to
layerObject.load() is the layerObject.clip.left value). For the second two
buttons, a narrower width than the original is specified. Click the Restore button
frequently to return to a known state.
Listing 31-10: Loading Documents into Layers
<HTML>
<HEAD>
<TITLE>Layer Loading</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function loadDoc(URL,width) {
if (!width) {
width = document.myLayer.clip.width
}
document.myLayer.load(URL, width)
}
</SCRIPT>
</HEAD>
<BODY>
<B>Loading New Documents</B>
<HR>
<LAYER TOP=90 WIDTH=240 BGCOLOR=”yellow”>
<FORM>
Loading new documents:<BR>
<INPUT TYPE=”button” VALUE=”Small Doc/Existing Width”
onClick=”loadDoc(‘article1.htm’)”><BR>
<INPUT TYPE=”button” VALUE=”Large Doc/Existing Width”
onClick=”loadDoc(‘bofright.htm’)”><P>
<INPUT TYPE=”button” VALUE=”Small Doc/Narrower Width”
onClick=”loadDoc(‘article1.htm’,200)”><BR>
<INPUT TYPE=”button” VALUE=”Large Doc/Narrower Width”
onClick=”loadDoc(‘bofright.htm’,200)”><P>
<INPUT TYPE=”button” VALUE=”Restore” onClick=”location.reload()”></FORM>
document.layerObject.load()
CD-595
Appendix F ✦ Examples from Parts III and IV
</LAYER>
<LAYER NAME=”myLayer” BGCOLOR=”yellow” TOP=90 LEFT=300 WIDTH=300 HEIGHT=190>
<P><B>Text loaded in original document.</B></P>
</LAYER>
</BODY>
</HTML>
moveAbove(layerObject)
moveBelow(layerObject)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Example
You can see the layerObject.moveAbove() method at work in Listing 31-1.
moveBy(deltaX,deltaY)
moveTo(x,y)
moveToAbsolute(x,y)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Example
Listing 31-11 shows a demonstration of the layerObject.moveTo() method. It is a
simple script that enables you to click and drag a layer around the screen. The
script employs the coordinate values of the
mouseMove event; after compensating
for the offset within the layer at which the click occurs, the script moves the layer
to track the mouse action.
I want to present this example for an additional reason: to explain an important user
interface difference between Windows and Macintosh versions of NN4. In Windows
versions, you can click and hold the mouse button down on an object and let the
object receive all the
mouseMove events as you drag the cursor around the screen.
On the Macintosh, however, NN4 tries to compensate for the lack of a second mouse
document.layerObject.moveBy()
CD-596
Part VI ✦ Appendixes
button by popping up a context-sensitive menu at the cursor position when the user
holds the mouse button down for more than just a click. To prevent the pop-up
menu from appearing, the
engage() method invoked by the onMouseDown event
handler ends with
return false.
Notice in the following listing how the layer captures a number of mouse events.
Each one plays an important role in creating a mode that is essentially like a
mouseStillDown event (which doesn’t exist in NN4’s event model). The mouseDown
event sets a Boolean flag (engaged) indicating that the user clicked down in the
layer. At the same time, the script records how far away from the layer’s top-left
corner the
mouseDown event occurred. This offset information is needed so that any
setting of the layer’s location takes this offset into account (otherwise, the top-left
corner of the layer would jump to the cursor position and be dragged from there).
During the drag (
mouseDown events firing with each mouse movement), the
dragIt() function checks whether the drag mode is engaged. If so, the layer is
moved to the page location calculated by subtracting the original downstroke offset
from the
mouseMove event location on the page. When the user releases the mouse
button, the
mouseUp event turns off the drag mode Boolean value.
Listing 31-21 shows a version of this example for IE5+ and NN6.
Listing 31-11: Dragging a Layer
<HTML>
<HEAD>
<TITLE>Layer Dragging</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
var engaged = false
var offsetX = 0
var offsetY = 0
function dragIt(e) {
if (engaged) {
document.myLayer.moveTo(e.pageX - offsetX, e.pageY - offsetY)
}
}
function engage(e) {
engaged = true
offsetX = e.pageX - document.myLayer.left
offsetY = e.pageY - document.myLayer.top
return false
}
function release() {
engaged = false
}
</SCRIPT>
</HEAD>
<BODY>
document.layerObject.moveBy()
CD-597
Appendix F ✦ Examples from Parts III and IV
<B>Dragging a Layer</B>
<HR>
<LAYER NAME=”myLayer” BGCOLOR=”lightgreen” TOP=90 LEFT=100 WIDTH=300 HEIGHT=190>
<P><B>Drag me around the window.</B></P>
</LAYER>
<SCRIPT LANGUAGE=”JavaScript”>
document.myLayer.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE)
document.myLayer.onMouseDown = engage
document.myLayer.onMouseUp = release
document.myLayer.onMouseMove = dragIt
</SCRIPT>
</BODY>
</HTML>
resizeBy(deltaX,deltaY)
resizeTo(width,height)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Example
It is important to understand the ramifications of content flow when these two
methods resize a layer. Listing 31-12a (and the companion document Listing 31-12b)
shows you how to set the lower-right corner of a layer to be dragged by a user for
resizing the layer (much like grabbing the resize corner of a document window).
Three radio buttons enable you to choose whether and when the content should be
redrawn to the layer — never, after resizing, or during resizing.
Event capture is very much like that in Listing 31-11 for layer dragging. The primary
difference is that drag mode is engaged only when the mouse event takes place in
the region of the lower-right corner. A different kind of offset value is saved here
because, for resizing, the script needs to know the mouse event offset from the
right and bottom edges of the layer.
Condition statements in the
resizeIt() and release() functions verify whether a
specific radio button is checked to determine when (or if) the content should be
redrawn. I designed this page with the knowledge that its content might be
redrawn. Therefore, I built the content of the layer as a separate HTML document
that loads in the
<LAYER> tag.
document.layerObject.resizeBy()
CD-598
Part VI ✦ Appendixes
Redrawing the content requires reloading the document into the layer. I use the
layerObject.load() method because I want to send the current
layerObject.clip.width as a parameter for the width of the clip region to
accommodate the content as it loads.
An important point to know about reloading content into a layer is that all property
settings for the layer’s event capture are erased when the document loads.
Overcoming this behavior requires setting the layer’s
onLoad event handler to set
the layer’s event capture mechanism. If the layer event capturing is specified as part
of the statements at the end of the document, the layer ignores some important
events needed for the dynamic resizing after the document reloads the first time.
As you experiment with the different ways to resize and redraw, you see that
redrawing during resizing is a slow process because of the repetitive loading (from
cache) needed each time. On slower client machines, it is easy for the cursor to
outrun the layer region, causing the layer to not get
mouseOver events at all. It may
not be the best-looking solution, but I prefer to redraw after resizing the layer.
Listing 31-22 shows a version designed for the IE5+ and NN6 object models. Because
content automatically reflows in those browsers, you do not have to load the con-
tent of the positioned element from an external document.
Listing 31-12a: Resizing a Layer
<HTML>
<HEAD>
<TITLE>Layer Resizing</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
var engaged = false
var offsetX = 0
var offsetY = 0
function resizeIt(e) {
if (engaged) {
document.myLayer.resizeTo(e.pageX + offsetX, e.pageY + offsetY)
if (document.forms[0].redraw[2].checked) {
document.myLayer.load(“lst31-12b.htm”, document.myLayer.clip.width)
}
}
}
function engage(e) {
if (e.pageX > (document.myLayer.clip.right - 10) &&
e.pageY > (document.myLayer.clip.bottom - 10)) {
engaged = true
offsetX = document.myLayer.clip.right - e.pageX
offsetY = document.myLayer.clip.bottom - e.pageY
}
}
document.layerObject.resizeBy()
CD-599
Appendix F ✦ Examples from Parts III and IV
function release() {
if (engaged && document.forms[0].redraw[1].checked) {
document.myLayer.load(“lst31-12b.htm”, document.myLayer.clip.width)
}
engaged = false
}
function grabEvents() {
document.myLayer.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE)
}
</SCRIPT>
</HEAD>
<BODY>
<B>Resizing a Layer</B>
<HR>
<FORM>
Redraw layer content:<BR>
<INPUT TYPE=”radio” NAME=”redraw” CHECKED>Never
<INPUT TYPE=”radio” NAME=”redraw”>After resize
<INPUT TYPE=”radio” NAME=”redraw”>During resize
</FORM>
<LAYER NAME=”myLayer” SRC=”lst31-12b.htm” BGCOLOR=”lightblue” TOP=120 LEFT=100
WIDTH=300 HEIGHT=190 onLoad=”grabEvents()”>
</LAYER>
<SCRIPT LANGUAGE=”JavaScript”>
document.myLayer.onMouseDown = engage
document.myLayer.onMouseUp = release
document.myLayer.onMouseMove = resizeIt
</SCRIPT>
</BODY>
</HTML>
Listing 31-12b: Content for the Resizable Layer
<HTML>
<BODY>
<P><B>Resize me by dragging the lower-right corner.</B></P>
<SCRIPT LANGUAGE=”JavaScript”>
if (navigator.userAgent.indexOf(“Mac”) != -1) {
document.write(“(Mac users: Ctrl-Click me first; then Click to stop
dragging.)”)
}
</SCRIPT>
</BODY>
</HTML>
document.layerObject.resizeBy()
CD-600
Part VI ✦ Appendixes
Chapter 34 Examples
The following section contains examples from Chapter 34, “The String Object.”
String Object
Properties
constructor
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓✓✓
Example
Use The Evaluator (Chapter 13) to test the value of the constructor property.
Enter the following statements into the top text box:
a = new String(“abcd”)
a.constructor == String
a.constructor == Number
Parsing methods
string.charAt(index)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
Enter each of the following statements into the top text box of The Evaluator:
a = “banana daiquiri”
a.charAt(0)
stringObject.charAt()
CD-601
Appendix F ✦ Examples from Parts III and IV
a.charAt(5)
a.charAt(6)
a.charAt(20)
Results from each of the charAt() methods should be b, a (the third “a” in
“banana”), a space character, and an empty string, respectively.
string.charCodeAt([index])
String.fromCharCode(num1 [, num2 [,
numn]])
Returns: Integer code number for a character; concatenated string value of code
numbers supplied as parameters.
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓✓✓
Example
Listing 34-2 provides examples of both methods on one page. Moreover, because
one of the demonstrations relies on the automatic capture of selected text on the
page, the scripts include code to accommodate the different handling of selection
events and capture of the selected text in Navigator and Internet Explorer 4.
After you load the page, select part of the body text anywhere on the page. If you
start the selection with the lowercase letter “a,” the character code displays as 97.
If you select no text, the result is
NaN.
Try entering numeric values in the three fields at the bottom of the page. Values
below 32 are ASCII control characters that most fonts represent as hollow squares.
But try all other values to see what you get. Notice that the script passes all three
values as a group to the
String.fromCharCode() method, and the result is a com-
bined string.
stringObject.charCodeAt()
