根据用户控制的可见性动态定位面板

发布于 2024-08-17 20:57:06 字数 619 浏览 4 评论 0原文

我有 4 个面板,顶部有一个清单,用于控制您要查看的面板。我将如何设置它,以便如果他们取消选中其中一个面板,则其余面板将重新定位。有点模糊,所以:

    ___   ___
   | 1 | | 2 |
   |___| |___|
    ___   ___
   | 3 | | 4 |
   |___| |___|

所以如果他们取消选中 2 和 3,我希望 4 位于 1 旁边

    ___   ___
   | 1 | | 4 |
   |___| |___|

,如果他们只取消选中 3,那么 4 将转到 3 的位置。这些面板也将在页面上居中,但如果未选中诸如 3 之类的内容,我希望第四个面板与第一个面板左对齐,而不是在它们之间居中。像这样:

    ___   ___
   | 1 | | 2 |
   |___| |___|
    ___
   | 4 |
   |___|

而不是这样:

    ___   ___
   | 1 | | 2 |
   |___| |___|
       ___
      | 4 |
      |___|

I've got 4 panels, and I have a checklist at the top which controls which panels you want to view. How would I set it up so that if they uncheck one of the panels, then the rest will reposition. A bit vague, so:

    ___   ___
   | 1 | | 2 |
   |___| |___|
    ___   ___
   | 3 | | 4 |
   |___| |___|

So if they uncheck 2 and 3, I would like 4 to be position next to 1

    ___   ___
   | 1 | | 4 |
   |___| |___|

And if they unchecked just 3, then 4 would go to the 3's position. These panels would also be centered on the page, but if the something like the 3 is unchecked, I want the fourth panel to be left aligned with the first panel, and not centered between them. So like this:

    ___   ___
   | 1 | | 2 |
   |___| |___|
    ___
   | 4 |
   |___|

And not this:

    ___   ___
   | 1 | | 2 |
   |___| |___|
       ___
      | 4 |
      |___|

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

习惯成性 2024-08-24 20:57:06

将 4 个面板(相同的固定尺寸)放置在一个固定容器内,该容器的宽度至少是每个面板宽度的两倍,但小于 3 倍。使面板浮动。示例如下:

CSS:

#panels {
    width: 400px;
}
.panel {
    float: left;
    width: 190px;
    height: 100px;
    border: solid 1px #f00;

}

JS:

$(function(){
    $("div input[type='checkbox']").attr('checked',true);
    $("div input[type='checkbox']").change(function() {
            if($(this).attr('checked'))
                $('#' + $(this).val()).show();
            else
                $('#' + $(this).val()).hide();
        }
    );
});

HTML:

<div>
<label for="p1"><input type="checkbox" value="panel1" />1</label>
<label for="p2"><input type="checkbox" value="panel2" />2</label>
<label for="p3"><input type="checkbox" value="panel3" />3</label>
<label for="p4"><input type="checkbox" value="panel4" />4</label>
</div>
<div id="panels">
<div class="panel" id="panel1">1</div>
<div class="panel" id="panel2">2</div>
<div class="panel" id="panel3">3</div>
<div class="panel" id="panel4">4</div>
</div>

Placing the 4 panels (same fixed size) within a fixed container which is at least twice the width of each panel but less than 3 times. Float the panel. Example as follows:

CSS:

#panels {
    width: 400px;
}
.panel {
    float: left;
    width: 190px;
    height: 100px;
    border: solid 1px #f00;

}

JS:

$(function(){
    $("div input[type='checkbox']").attr('checked',true);
    $("div input[type='checkbox']").change(function() {
            if($(this).attr('checked'))
                $('#' + $(this).val()).show();
            else
                $('#' + $(this).val()).hide();
        }
    );
});

HTML:

<div>
<label for="p1"><input type="checkbox" value="panel1" />1</label>
<label for="p2"><input type="checkbox" value="panel2" />2</label>
<label for="p3"><input type="checkbox" value="panel3" />3</label>
<label for="p4"><input type="checkbox" value="panel4" />4</label>
</div>
<div id="panels">
<div class="panel" id="panel1">1</div>
<div class="panel" id="panel2">2</div>
<div class="panel" id="panel3">3</div>
<div class="panel" id="panel4">4</div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文