[ Pobierz całość w formacie PDF ]
.css.leftlayer1.css.toplayer1.css.visibilityetc.So all that's really changed is the extra css between everything.We can further extend the layerObj object by automatically defining x and y properties which will represent the left and top properties of the layer:function layerObj(id) {if (ns4) {this.css = document.layers[id]this.x = this.css.leftthis.y = this.css.top}else if (ie4) {this.css = document.all[id].stylethis.x = this.css.pixelLeftthis.y = this.css.pixelTop}}So again if we were to create a layer1 object:layer1 = new layerObj("layer1Div")The layer1 object would have these properties:layer1.csslayer1.xlayer1.yNote that we can now use x and y as our properties because this is our own object we're working with.I was using xpos and ypos before because Netscape already included those properties as part of it's own Layer object.Since we're creating a new object we can name the properties whatever we like.newobjects2.html shows an example using this object and allows you to check the values of the properties.Making MethodsWe can extend the functionality of the layerObj object to make it easy to manipulate layers just as we can create separate individual functions.Recall in the Moving Layers lesson I made a generic functions that can be used to move a layer to any position on the screen:function moveBy(obj,x,y) {obj.xpos += xobj.left = obj.xposobj.ypos += yobj.top = obj.ypos}function moveTo(obj,x,y) {obj.xpos = xobj.left = obj.xposobj.ypos = yobj.top = obj.ypos}Those functions translated into methods of the layerObj object look like this:function layerObj(id) {if (ns4) {this.css = document.layers[id]this.x = this.css.leftthis.y = this.css.top}else if (ie4) {this.css = document.all[id].stylethis.x = this.css.pixelLeftthis.y = this.css.pixelTop}this.moveBy = layerObjMoveBythis.moveTo = layerObjMoveTo}function layerObjMoveBy(x,y) {this.x += xthis.css.left = this.xthis.y += ythis.css.top = this.y}function layerObjMoveTo(x,y) {this.x = xthis.css.left = this.xthis.y = ythis.css.top = this.y}Again if we were to create a layer1 object:layer1 = new layerObj("layer1Div")We can then move the layer by using either the moveBy() or moveTo() methods:layer1.moveBy(-5,10)layer1.moveTo(100,100)etc.newobjects3.html shows and example using these methods.Where to go from hereThis tiny object would only be used in very specific instances where all you need to do is move the layer around in a simple manner.The way I've made this object doesn't account for nested layers, so if you need to use nested layers you'd have to change the code to include the extra parent layers.In The Dynamic Layer Object lesson I use these techniques create a unified cross-browser solution for working with layers and creating methods for animation.HomeNext Lesson:BrowserCheck Objectcopyright 1998 Dan Steinman
[ Pobierz całość w formacie PDF ]