0

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

さて、問題は、このフレームは一度しか使用できないということです。もう一度使用すると、IDが繰り返され、すべてのフレームが影響を受けます!!! これは起こらないはずです。解決策は何ですか？

4

2 に答える 2

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()各フレームをループし、ツリートラバーサルメソッドを使用することで、現在ループ内にある.find()特定のクラス内で一致するクラスを持つ要素を取得でき<div>ます。

于 2010-08-20T11:43:25.903 に答える
0

CSS を使用して div#frame のサイズを変更し、ヘッダー画像を背景として設定して上部に配置し、繰り返し、背景画像の代わりに CSS ボーダーを使用してみませんか? 'frame' を ID ではなくクラスとして変更すると、必要に応じて再利用できます。

于 2010-08-20T11:53:23.863 に答える