formstone/src/docs/pagination.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<script>
  var $demoOutput;

  Formstone.Ready(function() {
    $demoOutput = $(".demo_output");

    $(".demo_pagination").on("update.pagination", function(e, page) {
      $demoOutput.prepend('<strong>Index: </strong>' + page + '</span><br>');
    });
  });
</script>

<div class="demo_container">
  <div class="demo_example">
    <nav class="js-pagination demo_pagination">
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
      <a href="#4">4</a>
      <a href="#5">5</a>
      <a href="#6">6</a>
      <a href="#7">7</a>
      <a href="#8">8</a>
      <a href="#9">9</a>
      <a href="#10">10</a>
    </nav>
    <div class="demo_output form_textarea"></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;pagination&quot;&gt;
&Tab;&lt;a href=&quot;1.html&quot;&gt;1&lt;/a&gt;
&Tab;&lt;a href=&quot;2.html&quot;&gt;2&lt;/a&gt;
&Tab;&lt;a href=&quot;3.html&quot;&gt;3&lt;/a&gt;
&Tab;&lt;a href=&quot;4.html&quot;&gt;4&lt;/a&gt;
&Tab;&lt;a href=&quot;5.html&quot;&gt;5&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".pagination").pagination();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Active Page</h4>
<div class="demo_container">
  <div class="demo_example">
    <nav class="js-pagination">
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
      <a href="#4">4</a>
      <a href="#5" data-pagination-active="true">5</a>
      <a href="#6">6</a>
      <a href="#7">7</a>
      <a href="#8">8</a>
      <a href="#9">9</a>
      <a href="#10">10</a>
    </nav>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;pagination&quot;&gt;
&Tab;&lt;a href=&quot;1.html&quot;&gt;1&lt;/a&gt;
&Tab;&lt;a href=&quot;2.html&quot;&gt;2&lt;/a&gt;
&Tab;&lt;a href=&quot;3.html&quot; data-pagination-active=&quot;true&quot;&gt;3&lt;/a&gt;
&Tab;&lt;a href=&quot;4.html&quot;&gt;4&lt;/a&gt;
&Tab;&lt;a href=&quot;5.html&quot;&gt;5&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".pagination").pagination();</code></pre>
  </div>
</div>

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <nav class="js-pagination" data-pagination-options='{"theme":""}'>
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
      <a href="#4">4</a>
      <a href="#5">5</a>
      <a href="#6">6</a>
      <a href="#7">7</a>
      <a href="#8">8</a>
      <a href="#9">9</a>
      <a href="#10">10</a>
    </nav>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;nav class=&quot;pagination&quot;&gt;
&Tab;&lt;a href=&quot;1.html&quot;&gt;1&lt;/a&gt;
&Tab;&lt;a href=&quot;2.html&quot;&gt;2&lt;/a&gt;
&Tab;&lt;a href=&quot;3.html&quot;&gt;3&lt;/a&gt;
&Tab;&lt;a href=&quot;4.html&quot;&gt;4&lt;/a&gt;
&Tab;&lt;a href=&quot;5.html&quot;&gt;5&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".pagination").pagination({
  theme: ""
});</code></pre>
  </div>
</div>