JavaScript Bible, Gold Edition part 211 pdf

Layer zIndex: Layer above: Layer below: Control Original Middle Layer: Layer zIndex: Layer above: Layer below: Control Original Top Layer: Layer zIndex: Layer above: Layer belo

Trang 1

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>

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>

<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>

<FORM>

Control Original Bottom Layer:<BR>

document.layerObject.zIndex

Trang 2

<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>

<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>

SIZE=13></TD></TR>

</TABLE></FORM>

</LAYER>

<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>

SIZE=13></TD></TR>

</TABLE>

</FORM>

</LAYER>

<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>

<P><B>Original Top Layer</B></P>

</LAYER>

</BODY>

</HTML>

document.layerObject.zIndex

Trang 3

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.leftvalue) 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>

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>

<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>

document.layerObject.load()

Trang 4

<P><B>Text loaded in original document.</B></P>

</LAYER>

</BODY>

</HTML>

moveAbove(layerObject)

moveBelow(layerObject)

Example

You can see the layerObject.moveAbove()method at work in Listing 31-1.

moveBy(deltaX,deltaY)

moveTo(x,y)

moveToAbsolute(x,y)

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 mouseMoveevent; 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 mouseMoveevents 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()

Trang 5

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 onMouseDownevent 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

mouseStillDownevent (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 mouseDownevent 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 (mouseDownevents 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 mouseMoveevent location on the page When the user releases the mouse button, the mouseUpevent 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>

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()

Trang 6

<B>Dragging a Layer</B>

<HR>

<P><B>Drag me around the window.</B></P>

</LAYER>

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)

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()

Trang 7

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.widthas 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 onLoadevent 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 mouseOverevents 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>

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 }

}

Trang 8

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>

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>

if (navigator.userAgent.indexOf(“Mac”) != -1) {

document.write(“(Mac users: Ctrl-Click me first; then Click to stop

dragging.)”)

}

</SCRIPT>

</BODY>

</HTML>

Trang 9

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

Example

Use The Evaluator (Chapter 13) to test the value of the constructorproperty 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()

Trang 10

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

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()

Định dạng
Số trang	10
Dung lượng	91,89 KB