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

Question

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

0

У меня есть главная страница, над которой я работаю, и это 2 столбца с одинаковой шириной, с несколькими виджетами на странице. Страница является отзывчивой, а количество виджетов является переменной. На данный момент у меня есть решение, которое работает достаточно хорошо и не использует плагин, такой как кладка или сальватер. Причина, по которой я пошел против использования этих плагинов, заключается в том, что я не хочу, чтобы страница была двумя жесткими столбцами, я бы хотел, чтобы виджеты могли проходить и располагать доступное пространство.

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

http://codepen.io/charge-valtech/pen/bzJfj

Это jquery, который я написал:

function layoutWidgets() {
  console.log('layout widgets');
  if ($(".left-widget").css("float") == "left") {
    $('.left-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition >= 30) {
        $(this).removeClass('left-widget').addClass('right-widget');
      }
    });
    $('.right-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition <= 30) {
        $(this).removeClass('right-widget').addClass('left-widget');
      }
    });
  }
}

layoutWidgets();
$(window).resize(layoutWidgets);

$('.collapse').click(function () {
  $(this).closest('.widget').toggleClass('collapsed');
});

Но по какой-то причине, если я поместил функцию layoutWidgets внутри функции click для свертывания виджетов, это не сработает.

Есть идеи?

hcharge 28 нояб. 2013, в 12:40

Источник

Теги:

javascript

jquery

html

css

responsive-design

2 ответа

Ещё вопросы

hcharge · Answer 1 · 2013-11-29T10-42-00.000Z

То, как я решил это, - сделать цикл for в моей функции щелчка, которая должна проходить через виджеты и запускать layoutWidgets:

  $('.collapse-expand').click(function () {
            $(this).closest('.dashboard-panel').toggleClass('collapsed');
            var n = 7;
            for (var i = 0; i < n; i++) {
                layoutWidgets();
            }
        });

Talk nerdy to me · Answer 2 · 2013-11-28T10-18-00.000Z

Либо поставьте свой код в функцию document.ready, либо включите его в нижний колонтитул после того, как все будет загружено. Вы не можете присоединить событие click к элементу, который еще не существует.

Это не та проблема, о которой я говорю, это всего лишь фрагмент моего кода, вы прочитали вопрос?
Можете ли вы показать код, который вызывает layoutWidgets, в вашей функции щелчка?
Я попытался сделать следующее: $ ('. Collapse'). Click (function () {$ (this) .closest ('. Widget'). ToggleClass ('collapsed'); layoutWidgets ();}); Но я думаю, что мне нужно перебрать виджеты