Gridstack.js: प्रतिशत के बजाय पिक्सेल के आधार पर एक निश्चित चौड़ाई का ग्रिड बनाना।

को निर्मित 6 नव॰ 2016 · 6टिप्पणियाँ · स्रोत: gridstack/gridstack.js

मैं खिड़की के आकार से स्वतंत्र एक निश्चित सेल चौड़ाई और ऊंचाई बनाने की कोशिश कर रहा हूं। मैं 20px गुणा 20px ग्रिड बनाना चाहता हूं जहां प्रत्येक विजेट 20px वृद्धि में तरल रूप से ऊपर और नीचे जा सकता है। मैं cellHeight: 20 पास करके ऊंचाई तय करने में सक्षम हूं, लेकिन चौड़ाई बहुत अच्छी तरह से काम नहीं कर रही है। यही मैं विकल्पों में गुजर रहा हूँ:

var options = {
      float: true,
      width: 53,
      acceptWidgets: '.grid-stack-item',
      cellHeight: 20,
      verticalMargin: 0,
      disableResize: true,
      alwaysShowResizeHandle: false
  };

  $('#grid-1').gridstack(options);

मैंने cellWidth: 20 की कोशिश की, लेकिन यह काम नहीं कर रहा था। मैंने% के बजाय px के आधार पर गणना करने के लिए scss स्क्रिप्ट को भी संशोधित किया।

.grid-stack > .grid-stack-item {
  $gridstack-columns: 60;

  <strong i="11">@for</strong> $i from 1 through $gridstack-columns {
    &[data-gs-width='#{$i}'] { width: $i * 20px; }
    &[data-gs-x='#{$i}'] { left: $i * 20px; }
  }
}

यह ग्रिड आइटम को सही 20px ग्रिड स्थानों में स्नैप करता है, लेकिन क्षैतिज ड्रैगिंग कम सुचारू हो जाती है। क्या कुछ और है जो मुझे .scss स्क्रिप्ट में जोड़ने की ज़रूरत है ताकि क्षैतिज ड्रैगिंग मैप्स को ग्रिड चौड़ाई में जोड़ सकें? या क्या मुझे width या cellWidth परम के लिए कुछ अलग करने की ज़रूरत है? मैं किसी भी% गणना से दूर होना चाहता हूं :)

question

स्रोत

cblokker

👍2

सभी 6 टिप्पणियाँ

@cblokker क्या आपने कभी यह पता लगाया कि यह कैसे करें? मैं यह भी देख रहा हूं कि पिक्सल के आधार पर चौड़ाई को कैसे कार्यान्वित किया जाए, न कि प्रतिशत। मेरा सही जगहों पर स्नैप भी नहीं होगा। ऐसा लगता है कि यह एक बड़े अंतर से बंद है।

randellhodges 23 मार्च 2017

👍1

यह वह कार्य है जो मुझे दुःख दे रहा है:

    GridStack.prototype.cellWidth = function() {
        return Math.round(this.container.outerWidth() / this.opts.width);
    };

एक पिक्सेल आधारित चौड़ाई के मामले में, एक सीएसएस के साथ जो पिक्सल में कॉलम को परिभाषित करता है, मुझे इस फ़ंक्शन की आवश्यकता केवल इस.opts.width को वापस करने के लिए है।

मुझे लगता है कि हमें यह निर्धारित करने के लिए ग्रिडस्टैक में कुछ स्मार्ट की आवश्यकता होगी कि यह किस मॉडल (% या पीएक्स) में था या इसे किस मोड को बताने के लिए कॉन्फ़िगरेशन विकल्प है।

संपादित करें: यह उतना आसान नहीं हो सकता है। मैं इसे देखने के लिए अब इसके साथ खेल रहा हूं।

संपादित करें 2: मेरा 5 मिनट का सुधार। यह, कम से कम अभी तक, इसके प्रति उत्तरदायी प्रवाह नहीं है।
डिफ: सपोर्ट-पिक्सेलविड्थ

randellhodges 23 मार्च 2017

इसे पसंद करेंगे, क्योंकि 4k स्क्रीन में ग्रिड देखने में समस्या है, कभी-कभी आप चाहते हैं कि वेब पेज चौड़ा हो, इस स्थिति में आपको एक नया ग्रिड स्थापित करना होगा जहां आकार काफी आधा हो, और फिर जब आप आकार बदलें पृष्ठ के नीचे एक रिज़ॉल्यूशन जो अन्य का उपयोग करेगा वह चौड़ाई बहुत संकीर्ण है।

Matthew-Bonner 7 मई 2017

मैं भी इस सुविधा को ग्रिडस्टैक द्वारा समर्थित होते देखना बहुत पसंद करूंगा

ronvanpol 12 मई 2017

यहां वही है, मैं इसे ग्रिड स्टैक में देखना पसंद करूंगा।

इस बीच, मैं इसे अपने साधारण उपयोग के मामले (एक पंक्ति, अक्षमऑन कॉलम मोड, ऊंचाई = 1) के लिए हैक करने में सक्षम था।
सभी टाइलों को 100px चौड़ा करने के लिए (मेरी सभी टाइलें चौड़ाई = 1 हैं, इसे किसी भी चौड़ाई के लिए करना कठिन नहीं होना चाहिए):
सीएसएस में
$tile-width: 100px; /*100px*/ .grid-stack-item[data-gs-width="1"] { width: $tile-width; min-width: $tile-width; max-width: $tile-width; } .grid-stack-item { <strong i="9">@for</strong> $i from 1 through 20 { &[data-gs-x='#{$i}'] { left: $i * $tile-width; } } }
निर्माता:
const width = $('.grid-stack').outerWidth(); this.grid = $('.grid-stack').gridstack({ auto: false, cellHeight: 80, disableResize: true, verticalMargin: 0, width: Math.round(width/100), height: 1, disableOneColumnMode: true }).data('gridstack');
आकार बदलने वाले हैंडलर में चौड़ाई रीसेट करें
resizeHandler() { const width = $('.grid-stack').outerWidth(); const grid = $('.grid-stack').data('gridstack'); grid.setGridWidth(Math.round(width/100), true); }
हैक वर्तमान ग्रिड चौड़ाई (पीएक्स) के आधार पर चौड़ाई (कॉलम गिनती) को समायोजित करके सेलविड्थ को 100px (सीएसएस में सेट के रूप में) को मजबूर करना है।

fheidrich 19 मई 2017

👍1

आप जो कुछ भी चाहते हैं आप cellHeight सेट कर सकते हैं, और एक कंटेनर बनाने से पहले और ग्रिडस्टैक के विकल्प को पारित करने से पहले आयाम निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। इस फैशन में, आप जो भी अनुपात चाहते हैं उसे सेट कर सकते हैं और यहां तक कि विशिष्ट पिक्सेल-आधारित चौड़ाई और ऊंचाइयों को भी सेट कर सकते हैं।

radiolips 10 मई 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Gridstack.js: प्रतिशत के बजाय पिक्सेल के आधार पर एक निश्चित चौड़ाई का ग्रिड बनाना।

सभी 6 टिप्पणियाँ

संबंधित मुद्दों