Saya telah membuat kode skrip (dengan bantuan pengguna di sini) yang memungkinkan saya untuk memperluas div yang dipilih dan membuat div lain berperilaku sesuai dengan peregangan yang sama agar sesuai dengan ruang yang tersisa (kecuali yang pertama yang lebarnya diperbaiki).
Dan inilah gambar yang ingin saya capai:
Untuk itu saya menggunakan flex dan transisi.
Ini bekerja dengan baik, tetapi skrip jQuery menentukan nilai peregangan "400%" (yang bagus untuk pengujian).
Sekarang saya ingin div yang dipilih untuk memperluas / menyusut agar sesuai dengan konten, bukan nilai tetap "400%".
Saya tidak tahu bagaimana saya bisa melakukan itu.
Apa itu mungkin ?
Saya mencoba mengkloning div, menyesuaikannya dengan konten, mendapatkan nilainya dan kemudian menggunakan nilai ini untuk transisi NAMUN ini berarti saya memiliki lebar awal dalam persentase tetapi nilai target dalam piksel. Itu tidak berhasil.
Dan jika saya mengonversi nilai piksel dalam persentase, maka hasilnya tidak persis sesuai dengan konten untuk alasan apa pun.
Dalam semua kasus, ini tampaknya sedikit cara yang rumit untuk mencapai apa yang saya inginkan.
Apakah tidak ada properti fleksibel yang dapat ditransisikan agar sesuai dengan konten div yang dipilih?
Berikut adalah kode ( diedit / disederhanakan karena untuk dibaca lebih baik ):
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>Ini jsfiddle:
https://jsfiddle.net/zajsLrxp/1/
EDIT: Ini adalah solusi kerja saya dengan bantuan Anda semua (ukuran diperbarui pada ukuran jendela + jumlah divs dan lebar kolom pertama dihitung secara dinamis):
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>Dan di sini adalah contoh yang lengkap di tempat kerja (gaya + padding + lebih banyak data):
https://jsfiddle.net/zrqLowx0/2/
Terima kasih semua !
1
Mohon berbaik hati untuk menambahkan hasil akhir pada pertanyaan Anda yang menunjukkan apa yang Anda buat setelah semua ini. Saya benar-benar tertarik dengan tampilannya. Terima kasih! (... mungkin beberapa wawasan tentang apa yang digunakan untuk? ...)
—
Rene van der Lende
Ok, saya akan melakukannya segera setelah saya membersihkan skrip saya dari semua elemen yang tidak perlu (dalam beberapa menit saya kira). Yang mengatakan, bagaimana saya melakukannya? Apakah saya hanya mengedit posting asli dan menambahkan pendapat saya meskipun jawaban Azametzin baik-baik saja? Saya mengubah beberapa hal tetapi 90% sama (saya akan senang untuk menunjukkannya) ..
—
Bachir Messaouri
Inilah intinya: Saya meniru semacam spreadsheet excel dan saya ingin orang-orang dapat mengklik kolom tertentu agar sesuai dengan konten. Biasanya sebuah tabel akan melakukan tetapi kolom tidak berperilaku benar ketika datang untuk mengubah ukurannya seperti yang saya inginkan (mudah untuk memperluas satu kolom pada suatu waktu tetapi sulit untuk membuat yang lain berperilaku secara real time untuk menempati ruang yang tersisa dengan cara flex akan lakukan untuk divs. Mereka hanya berkembang tidak menentu. Saya membuat beberapa penelitian dan apa yang saya inginkan tidak mungkin dengan tabel). Ada alasan lain saya tidak menggunakan tabel atau dataTable tapi itu di luar lingkup tulisan ini.
—
Bachir Messaouri
Cukup mudah, cukup tekan 'edit', pergi ke akhir pertanyaan dan mulai menambahkan beberapa perenungan proza, termasuk potongan baru (semuanya). Pastikan untuk 'menyembunyikan cuplikan' secara default (kotak centang kiri bawah), kurang mengganggu / mengganggu bagi 'pembaca baru'. Pikiran pertama saya adalah bahwa Anda akan menggunakannya untuk widget, ikon harmonika-seperti mewah, ikon dan semua. Spreadsheet ya, saya punya beberapa layar penuh, membentang di seluruh tempat atas / bawah / kiri / kanan berbaring menggunakan prinsip-prinsip yang sama yang dibahas di sini (jika Anda tertarik).
—
Rene van der Lende
Hebat Anda berusaha keras memposting hasil akhir. Menjadikan menjawab pertanyaan di SO jauh lebih bermanfaat! Cudos ...
—
Rene van der Lende