Кнопки: динамически настраивать размер на основе доступного пространства.

Sagar Raj спросил: 31 июля 2018 в 09:30 в: javascript

Поэтому требование состоит в том, что вкладки или мастер здесь должны отображать полное имя по умолчанию, а неактивные должен сжиматься в зависимости от доступного пространства с правой стороны. Любая идея, как мы можем это достичь?

По умолчанию кнопки будут иметь ширину: авто. Но когда нет. кнопок больше и когда пространство справа начинает уменьшаться, неактивные должны сокращаться.


1 ответ

Есть решение
Nacorga ответил: 03 августа 2018 в 08:31

Я думаю, вы выглядите примерно так:

//Number of elemnts
let count = $('li').length;

//Width of each element
let width = 100 / count;
$('li').css('width', width + '%');

//Width of elements container (ul)
let ulWidth = parseFloat($("ul").css("width"));


for (let i = 0; i< count; i++) {

  $($('li')[i]).click(function() {
  
  	//Reset elements width
    $('li').css('width', 'auto');

    //Add active class to clicked element
    $('li').removeClass('active');
    $($('li')[i]).addClass('active');
    
    if ( $('li').hasClass('active') ) {
    
    	//Width of active element
      let activeWidth = parseFloat($("li.active").css("width"));
      let activeWidthPerc = (activeWidth * 100) / ulWidth;

      //Width of the rest of the elements
      let generalWidth = (100 - activeWidthPerc) / (count - 1);
      
      //Will only adapt when the active element is smaller than the rest of the elements
      if (activeWidthPerc < generalWidth) {
        
        $('li').css('width', width + '%');
        
      } else {
        
        $('li').css('width', generalWidth + '%'); //Set width to rest of the elements
        $('li.active').css('width', activeWidthPerc + '%'); //Set width to active element
        
      }
    
    }

  });

}
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

nav {
  width: 80%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

ul {
  width: 100%;
}

li {
  list-style: none;
  float: left;
  padding: 10px;
  text-align: center;
  background: #EEEEEE;
  cursor: pointer;
  color: #777;
  border-right: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

li:last-child {
  border-right: none;
}

p {
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

i {
  vertical-align: bottom;
  margin-right: 5px;
}

.active {
  background: #3C8CBD;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <nav>
    <ul>
      <!--Try to add more li elements-->
      <li>
        <i class="material-icons">home</i><p>Home</p>
      </li>
      <li>
        <i class="material-icons">airplanemode_active</i><p>Plane</p>
      </li>
      <li>
        <i class="material-icons">directions_car</i><p>Car</p>
      </li>
      <li>
        <i class="material-icons">people</i><p>People</p>
      </li>
    </ul>
  </nav>
</body>

Вы можете найти полный пример здесь https://codepen.io/Nacorga/pen/MqaLGK

Я надеюсь, что это поможет вам;)

Sagar Raj ответил: 01 августа 2018 в 05:49
@Nacroga - Ваше решение не сжимает кнопки при увеличении числа. Проверьте мой вопрос еще раз.
Nacorga ответил: 03 августа 2018 в 08:29
Проверьте это сейчас @SagarRaj. Я сделал некоторые исправления.
Sagar Raj ответил: 04 августа 2018 в 08:16
Спасибо за концепцию!