Automati c Функция изменения размера - PullRequest
Новая
       7

Automati c Функция изменения размера

0 голосов
/ 25 апреля 2020

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

.outer-bar{
  width: 100%;
  height: 50px;
  background-color: blue;
}

.outer-bar button {
  width: 50px;
  height: 40px;
  outline: none;
  background-color: white;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
  margin-left: 2px;
}
<div class = "outer-bar">
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
  <button class = "a">Hi</button>
</div>

Когда размер окна изменился, я хочу, чтобы окно показывало только их достаточно, чтобы не было переполнения, но их может быть как можно больше.

Итак, используя: window.addEventListener("resize", function() {} );, есть ли способ реализовать это?

Один замечательный пример, который я видел, был на Документах Google , где их панель автоматически настраивалась.

Я бы предпочел сделать это с Javascript и CSS и без Jquery или с внешними библиотеками. (Обратите внимание, что я упростил ширину и количество элементов в целях иллюстрации, хотя основная идея c остается прежней). Я также предпочитаю использовать циклы for и document.getElementsByClassName("a").

. Я уже запустил его с помощью: 

var ribbon = document.getElementsByClassName("outer-bar")[0];
var prevChild = 0;
for(var i = 0; i < ribbon.children.length; i++) {
    if(ribbon.children[i].getBoundingClientRect().right < prevChild) {
        for(var c = i; c < ribbon.children.length; c++) {
            ribbon.children[c].style.display = "none";
        }
        break;
    }
    prevChild = ribbon.children[i].getBoundingClientRect().right;
}

Хотя этот метод не позволяет отображать дочерние элементы после изменения размера окна до быть больше.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Если вы знаете длину ленты, почему бы не разделить ее на размер, который вы хотите, чтобы кнопка была. Затем l oop через кнопки, блокирующие первые (длина / размер ленты), а остальные нет.

0 голосов
/ 26 апреля 2020

Я не уверен, что правильно вас понял, но похоже, что вам нужно изменить стиль внутренних элементов, когда размер экрана изменится. CSS способен обработать это для вас без необходимости вообще использовать JavaScript.

Media Queries позволяет указывать различные стили в зависимости от текущего размера окна. 

.outer-bar button {
  width: 50px;
  height: 40px;
  outline: none;
  background-color: white;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
  margin-left: 2px;
}

@media screen and (max-width: 600px) {
  .outer-bar button {
    /* 
    Specify here any different styling 
    Ex. 
    */

    width: 25px;
   }
}
...