0

我有一个 HTML 页面。我使用背景重复功能创建了一个框架。它就像一个对话框，如下所示：

替代文字

用于此的 HTML 代码是：

<html>
<head>
<title>
Frame
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="frame.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />
</script>
</head>
<body>
<div id="frame">
    <div id="h" style="width:400px" class="h">Frame</div>
    <div id="l" style="height:400px" class="l"></div>
    <div id="r" class="r"></div>
    <div id="b" class="b"></div>
</div>
</div>
</body>
</html>

jQuery是：

$(document).ready(function() {

        var width = $('#h').width();
        var height = $('#l').height();
        var pad = $('#h').position().left;
        var actWidth = width + pad;
        var nHeight = height - (height * 2);
        var rLeftMargin = actWidth + 1;
        var bWidth = actWidth + 2;

        $('#r').css({'margin-top':nHeight});
        $('#h').css({'height':25});
        $('#r').css({'margin-left':rLeftMargin});
        $('#r').css({'height':height});
        $('#b').css({'width':bWidth});
        $('#b').css({'margin-top':0});
    }
)

而CSS是：

.h{
background-image:url('images//line.jpg');
background-repeat: repeat-x;
padding-left:10px; 
color:white;
}
.l{
background-image:url('images//dot.jpg'); 
background-repeat: repeat-y; 
}
.r{
background-image:url('images//dot.jpg'); 
background-repeat: repeat-y; 
float:top;
}
.b{
background-image:url('images//dot.jpg'); 
background-repeat: repeat-x; 
height:1px;
}

现在，问题是，这个框架我只能使用一次。如果我再次使用 is，那么 Ids 会重复并且所有帧都会受到影响！！！这不应该发生。有什么解决办法？

4

2 回答 2

1

不要使用 ID，而是使用您已经拥有的类，并单独查看每个帧，如下所示：

$(function() {
  $(".frame").each(function() {
     var width = $(this).find('.h').width(),
         height = $(this).find('.l').height(),
         pad = $(this).find('.h').position().left,
         actWidth = width + pad,
         nHeight = height - (height * 2),
         rLeftMargin = actWidth + 1,
         bWidth = actWidth + 2;

    $(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
    $(this).find('.h').css({'height':25});
    $(this).find('.b').css({'width':bWidth, 'margin-top':0});
  });
});

只需删除所有 ID 并将包装器更改<div class="frame">为使其工作即可。通过遍历.each()每一帧并使用树遍历方法，就像您可以在您当前在循环中.find()的特定对象中获取具有匹配类的元素一样。<div>

于 2010-08-20T11:43:25.903 回答
0

为什么不使用 CSS 来调整 div#frame 的大小，将标题图像设置为位于顶部并重复的背景，并使用 css 边框而不是背景图像？将“框架”更改为类而不是 ID，您可以随意重复使用。

于 2010-08-20T11:53:23.863 回答