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

jade/page-contents/pushpin_content.html
210 строк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">Pushpin is our fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges. You
          can check out our live example: the fixed table of contents on the right. </p>

        <a href="pushpin-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>

        <br>
        <br>
        <h5>Demo Code</h5>
        <pre><code class="language-javascript">
  $('.pushpin-demo-nav').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top: $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
  });
        </code></pre>
        <pre><code class="language-css">
  // Only necessary for window height sized blocks.
  html, body {
    height: 100%;
  }
        </code></pre>

      </div>

      <div id="initialization" class="section scrollspy">
        <h3 class="header">Initialization</h3>
        <p>Here is a sample initialization of pushpin. Take a look at what the options are and customize them to your needs.</p>
        <pre><code class="language-javascript col s12">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.pushpin');
    var instances = M.Pushpin.init(elems, options);
  });

  // Or with jQuery

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

      <div id="options" class="section scrollspy">
        <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>top</td>
              <td>Number</td>
              <td>0</td>
              <td>The distance in pixels from the top of the page where the element becomes fixed.</td>
            </tr>
            <tr>
              <td>bottom</td>
              <td>Number</td>
              <td>Infinity</td>
              <td>The distance in pixels from the top of the page where the elements stops being fixed.</td>
            </tr>
            <tr>
              <td>offset</td>
              <td>Number</td>
              <td>0</td>
              <td>The offset from the top the element will be fixed at.</td>
            </tr>
            <tr>
              <td>onPositionChange</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback function called when pushpin position changes. You are provided with a position string.</td>
            </tr>
          </tbody>
        </table>
      </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.Pushpin.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.

    $('.target').pushpin('methodName');
    $('.target').pushpin('methodName', paramName);
  */
        </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>
            <tr>
              <td>originalOffset</td>
              <td>Number</td>
              <td>Original offsetTop of element.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="classes" class="section scrollspy">
        <h3 class="header">CSS Classes</h3>
        <p class="caption">A pushpinned element has 3 states. One above and below the scrolling threshold, and the pinned state where the element
          becomes fixed. Because pushpin changes positioning, chances are your element will look different when the states
          change. Use these css classes to correctly style your 3 states.</p>
        <pre><code class="language-css col s12">
  // Class for when element is above threshold
  .pin-top {
    position: relative;
  }

  // Class for when element is below threshold
  .pin-bottom {
    position: relative;
  }

  // Class for when element is pinned
  .pinned {
    position: fixed !important;
  }
        </code></pre>
      </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">Initialization</a>
            </li>
            <li>
              <a href="#options">Options</a>
            </li>
            <li>
              <a href="#methods">Methods</a>
            </li>
            <li>
              <a href="#properties">Properties</a>
            </li>
            <li>
              <a href="#classes">CSS classes</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>