динамическое позиционирование панелей в зависимости от их видимости, контролируемой пользователем - PullRequest
Новая
       10

динамическое позиционирование панелей в зависимости от их видимости, контролируемой пользователем

1 голос
/ 13 января 2010

У меня есть 4 панели и вверху есть контрольный список, который контролирует, какие панели вы хотите просмотреть. Как бы я настроить его так, чтобы, если они снимают галочку с одной из панелей, то остальные переставят. Немного расплывчато, поэтому: 

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

Так что, если они снимают галочку с 2 и 3, я бы хотел, чтобы 4 находилась рядом с 1 

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

И если они снимают галочку только с 3, то 4 переходит в позицию 3. Эти панели также будут центрированы на странице, но если что-то вроде 3 не отмечено, я хочу, чтобы четвертая панель была выровнена по левому краю с первой панелью, а не по центру между ними. Вот так: 

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

А не это: 

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

1 Ответ

3 голосов
/ 13 января 2010

Размещение 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>
...