Mozilla Brick and Zepto.js – Mithat Konar (the blog)

old-red-brick-wall

Raymond Camden wrote up an instructive example that shows how to use Mozilla’s Brick UI Components with vanilla Javascript. I decided to take that and modify it to use Zepto.js instead. I have no idea whether this is a good idea or not, but it’s done now so there’s no point in crying about it. Here it is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--
    From http://www.raymondcamden.com/index.cfm/2013/8/23/Brick-by-Mozilla
    Adapted to use Zepto.js by MFK.
    -->
    <title>Brick Card Demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/brick-1.0beta8.css"/>
    <script src="js/brick-1.0beta8.js"></script>
    <script src="js/zepto.min.js"></script>
    <style>
      html, body{
        height: 100%;
      }
    </style>
  </head>
  <body>

  <x-layout>
    <x-appbar>
      <div>
        <a href="" id="homeLink" title="Home">=</a>
      </div>
      <header>Brick Card Demo</header>
    </x-appbar>

    <section>
      <x-deck id="mainDeck">

        <x-card>
          <ul>
            <li>
              <a href="1" class="deckLink">Page 1</a>
            </li>
            <li>
              <a href="2" class="deckLink">Page 2</a>
            </li>
            <li>
              <a href="3" class="deckLink">Page 3</a>
            </li>
          </ul>
        </x-card>

        <x-card>
          <h1>Page 1</h1>
        </x-card>

        <x-card>
          <h1>Page 2</h1>
        </x-card>

        <x-card>
          <h1>Page 3</h1>
        </x-card>

      </x-deck>
    </section>

    <footer>
      Based on code
      copyright &copy;  2013 Raymond Camden
    </footer>
  </x-layout>

  <script>
    $(function() {
      console.log('domCom loaded (zepto.js!)');

      var deck = $('#mainDeck')[0];

      $('#homeLink').click(function(e) {
        e.preventDefault();
        deck.shuffleTo(0);
      });

      $('.deckLink').click(function(e) {
        e.preventDefault();
        var target = e.currentTarget.href.split("/").pop();
        deck.shuffleTo(target);
      });
    });
  </script>
</body>
</html>

Leave a Reply Cancel reply