Seçilen bir div genişletmek ve diğer divs (kalan genişlik sabit olan ilk biri hariç) eşit olarak uzanan tarafından buna göre davranmasını sağlar bir komut dosyası (burada bir kullanıcı yardımıyla) kodladı.
İşte elde etmek istediğim şeyin bir resmi:
Bunun için esneklik ve geçişler kullanıyorum.
İyi çalışır, ancak jQuery komut dosyası "% 400" bir esneme değeri belirtir (bu test için mükemmeldir).
Şimdi seçilen div "% 400" sabit değeri yerine tam olarak sığacak şekilde genişletmek / daraltmak istiyorum.
Bunu nasıl yapabileceğime dair hiçbir fikrim yok.
Mümkün mü ?
Div'ı klonlamaya, içeriğe sığdırmaya, değerini elde etmeye ve sonra geçiş için bu değeri kullanmaya çalıştım, ancak bu yüzde olarak başlangıç genişliğine ancak piksel cinsinden bir hedef değere sahip olduğum anlamına geliyor. Bu işe yaramıyor.
Ve piksel değerini yüzde olarak dönüştürürsem, sonuç ne olursa olsun içeriğe tam olarak uymaz.
Her durumda, bu zaten istediğimi elde etmek için biraz karmaşık bir yol gibi görünüyor.
Seçilen bir div'in içeriğine sığdırmak için geçiş yapılabilecek herhangi bir flex özelliği yok mu?
İşte kod ( daha iyi okumak için düzenlenmiş / basitleştirilmiş ):
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>İşte jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDIT: İşte hepinizin yardımıyla çalışma çözümü (pencere yeniden boyutlandırma + div sayısı ve ilk sütun genişliği dinamik olarak hesaplanan güncellenen boyutları):
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>Ve işte tam teşekküllü bir örnek (stiller + dolgu + daha fazla veri):
https://jsfiddle.net/zrqLowx0/2/
Hepinize teşekkür ederim !
1
Lütfen, tüm bunlardan sonra ne oluşturduğunuzu gösteren sorunuza bir nihai sonuç eklemek için yeterince nazik olun. Gerçekten neye benzediğiyle ilgileniyorum. Teşekkürler! (... belki de ne için kullanıldığına dair bir fikir??)
—
Rene van der Lende
Tamam, betiğimi tüm gereksiz öğelerden temizlediğim anda yapacağım (birkaç dakika içinde sanırım). Bunu nasıl yaparım? Azametzin yanıtı gayet iyi olsa da, sadece orijinal gönderiyi düzenler ve bu konudaki ilgimi ekler miyim? Birkaç şeyi değiştirdim ama% 90 aynı (bunu göstermekten memnuniyet duyarım) ..
—
Bachir Messaouri
İşte nokta: Bir tür excel elektronik tablosunu taklit ediyorum ve insanların içeriğe uyması için belirli bir sütunu tıklamasını istiyorum. Normalde bir tablo yapardı, ancak sütunları istediğim gibi yeniden boyutlandırma söz konusu olduğunda doğru davranmıyor (bir seferde bir sütunu genişletmek kolay, ancak kalan alanı bu şekilde işgal etmek için diğerlerinin gerçek zamanlı davranmasını sağlamak zor Flex, divs için yapardı, sadece düzensiz genişliyorlar, biraz araştırma yaptım ve istediğim şey tablolarla imkansız). Bir tablo veya dataTable kullanmamanın başka nedenleri de var ama bu yazının kapsamı dışında.
—
Bachir Messaouri
Yeterince kolay, sadece 'düzenle'ye basın, sorunun sonuna gidin ve yeni bir snippet (hepsi) dahil olmak üzere bazı prozaik vurgular eklemeye başlayın. Snippet'i varsayılan olarak (sol alt onay kutusu), 'yeni okuyucular' için daha az müdahaleci / dikkat dağıtıcı sakladığınızdan emin olun. İlk düşüncem, bazı süslü 'mızıka' benzeri widget, simgeler ve hepsi için kullanacağınızdı. E-tablo ha, bazı tam ekran var, yukarı / aşağı / sola / sağa burada tartışılan aynı ilkeleri (etrafında ilgileniyorsanız) etrafında etrafında döşeme uzanan.
—
Rene van der Lende
Harika, son sonucu göndererek fazladan yol kat ettin. SO ile ilgili soruları yanıtlamak çok daha faydalı! Cudos ...
—
Rene van der Lende