Question

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

alt text

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

现在，问题是，这个框架我只能使用一次。如果我再次使用，那么Ids会被重复使用所有的框架都受到影响!!!这不应该发生。什么可以解决方案？

Answer 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()循环遍历每个框架并使用tree traversal methods .find()，您可以在循环中获取当前处于特定<div>内的匹配类的元素。

Answer 2

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

我们可以创建任何通用HTML组件吗？

2 个答案: