JQuery / Javascript автоматически масштабируемая сетка управления - PullRequest
Новая
       25

JQuery / Javascript автоматически масштабируемая сетка управления

1 голос
/ 15 марта 2012

Я реализую страницу загрузки файла jquery. Пока пользователь добавляет файлы, я хочу, чтобы они отображались в виде значков в автоматически изменяемой сетке.

Авторазмер означает, что он обеспечивает максимальное пространство для размещения элементов. Когда есть два объекта - это будет выглядеть примерно так (я знаю, что мне придется самостоятельно обрабатывать изменение размера изображения):

two items js grid

Когда добавлено несколько:

several items js grid

Есть ли "контроль сетки" (возможно, jquery), который хотя бы приближается к тому, что мне нужно для определения размера?

1 Ответ

2 голосов
/ 04 апреля 2012

Прежде всего, помните, что я новичок в jQuery, и это мой первый пост в Stackoverflow:)

У меня та же проблема, и я пытаюсь ее исправить, используя jQuery и CSS. Это содержимое моего тега body: 

<div id="controls">
Controls:
    <button id="add">+</button>
    <button id="del">-</button>
Current ratio:
    <span id="value"></span>
    <button id="increase">+</button>
    <button id="decrease">-</button>
Referred to:
    <form style="display: inline;">
        width<input type="radio" name="maximize" value="width">
        height<input type="radio" name="maximize" value="height">
    </form>
</div>
<div id="elements" style="width: 500px; height: 300px; background: black;">
</div>
<script>
ratio      = 1;
ratioWidth = true;
function autoresize() {
    boxes   = $('#elements').children().size(); 
    rows    = Math.ceil(Math.sqrt(boxes/ratio));
    columns = Math.ceil(boxes/rows);
    if (!ratioWidth) {
        tmp     = rows;
        rows    = columns;
        columns = tmp;
    }
    $('#elements').children().css('width',  100/rows+'%');
    $('#elements').children().css('height', 100/columns+'%');
}
function add() {
    red   = Math.floor(Math.random()*256);
    green = Math.floor(Math.random()*256);
    blue  = Math.floor(Math.random()*256);
    color = 'rgb('+red+','+green+','+blue+')';
    $('#elements').append("<div style=\"background: "+color+"; float: left;\"></div>");
    autoresize();
}
function update() {
    $('#value').text(ratio);
    autoresize();
}
function remove() {
    $('#elements').children().last().remove();
    update();
}
function increase() {
    ratio++;
    update();
}
function decrease() {
    if (ratio > 1) {
        ratio--;
        update();
    }
}
$(document).ready(function() {
    $('#add').click(add);
    $('#del').click(remove);
    $('#increase').click(increase);
    $('#decrease').click(decrease);
    if (ratioWidth) value = 'width'
    else value = 'height'
    $('input[type=radio]').filter('[value='+value+']').attr('checked', true);
    $('input[type=radio]').live('change', function() {
        if ($(this).val() == 'width') ratioWidth = true
        else ratioWidth = false;
        autoresize();
    });
    update();
    //$(window).bind("resize", autoresize);
});
</script>

Вы можете удалить фоновый цвет и расположить значки по центру в этих полях. Если вы найдете лучший способ улучшить этот код, пожалуйста, дайте мне знать:)

Редактировать 1 - Я добавил Math.floor(...), чтобы убрать ошибку, когда сторона бокса имеет повторяющиеся десятичные дроби: очень большой размер - простое целое число. Теперь размеры выбираются из контейнера div, я использую черный в качестве цвета фона для основного контейнера, и я заметил небольшую проблему: иногда я вижу черную рамку рядом с маленькими прямоугольниками, даже если я не устанавливаю цвет фона. Может ли это быть ошибка рендеринга Firefox?

Редактировать 2 - Теперь можно установить, если вы предпочитаете автоматическое расширение по горизонтали, вертикали или ни одного из них. Я попытался написать лучший код, и я прокомментировал автоматическое изменение размера при изменении размера окна (используйте его, только если у вашего контейнера нет фиксированной высоты / ширины). Я думаю, что теперь ему нужен параметр отношения, чтобы указать, например, должна ли ширина быть вдвое больше. Живой пример: http://experimental.frafra.eu/maxarea2.html

Редактировать 3 - Новый код! Лучшее графическое представление и новый параметр: ratio. Соотношение - это коэффициент между отношением ширины / высоты основного контейнера к элементу. Живой пример: http://experimental.frafra.eu/maxarea3.html

...