Can we create any general HTML Component?_问答_开发者

Can we create any general HTML Component?

开发者 https://www.devze.com 2023-01-12 22:25 出处：网络

I have an HTML page. I have created a frame using background repeat function. It is like a dialog box as below :

Can we create any general HTML Component?

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});
  开发者_JAVA技巧      $('#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?

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.

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.