层的嵌套(Nesting Layers)

嵌套指把几个层组合成为统一的元素. 换句话说, 嵌套层就是"层中包含层"

也就是child层被安置到parent层. 如果parent层使用了clip, 那么child层看上去象显示在一个窗口中或者说被插入了. 超过parent层的边框的child层部分是不可见的. 注意虽然不可见,但是这部分在现实中是存在的.



当你需要对元素进行复杂的处置, 对层进行嵌套能使问题简单化. 一旦所有的child层被关联到parent 层, 他们就被永久"锁定"在那里. 如果你移动parent层, 所有的child层将跟随着一起移动. 同样适用于sliding 动画 -- 所有的child 层将一起滑动.

嵌套层的javascript在Netscape和IE里写法完全不同. 不得不承认染层的嵌套在两个browser里显示都正常是一件痛苦的事 -- 这也是为什么我们没有常常在web上见到嵌套. 无论如何, 我已经找到一些非常好的技巧来解决这些问题. 我担保一旦你学会使用它, 你会发现它是如此的有用, 以至与你希望在任何地方都使用到他.

样式表和嵌套

嵌套层, 你所要做的就是用 parent DIV包围child DIV:

    

    
    

    

很明显我没有在DIV标签里使用样式表. 主要是因为在层的嵌套中,Netscape不支持"inline"样式表. Netscape似乎只支持单个层的嵌套. 如果你嵌入更多的层,它就全部忽略.因而, 从现在起所有的样式定义为STYLE 标签. 请看下列:

除了把它从DIV标签中分离出来, CSS写法基本上还是一样的.

    

    
    

    

例子: www.dansteinman.com/dynduo/examples/nesting1.html

注意我还使用了clip来定义矩形. 多数情况下, 使用层的嵌套的配套使用clip和赋背景色.

javascript 和嵌套

Netscapts和IE在使用javascript实现嵌套, 使用完全不同的方法. 层与层之间是否叠加在IE里没有区别, 你可以象从前一样定义它的属性.

childLayer.style.properyName

但是在Netscape 中, 你必须说明child 层和parent层的关系

document.parentLayer.document.childLayer.propertyName

由于Netscape把层视为独立文件, 所以要在层的名字前另外做说明 -- child层属于parent层的一部分.

你可以无限制的包含层, 只要把child层的标签包裹在DIV中间. 下面的例子就是把child2Div嵌套在child2Div中间.

    

    
    

    
    

    

加入child2Div属性, 你需要写成:

document.parent1Div.document.child1Div.document.child2Div.propertyName


所有的概念将被整合到指针变量中去. 以下是用指针变量定义的例子:

function init() {
    if (ns4) {
        parent1 = document.parent1Div
        child1 = document.parent1Div.document.child1Div
        child2 = document.parent1Div.document.child2Div
    }
    if (ie4) {
        parent1 = parent1Div.style
        child1 = child1Div.style
        child2 = child2Div.style
    }
}


现在转入下一个问题...

重温CSS属性

我曾经因为Internet Explorer 的一些专有属性觉得非常困惑. 当你使用STYLE 标签定义样式属性的时候, IE不读取任何初始化属性. 因此在IE中检测层parentl的当前位置, r如果这样写:

alert(parent1.left)

你会发现没有得到任何返回值. 包括所有的CSS属性(left, top,width,height, visibility etc.).

范例: www.dansteinman.com/dynduo/examples/nesting2.html
-- 检测层的位置. 在Netscape中一切正常, 但是IE的alerts什么都不显示.

我到现在也不明白为什么微软要把IE做成这样. 问题只出现在当你使用STYLE 标签的时候, 而且只涉及初始值. 一旦你开始在javascript中改变属性, 你就能成功的获得他们.

这一点对我们有什么影响呢? 象我们先前做的(xpos 和 ypos)那样, 如果我们要改变它的属性我们必须使用不同的方法在IE中找到它的当前位置. 幸运的是, 我们在IE4中找到了微软加入的一些非标准的CSS 属性.

• offsetX
  
• offsetY
  
• offsetWidth
  
• offsetHeight
  

这些扩展属性不受IE4 STYLE 标签的问题干扰, 所以我们可以使用他们获得当前层的状态. 看我们的新的代码(增加了xpos 和 ypos):

function init() {
    if (ns4) {
        parent1 = document.parent1Div
        parent1.xpos = parent1.left
        parent1.ypos = parent1.top
        child1 = document.parent1Div.document.child1Div
        child1.xpos = child1.left
        child1.ypos = child1.top
        child2 = document.parent1Div.document.child2Div
        child2.xpos = child2.left
        child2.ypos = child2.top
    }
    if (ie4) {
        parent1 = parent1Div.style
        parent1.xpos = parent1.offsetX
        parent1.ypos = parent1.offsetY
        child1 = child1Div.style
        child1.xpos = child1.offsetX
        child1.ypos = child1.offsetY
        child2 = child2Div.style
        child2.xpos = child2.offsetX
        child2.ypos = child2.offsetY
    }
}

范例:http://www.dansteinman.com/dynduo/examples/nesting3.html
现在你可以象从前一样改变层的位置了.
范例二: 可移动的嵌套层.
www.dansteinman.com/dynduo/examples/nesting4.html


可见性和嵌套

还是那个问题, 如果你使用STYLE标签,在IE4中你将得不不到任何返回值. 按照我的经验来说, 获取层的可见属性超级重要. 通常, 你很容易的区分层的可见或者不可见. 记住只有初始受到影响.-- 一旦你在javascript中改变了初始值, 你将可以很轻松的获得它的值.

显示和隐藏嵌套的层和你想象中差不多. 一旦你定义了指针变量, 你就可以使用我曾经在 显示和隐藏层 的那个教程中的 show/hide functions.

不过还有一件事需要指出, 如果你没有给child层定义初始值, 那么它仍然具有继承性(inherited)(使用parent层相同的值.) 这种情况下, 无论你隐藏还是显示parent层, 所有的child层将表现的和parent层相同. 但是... 在Netscape中, 不管你的child层处于初始值,还是已经由javascript改变了, 都失去显示和隐藏child层的能力. 也就是说, 当你隐藏parent层了以后 , child层将永远可见

为避免这种情况发生, 你必须使用"visible" (Netscape是"show") 取代 "inherit(继承)" . 增加一个层的可视属性代替使用showObj().
mychild.visibility = "inherit"

把inherit放进去表示, 如果parent层显示, 那么child层也显示, 如果parent层隐藏, 那么child层也隐藏.



-------------------------------------------------------------
5DMedia版权所有, 转载请注明出处!