मटेरियलाइज़ में स्क्रॉलफ़ायर विकल्पों में से एक है शोस्टैगर्डलिस्ट। यह प्रत्येक सूची आइटम फॉर्म को बाएं से दाएं स्लाइड करता है। क्या उन्हें दाएं से बाएं स्लाइड करना संभव है?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<h3>Scroll down</h3>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<ul id="staggered-test">
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
        </ul>

जावास्क्रिप्ट कॉल फंक्शन

 var options = [

      {selector: '#staggered-test', offset: 400, callback: function(el) {
        Materialize.showStaggeredList($(el));
      } }

    ];
    Materialize.scrollFire(options);

https://jsfiddle.net/2qg18zzb/

jsfiddle उदाहरण बाएं से दाएं है, मुझे इसे दाएं से बाएं बनाना है

1
Shuvashish Sarker 5 मार्च 2017, 12:14

1 उत्तर

सबसे बढ़िया उत्तर

मुझे मेरा समाधान मिला ...

मुझे materialize.js संपादित करना है। मैं बीटा रिलीज़ v0.98.0 का उपयोग कर रहा हूं।

मेरी materialize.js लाइन 4757 में translateX: "-100px" को translateX: "100px" में बदलें

इसलिए मुख्य रूप से शोस्टैगर्डलिस्ट फ़ंक्शन संपादित करें:

 Materialize.showStaggeredList = function(selectorOrEl) {
    var element;
    if (typeof(selectorOrEl) === 'string') {
      element = $(selectorOrEl);
    } else if (typeof(selectorOrEl) === 'object') {
      element = selectorOrEl;
    } else {
      return;
    }
    var time = 0;
    element.find('li').velocity(
        { translateX: "100px"},
        { duration: 0 });

    element.find('li').each(function() {
      $(this).velocity(
        { opacity: "1", translateX: "0"},
        { duration: 800, delay: time, easing: [60, 10] });
      time += 120;
    });
  };
0
Shuvashish Sarker 11 मार्च 2017, 19:46