5
मेरे पास एक ग्रिड है जहां आइटम गतिशील रूप से जोड़े जाते हैं, संक्षेप में, मैं चाहता हूं कि प्रत्येक आइटम सभी उपलब्ध कॉलम ले ले, यदि ये कॉलम भरे नहीं हैं। उदाहरण के लिए, इस तस्वीर में, मैं भूरा और सियान तत्वों को दाईं ओर जाने के लिए चाहता हूं।
मैं प्रत्येक आइटम को बताकर मैन्युअल रूप से ऐसा कर सकता हूं कि कितने कॉलम फैलाने हैं, लेकिन मैं इसे स्वचालित रूप से करना चाहता हूं। कुछ परिणाम कोड:सभी उपलब्ध कॉलमों को ग्रिड आइटम बनाएं
#wrapper {
background-color: white;
width: 96px;
height: 100%;
margin: 0 auto;
}
.half-hours {
height: 20px;
background-color: white;
border-top: 1px solid rgba(24.7%, 31.8%, 71%, 0.7);
}
#timeline_wrapper {
position: absolute;
margin: 0 auto;
margin-left: -24px;
width: 120px;
height: 100%;
}
#timeline {
float: right;
height: 100%;
width: 96px;
position: relative;
}
#events {
margin: 0 auto;
height: 50%;
width: 85px;
position: relative;
display: grid;
grid-template-rows: repeat(30, 20px);
grid-gap: 1px;
grid-template-columns: repeat(3, auto);
}
.event {
width: 100%;
height: 100%;
border-radius: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}<div id="wrapper">
<div id="timeline_wrapper">
<div id="timeline">
<div class="9 half-hours"></div>
<div class="9.5 half-hours"></div>
<div class="10 half-hours"></div>
<div class="10.5 half-hours"></div>
<div class="11 half-hours"></div>
<div class="11.5 half-hours"></div>
<div class="12 half-hours"></div>
<div class="12.5 half-hours"></div>
<div class="13 half-hours"></div>
<div class="13.5 half-hours"></div>
<div class="14 half-hours"></div>
<div class="14.5 half-hours"></div>
<div class="15 half-hours"></div>
<div class="15.5 half-hours"></div>
<div class="16 half-hours"></div>
<div class="16.5 half-hours"></div>
<div class="17 half-hours"></div>
<div class="17.5 half-hours"></div>
<div class="18 half-hours"></div>
<div class="18.5 half-hours"></div>
<div class="19 half-hours"></div>
<div class="19.5 half-hours"></div>
<div class="20 half-hours"></div>
<div class="20.5 half-hours"></div>
<div class="21 half-hours"></div>
<div class="21.5 half-hours"></div>
<div class="22 half-hours"></div>
<div class="22.5 half-hours"></div>
<div class="23 half-hours"></div>
<div class="23.5 half-hours"></div>
<div class="24 half-hours"></div>
</div>
</div>
<div id="events">
<div class="event" style="grid-row: 1/14; background-color: red;"></div>
<div class="event" style="grid-row: 1/12; background-color: green;"></div>
<div class="event" style="grid-row: 2/6; background-color: blue;"></div>
<div class="event" style="grid-row: 6/7; background-color: orange;"></div>
<div class="event" style="grid-row: 12/14; background-color: brown;"></div>
<div class="event" style="grid-row: 14/16; background-color: yellow;"></div>
<div class="event" style="grid-row: 14/15; background-color: cyan;"></div>
</div>
</div>और प्रत्येक आइटम के लिए grid-row निर्धारित और गतिशील रूप से जोड़ा जाता है। कोड को गतिशील घटना जोड़ने के लिए:
addEventToDOM(event) {
var wrapper = document.querySelector('#events');
var eventDiv = document.createElement('div');
var gridRowStart = (event.start - 9) * 2 + 1;
var gridRowEnd = (event.end - 9) * 2 + 1;
var color = availableColors.values().next().value;
eventDiv.className = 'event';
eventDiv.setAttribute('style', `grid-row: ${gridRowStart}/${gridRowEnd}; background-color: ${color};`);
availableColors.delete(color);
wrapper.appendChild(eventDiv);
}
@YahyaHussein वे सरल डोम हेरफेर के साथ, जे एस के साथ जोड़ दिया जाता है, मैं वैसे भी कोड जोड़ेंगे। कक्षा क्या जोड़ती है? –