Can we create any general HTML Component?
Question
I have an HTML page. I have created a frame using background repeat function. It is like a dialog box as below :
The HTML Code for this is :
<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>
The jQuery is :
$(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});
}
)
And the CSS is :
.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;
}
Now, the problem is, this frame I can only use once. If I use is once again, then Ids get repeted & all the frame gets affected !!! This should not happen. What can be the solution?
2 answers
solution1
1 ACCPTED 2010-08-20 11:43:25
Instead of using IDs, use the classes you already have and just look over each frame independently, like this:
$(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});
});
});
Just remove all IDs and change the wrapper to <div class="frame"> to make this work. By .each() to loop through each frame and using tree traversal methods like .find() you can get the elements with the matching classes inside the particular <div> you're currently on in the loop.
solution2
0 2010-08-20 11:53:23
Why not use CSS to size div#frame, set the header image as a background positioned to the top and repeated and use css borders instead of background images? Change 'frame' as a class rather than an ID, and you can reuse as you wish.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.