jade/page-contents/scrollspy_content.html - v1-dev - githubmirror/materialize

jade/page-contents/scrollspy_content.html
194 строки6 KB
Alvin Wang
Fix syntax in js init doc examples
03 май 2018, 01:40
03 май 2018, 01:401f5a935
<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <div id="introduction" class="section scrollspy">
        <p class="caption">
          Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our
          main demo of this is our table of contents on every documentation page to the right. Clicking on these links will
          also scroll the page to that element.
        </p>


        <pre><code class="language-markup">
  &lt;div class="row">
    &lt;div class="col s12 m9 l10">
      &lt;div id="introduction" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>

      &lt;div id="structure" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>

      &lt;div id="initialization" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>
    &lt;/div>
    &lt;div class="col hide-on-small-only m3 l2">
      &lt;ul class="section table-of-contents">
        &lt;li>&lt;a href="#introduction">Introduction&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#structure">Structure&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#initialization">Intialization&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/div>
  &lt;/div>
        </code></pre>
      </div>

      <div id="initialization" class="scrollspy section">
        <h3 class="header">Initialization</h3>
        <pre><code class="language-javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.scrollspy').scrollSpy();
  });
        </code></pre>
        <br>
      </div>


      <div id="options" class="scrollspy section">
        <h3 class="header">Options</h3>
        <table class="striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Default</th>
              <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>throttle</td>
              <td>Number</td>
              <td>100</td>
              <td> Throttle of scroll handler.</td>
            </tr>
            <tr>
              <td>scrollOffset</td>
              <td>Number</td>
              <td>200</td>
              <td>Offset for centering element when scrolled to.</td>
            </tr>
            <tr>
              <td>activeClass</td>
              <td>String</td>
              <td>'active'</td>
              <td>Class applied to active elements.</td>
            </tr>
            <tr>
              <td>getActiveElement</td>
              <td>Function</td>
              <td></td>
              <td>Used to find active element.</td>
            </tr>
          </tbody>
        </table>
        <br>
        <h5>getActiveElement</h5>
        This is the default function used for finding the active element where id is the id of the scrollspy element. It returns
        a CSS selector of the element you want marked active.
        <pre><code class="language-javascript">
  function(id) {
    return 'a[href="#' + id + '"]';
  }
        </code></pre>
      </div>


      <div id="methods" class="scrollspy section">
        <h3 class="header">Methods</h3>
        <blockquote>
          <p>Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin
            instance like this: </p>
          <pre><code class="language-javascript col s12">
  var instance = M.ScrollSpy.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.scrollspy').scrollSpy('methodName');
  */
          </code></pre>
        </blockquote>

        <h5 class="method-header">
          .destroy();
        </h5>
        <p>Destroy plugin instance and teardown</p>
        <pre><code class="language-javascript col s12">
instance.destroy();
        </code></pre>
      </div>

      <div id="properties" class="scrollspy section">
        <h3 class="header">Properties</h3>
        <table class="striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>el</td>
              <td>Element</td>
              <td>The DOM element the plugin was initialized with.</td>
            </tr>
            <tr>
              <td>options</td>
              <td>Object</td>
              <td>The options the instance was initialized with.</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>

    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss"
            id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li>
              <a href="#introduction">Introduction</a>
            </li>
            <li>
              <a href="#initialization">Intialization</a>
            </li>
            <li>
              <a href="#options">Options</a>
            </li>
            <li>
              <a href="#methods">Methods</a>
            </li>
            <li>
              <a href="#properties">Properties</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>