Документ взят из кэша поисковой машины. Адрес
оригинального документа
: http://crydee.sai.msu.ru/~vab/html.doc/dhtml/dynhtml/layers38.htm
Дата изменения: Wed Aug 13 13:21:36 1997 Дата индексирования: Tue Oct 2 17:03:19 2012 Кодировка: Поисковые слова: agn |
The previous example, Chapter 12, "Expanding Colored Squares Example," illustrates how to expand and contract the clipping region of a layer without changing the wrapping width of the layer.
This example illustrates how to capture mouse events so that the user can make a layer's wrapping width wider or narrower by dragging the mouse.
This example illustrates:
load()
function
The sections in this chapter are:
When the page loads, you'll see a a blue layer containing a block of text. You can change the wrapping width of the layer by moving the mouse into the layer, pressing the mouse button down, and moving the mouse to the left or right. The wrapping width of the layer increases when you move the mouse to the right, and decreases when you move the mouse to the left. When you release the mouse button, the layer stops tracking mouse events and no longer changes in accordance with the mouse.
To run the <LAYER>
version of the example see:
wrapping.htm
For the style sheet version of this example see:wrapcss.htm
The definition for the block of content is very simple. It sets the left position, sets the background color, sets the initial wrapping width, and specifies the source for the layer:
<LAYER NAME="layer1" LEFT=100
WIDTH=300 BGCOLOR="#99bbFF"
SRC="mytext.htm" >
</LAYER>
</BODY>
The first thing the script does is to define some variables that it needs. These include layerWidth
, which is the initial width of the layer; oldX
which keeps track of the previous x position of the mouse when it is dragged inside the layer; and layer1
, which is the layer itself.
var layerWidth = 300;
var oldX;
var layer1 = document.layer1;
Next, the script specifies which events layer1 needs to capture:
layer1.document.captureEvents(
Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
Then it specifies that when the mouse is pressed down inside layer1
, the begindrag()
function is called, and when the mouse button is released (let up) inside layer1, the enddrag()
function is called. (These functions will be defined shortly.)
layer1.document.onmousedown=begindrag;
layer1.document.onmouseup=enddrag;
The script specifies that after layer1
has loaded, the resetcapture()
function is invoked.
layer1.onLoad=resetcapture;
Next comes the definition of the resetcapture()
function, which basically restates which events the layer needs to capture:
function resetcapture() {
layer1.document.captureEvents(
Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG|Event.MOUSEMOVE);
}
When you press the mouse down in the layer, the layer's onMouseDown
event handler is called, which in this case is the begindrag()
function. The begindrag()
function sets the layer's onMouseMove
handler to drag
, so that when you move the mouse while the button is pressed down, the drag()
function is invoked. When you release the mouse button, the layer's onMouseUp
event handler is invoked, which in this case is the enddrag()
function.
When an event occurs, an event object is created to represent the event. This event object has a PageX
variable, which indicates the x position in the page where the event occurred.
The begindrag()
function tells the layer that it needs to capture mouse-move events. It sets the onmousemove
handler to drag
so that the drag()
function will be invoked when the mouse is moved. Then it gets the x position of the mouse-down event and stores it in the oldX
global variable.
function begindrag(e) {
layer1.document.captureEvents(Event.MOUSEMOVE);
layer1.document.onmousemove=drag;
oldX=e.pageX;
return false;
}
The drag()
function calls the changeWidth()
function, which changes the wrapping width of layer1
by the distance that the mouse moved since the drag function was last called, or if applicable since the begindrag()
function was called. This distance is calculated by subtracting the x value of the previous event (stored in oldX
) from the pageX
value of the current event. Finally the drag()
function updates the value stored in oldX
.
function drag(e) {
changeWidth(layer1, e.pageX - oldX);
oldX = e.pageX;
return false;
}
The only way to change the wrapping width of a layer is to reload the contents of the layer using the load()
function. This function takes two arguments: the file to use as the content of the layer, and the new wrapping width of the layer.
The changeWidth()
function increases the value of the layerWidth
global variable by the amount that the mouse moved. If the distance that the mouse moved is not zero, the function calls the load()
method on the layer to load the file "mytext.htm"
and also to change the layer's wrapping width to the new layer width. Since the same file is loaded over and over, in effect the content does not seem to change, but the wrapping width constantly changes so that the content wraps neatly at the right edge of the layer.
function changeWidth(layer, delta)
{
layerWidth = layerWidth + delta;
if (delta != 0)
layer.load("mytext.htm", layerWidth);
}
When you use load()
to change the wrapping width, the value of clip.right
automatically changes to show the full wrapping width, so long as you have not changed the value of clip.right
from its default initial value. If you have specifically set the value of clip.right
, then the right edge of the clipping region will not change, even if the wrapping width changes.
When you release the mouse, the enddrag()
function is called. The only thing this function does is set the layer's onMouseMove
handler to 0, and release the mouse-move event. If the mouse-move event was not released, the layer would continue tracking all mouse move events.
function enddrag(e) {
layer1.document.onmousemove=0;
layer1.document.releaseEvents(Event.MOUSEMOVE);
return false;
}
Last Updated: 08/07/97 15:21:59