मैंने एक स्क्रिप्ट (यहां एक उपयोगकर्ता की मदद से) को कोडित किया है जो मुझे एक चयनित डिव का विस्तार करने और शेष भाग को फिट करने के लिए समान रूप से खींचकर तदनुसार अन्य व्यवहार करने की अनुमति देता है (पहले एक चौड़ाई को छोड़कर)।
और यहाँ एक तस्वीर है जिसे मैं प्राप्त करना चाहता हूँ:
उसके लिए मैं फ्लेक्स और संक्रमण का उपयोग करता हूं।
यह अच्छी तरह से काम करता है, लेकिन jQuery स्क्रिप्ट एक "400%" खिंचाव मूल्य (जो परीक्षण के लिए बहुत अच्छा है) को निर्दिष्ट करता है।
अब मैं चयनित div को "400%" निश्चित मूल्य के बजाय सामग्री को पूरी तरह से फिट / सिकोड़ना चाहूंगा।
मुझे नहीं पता कि मैं ऐसा कैसे कर सकता हूं।
क्या यह संभव है ?
मैंने 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/
संपादित करें: यहाँ आप सभी की मदद से मेरा काम कर रहा समाधान है (आकार विंडो में अद्यतन किया गया है + divs की संख्या और पहले कॉलम की चौड़ाई गतिशील रूप से गणना की गई है):
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% समान है (हालांकि मुझे यह दिखाने में खुशी होगी) ..
—
बशीर मेसौरी
यहाँ बिंदु है: मैं एक प्रकार की एक्सेल स्प्रेडशीट का अनुकरण करता हूं और मैं चाहता हूं कि लोग सामग्री को फिट करने के लिए किसी विशेष कॉलम पर क्लिक करने में सक्षम हों। आम तौर पर एक तालिका होती है, लेकिन कॉलम सही ढंग से व्यवहार नहीं कर रहे हैं जब यह उन्हें मेरे द्वारा इच्छित तरीके से आकार देने के लिए आता है (एक समय में एक कॉलम का विस्तार करना आसान है, लेकिन शेष स्थान पर कब्जा करने के लिए दूसरों को वास्तविक समय में व्यवहार करना कठिन है फ्लेक्स divs के लिए करना होगा। वे बस अनियमित रूप से विस्तार करते हैं। मैंने कुछ शोध किए और जो मैं चाहता हूं वह तालिकाओं के साथ असंभव है)। ऐसे अन्य कारण हैं जो मैं तालिका या डेटाटेबल का उपयोग नहीं करता हूं, लेकिन यह इस पोस्ट के दायरे से बाहर है।
—
बशीर मेसौरी
काफी आसान है, बस 'संपादित करें' हिट करें, सवाल के अंत में जाएं और एक नए स्निपेट (यह सब सहित) के साथ कुछ प्रोजेसिक पॉन्डरिंग्स जोड़ना शुरू करें। डिफ़ॉल्ट रूप से 'स्निपेट छिपाएं' (नीचे बाएं चेकबॉक्स), 'नए पाठकों' के लिए कम घुसपैठ / विचलित करना सुनिश्चित करें। मेरा पहला विचार यह था कि आप इसे कुछ फैंसी 'हारमोनिका' जैसे विजेट, आइकन और सभी के लिए उपयोग करने जा रहे थे। स्प्रेडशीट हुह, मेरे पास कुछ पूर्ण स्क्रीन है, यहाँ चर्चा किए गए (यदि आप रुचि रखते हैं) समान सिद्धांतों का उपयोग करते हुए चारों ओर ऊपर / नीचे / बाएं / दाएं बिछाने पर फैला हुआ है।
—
रेने वैन डेर लेंडे
महान आप अंतिम परिणाम पोस्ट करने वाले अतिरिक्त मील गए। इतना अधिक पुरस्कृत पर सवालों के जवाब देता है! कुडोस ...
—
रेने वैन डेर लेंडे