Можем ли мы создать какой-либо общий компонент HTML? - PullRequest
Новая
       4

Можем ли мы создать какой-либо общий компонент HTML?

0 голосов
/ 20 августа 2010

У меня есть 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;
}

Теперь проблема в том, что этот кадр я могу использовать только один раз.Если я использую еще раз, то идентификаторы будут повторяться и все кадры будут затронуты !!!Этого не должно быть.Какое может быть решение?

Ответы [ 2 ]

1 голос
/ 20 августа 2010

Вместо использования идентификаторов используйте классы, которые у вас уже есть, и просто просматривайте каждый кадр независимо, например: 

$(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});
  });
});

Просто удалите все идентификаторы и измените оболочку на <div class="frame">, чтобы эта работа,С помощью .each() для циклического прохождения каждого кадра и использования методов обхода дерева подобно .find() вы можете получить элементы с соответствующими классами внутри конкретного <div> Вы в настоящее время в цикле.

0 голосов
/ 20 августа 2010

Почему бы не использовать CSS для определения размера div # frame, установить изображение заголовка в качестве фона, расположенного сверху и повторяться, и использовать границы CSS вместо фоновых изображений? Измените 'frame' как класс, а не как ID, и вы можете использовать его по своему усмотрению.

...