Я кодировал скрипт (с помощью пользователя здесь), который позволяет мне расширять выбранный div и заставлять другие div вести себя соответствующим образом, растягивая в равной степени, чтобы соответствовать оставшемуся пространству (кроме первого, ширина которого фиксирована).
И вот картина того, чего я хочу добиться:
Для этого я использую flex и переходы.
Это хорошо работает, но сценарий jQuery указывает значение растяжения «400%» (что отлично подходит для тестирования).
Теперь я хотел бы, чтобы выбранный div расширялся / сжимался, чтобы точно соответствовать содержимому вместо фиксированного значения «400%».
Я понятия не имею, как я мог это сделать.
Является ли это возможным ?
Я попытался клонировать div, подогнать его к содержимому, получить его значение и затем использовать это значение для перехода, НО это означает, что у меня есть начальная ширина в процентах, но целевое значение в пикселях. Это не работает
И если я преобразую значение пикселя в процентах, то результат по какой-то причине не совсем соответствует содержанию.
Во всех случаях это кажется довольно сложным способом добиться того, чего я хочу в любом случае.
Нет ли какого-либо свойства flex, которое можно было бы переместить, чтобы соответствовать содержимому выбранного div?
Вот код ( отредактированный / упрощенный, так как для лучшего чтения ):
var expanded = '';
$(document).on("click", ".div:not(:first-child)", function(e) {
var thisInd =$(this).index();
if(expanded != thisInd) {
//fit clicked fluid div to its content and reset the other fluid divs
$(this).css("width", "400%");
$('.div').not(':first').not(this).css("width", "100%");
expanded = thisInd;
} else {
//reset all fluid divs
$('.div').not(':first').css("width", "100%");
expanded = '';
}
});.wrapper {
overflow: hidden;
width: 100%;
margin-top: 20px;
border: 1px solid black;
display: flex;
justify-content: flex-start;
}
.div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
text-align:center;
}
.div:first-child {
min-width: 36px;
background: #999;
}
.div:not(:first-child) {
width: 100%;
transition: width 1s;
}
.div:not(:first-child) span {
background: #ddd;
}
.div:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the div you want to fit/reset (except the first div)
<div class="wrapper">
<div class="div"><span>Fixed</span></div>
<div class="div"><span>Fluid (long long long long long text)</span></div>
<div class="div"><span>Fluid</span></div>
<div class="div"><span>Fluid</span></div>
</div>Вот jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
РЕДАКТИРОВАТЬ: Вот мое рабочее решение с помощью всех вас (размеры обновляются при изменении размера окна + количество делений и динамически рассчитывается ширина первого столбца):
var tableWidth;
var expanded = '';
var fixedDivWidth = 0;
var flexPercentage = 100/($('.column').length-1);
$(document).ready(function() {
// Set width of first fixed column
$('.column:first-child .cell .fit').each(function() {
var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
});
$('.column:first-child' ).css('min-width',fixedDivWidth+'px')
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})
$(window).resize( function() {
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
})
$(document).on("click", ".column:not(:first-child)", function(e) {
var thisInd =$(this).index();
// if first click on a fluid column
if(expanded != thisInd)
{
var fitDivWidth=0;
// Set width of selected fluid column
$(this).find('.fit').each(function() {
var c = $(this)[0].getBoundingClientRect().width;
if( c > fitDivWidth ){fitDivWidth = c;}
});
tableWidth = $('.mainTable')[0].getBoundingClientRect().width;
$(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
// Use remaining space equally for all other fluid column
$('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
expanded = thisInd;
}
// if second click on a fluid column
else
{
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
}
});body{
font-family: 'Arial';
font-size: 12px;
padding: 20px;
}
.mainTable {
overflow: hidden;
width: 100%;
border: 1px solid black;
display: flex;
margin-top : 20px;
}
.cell{
height: 32px;
border-top: 1px solid black;
white-space: nowrap;
}
.cell:first-child{
background: #ccc;
border-top: none;
}
.column {
border-right: 1px solid black;
transition: flex 0.4s;
overflow: hidden;
line-height: 32px;
text-align: center;
}
.column:first-child {
background: #ccc;
}
.column:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>
<div class="mainTable">
<div class="column">
<div class="cell"><span class="fit">Propriété</span></div>
<div class="cell"><span class="fit">Artisan 45</span></div>
<div class="cell"><span class="fit">Waterloo 528</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Adresse</span></div>
<div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
<div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Commune</span></div>
<div class="cell"><span class="fit">Ixelles</span></div>
<div class="cell"><span class="fit">Watermael-Boitsfort</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Ville</span></div>
<div class="cell"><span class="fit">Marche-en-Famenne</span></div>
<div class="cell"><span class="fit">Bruxelles</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Surface</span></div>
<div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
<div class="cell"><span class="fit">350 m<sup>2</sup></span></div>
</div>
</div>И вот полный пример на работе (стили + отступы + больше данных):
https://jsfiddle.net/zrqLowx0/2/
Спасибо вам всем !
1
Пожалуйста, будьте любезны добавить окончательный результат в свой вопрос, показывая, что вы создали после всего этого. Мне действительно интересно, как это выглядит. Спасибо! (... может быть, некоторое представление о том, для чего он используется? ...)
—
Рене ван дер Ленде
Хорошо, я сделаю это, как только очистю свой скрипт от всех ненужных элементов (думаю, через несколько минут). Тем не менее, как мне это сделать? Должен ли я просто отредактировать исходное сообщение и добавить свое мнение об этом, даже если ответ Азаметзина в порядке? Я изменил несколько вещей, но это на 90% то же самое (хотя я был бы рад показать это) ..
—
Башир Мессаури
Вот в чем дело: я эмулирую своего рода электронную таблицу Excel и хочу, чтобы люди могли щелкать по конкретному столбцу, чтобы соответствовать содержанию. Обычно таблица справляется, но столбцы не ведут себя правильно, когда дело доходит до изменения их размера так, как я хочу (легко расширять один столбец за раз, но трудно заставить другие вести себя в режиме реального времени, чтобы занять оставшееся пространство flex сделал бы для div. Они просто беспорядочно расширяются. Я провел некоторые исследования, и то, что я хочу, невозможно с таблицами). Есть и другие причины, по которым я не использую таблицу или таблицу данных, но это выходит за рамки этого поста.
—
Башир Мессаури
Достаточно просто, просто нажмите «редактировать», перейдите к концу вопроса и начните добавлять некоторые прозаические размышления, включая новый фрагмент (все это). Убедитесь, что «скрыть фрагмент» по умолчанию (нижний левый флажок), менее навязчивый / отвлекающий для «новых читателей». Моей первой мыслью было, что вы собираетесь использовать его для какого-нибудь причудливого «гармошкообразного» виджета, иконок и всего остального. Электронная таблица да, у меня есть какой-то полноэкранный режим, растянувшийся повсюду вверх / вниз / влево / вправо, используя те же принципы, что и здесь (если вам интересно).
—
Рене ван дер Ленде
Отлично, вы прошли лишнюю милю, опубликовав окончательный результат. Делает ответы на вопросы о ТАК гораздо более полезным! Престижность ...
—
Рене ван дер Ленде