我们可以创建任何通用的 HTML 组件吗？
Posted
技术标签:
【中文标题】我们可以创建任何通用的 HTML 组件吗？【英文标题】：Can we create any general HTML Component? 【发布时间】：2011-04-01 14:56:09 【问题描述】：我有一个 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 会重复并且所有框架都会受到影响！这不应该发生。有什么解决办法？
【问题讨论】：
【参考方案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> 中获取具有匹配类的元素。
【讨论】：
我试过这个。但是，问题来了是框架的右侧没有被显示！它变成了一个开放的框架！【参考方案2】：为什么不使用 CSS 来调整 div#frame 的大小，将标题图像设置为位于顶部并重复的背景，并使用 css 边框代替背景图像？将“框架”更改为类而不是 ID，您可以随意重复使用。
【讨论】：
以上是关于我们可以创建任何通用的 HTML 组件吗？的主要内容，如果未能解决你的问题，请参考以下文章