CSS огромные проблемы с сеткой - PullRequest
Новая
       6

CSS огромные проблемы с сеткой

0 голосов
/ 22 октября 2018

Я использую сетку CSS для шкалы времени.Сетка дает около 1300 делений, что очень плохо для производительности.

Мне нужно, чтобы каждая из этих ячеек была кликабельной и показывала разные цвета при наведении.Я не могу найти способ стилизовать «пустые» узлы или взаимодействовать с ними без рендеринга всех этих 1300 делений.

Что я могу сделать?

So many divs!!!!

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Вы можете добавить свои столбцы классов, EventHandler и те же классы действуют так же, как при наведении курсора или нажатии. Кроме того, 1300 делений действительно снижают производительность вашей страницы.Для этого вы можете исследовать бесконечную прокрутку или подобные методы.

https://demos.telerik.com/kendo-ui/grid/endless-scrolling-local

0 голосов
/ 22 октября 2018

, как Майк 'Pomax' Kamermans предложил, лучшим способом было бы обнаружить щелчок мыши и динамически добавить элемент.Вы можете настроить ширину и высоту элементов, присваивая значения item_width и item_height. 

var item_width=40;
var item_height=40;
var added_items=[];
$(function(){
      $('.grid').on('click', function(e){
      var x = e.pageX - $(this).offset().left;
      var y = e.pageY - $(this).offset().top; 
      var item=$('<div class="item"></div>');
      var left=Math.floor(x/item_width)*item_width;
      var top=Math.floor(y/item_height)*item_height;
      var position={ 'left':left, 'top':top };
      var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);
      if(index<0){
      added_items.push(position);
      item.css('left', left);
      item.css('top', top);
      item.css('background', "#"+((1<<24)*Math.random()|0).toString(16))
      item.appendTo($('.grid'));
      }
    });
  
});
.grid {
  
  width:400px;
  height:400px;
  border:1px solid red;
    position:relative;
  margin:10px;
}
.item {
  width:40px;
  height:40px;
  position:absolute;
  background:red;  
}
.item:hover { 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"> </div>
...