Элемент списка перемещения JavaScript при изменении размера окна

У меня есть список элементов (отображается горизонтально) и раскрывающийся список. Я пытаюсь понять, как я могу перемещать элементы из горизонтального списка в раскрывающийся список при изменении размера окна. В основном у меня есть только один ряд, где я могу разместить свои предметы. Если он не подходит (добавляя ширину элементов списка), я хочу поместить их в раскрывающийся список. Я использую angularjs.

<div class="name-list">
  <ul class="horizontal">
    <li><a href="#">item 1</a>
    </li>
    <li><a href="#">item 2</a>
    </li>
    <li><a href="#">item 3</a>
    </li>
  </ul>
</div>

<div class="dropdown more-names">
  <button>More</button>
  <ul class="dropdown">
    <li><a href="#">item 4</a>
    </li>
    <li><a href="#">item 5</a>
    </li>
    <li><a href="#">item 6</a>
    </li>
  </ul>
</div>


javascript css angularjs window-resize
person Snapper    schedule 05.05.2016    source источник
comment
Просто добавьте тот же контент в раскрывающийся список и покажите//скройте с помощью медиа-запросов.   -  person T J    schedule 05.05.2016
comment
Спасибо - это хорошая идея. Однако мне нужно иметь возможность рассчитать ширину горизонтальных элементов? Это возможно?   -  person Snapper    schedule 05.05.2016
comment
Вам не нужно вычислять ширину, просто определите несколько медиа-запросов, например, один для размера мобильного устройства, один для размера планшета, один для рабочего стола, а затем решите, при каком размере ваши горизонтальные элементы попадают в раскрывающийся список, и напишите правило css для показать/скрыть в медиа-запросе для этого размера... Вот как это делают даже основные фреймворки пользовательского интерфейса.   -  person T J    schedule 05.05.2016
comment
Но если я добавлю класс ко всем элементам, все они переместятся из горизонтального списка в раскрывающийся список. Что мне нужно, так это переместить некоторые из них.   -  person Snapper    schedule 06.05.2016
comment
Почему вы не можете добавить специальный класс к предметам, которые хотите переместить? Нет ограничений на количество классов, которые вы можете добавить   -  person T J    schedule 06.05.2016
comment
Поймите, что вы говорите. Да, я могу добавить специальный класс. Но чтобы установить этот класс для конкретного элемента, мне нужно сначала узнать сумму элементов li, верно? скажем, мое окно 500 пикселей, и у меня есть 5 элементов по 200 пикселей каждый... В этом случае я хочу показать первые два горизонтально, а остальные три в раскрывающемся списке. Однако эти элементы могут иметь разную ширину, поэтому, если у моих элементов li теперь по 150, я хочу показать первые три горизонтально, а два других в раскрывающемся списке. Поэтому я считаю, что мне все еще не хватает того, как получить ширину элементов li, а затем назначить классы.   -  person Snapper    schedule 06.05.2016
comment
Вы не можете обрабатывать все разрешения, такие как 499px, 500px, 501px и так далее. Вместо этого вы говорите, что если окно меньше 500 пикселей, все переходит в раскрывающийся список. Если это 500-1000px 2 элемента, они выпадают в раскрывающемся списке, а выше все горизонтально и т. д. Как я уже упоминал, вам нужно разработать приложение для нескольких распространенных разрешений. Посмотрите, как можно сделать адаптивный дизайн с помощью известных UI-фреймворков, таких как bootstrap. Вам нужно провести небольшое исследование и понять отзывчивый, адаптивный дизайн, который используется в настоящее время. Я не могу добавить всю идею в комментарий или ответ. Это больше, чем это.   -  person T J    schedule 06.05.2016

Ответы (2)


arrow_upward
1
arrow_downward

Просто настройте $watch в своем контроллере:

$scope.$watch(function() {
    return $window.innerWidth;
}, function(value) {
    console.log('window inner width is now', value);
    yourFunctionToMoveListItem();
});

Вы должны использовать службу $window вместо javascript window, так как это немного безопаснее... Цитата из документов:

Хотя window глобально доступно в JavaScript, оно вызывает проблемы с тестируемостью, поскольку является глобальной переменной. В angular мы всегда обращаемся к нему через службу $window, поэтому его можно переопределить, удалить или смоделировать для тестирования.

person MarcoS    schedule 05.05.2016
comment
... при изменении размера это, вероятно, сработает сотни раз. Лучше делать адаптивный дизайн, чем заниматься такими вещами... - person T J; 05.05.2016
comment
Вы, наверное, правы... Мой ответ на вопрос... :-) - person MarcoS; 05.05.2016

arrow_upward
1
arrow_downward

Вам нужно использовать медиа-запросы css, чтобы показать/скрыть html-элемент при изменении размера окна. Например вот так

@media screen and (max-width: 300px) {
    .myClass {
        width: 100px;
    }
}

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

person Mohammad    schedule 05.05.2016
comment
Хороший пример. Однако это будет работать для всех предметов. Мне нужно поместить некоторые элементы в раскрывающийся список, а не все элементы. Таким образом, в первом списке все еще будут видны элементы (которые могут поместиться в одну горизонтальную строку), а остальные должны перейти в раскрывающийся список. - person Snapper; 06.05.2016