Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 49 lines (48 sloc) 1.411 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="../quicksand/jquery.quicksand.js"></script>
    <script src="jquery.quicksandfilter.js"></script>
    <style>
      ul {
        width:260px;
      }
      li {
        display:inline-block;
        width:60px;
        height:60px;
        color: white;
      }
      .a {
        background-color: #8833CC;
      }
      .b {
        background-color: #33CC88;
      }
      .c {
        background-color: #CC8833;
      }
    </style>
  </head>
  <body>
    <button onclick="$('#container').quicksandfilter('')">All</button>
    <button onclick="$('#container').quicksandfilter('.a')">A</button>
    <button onclick="$('#container').quicksandfilter('.b')">B</button>
    <button onclick="$('#container').quicksandfilter('.c')">C</button>
    <button onclick="$('#container').quicksandfilter('.odd')">Odd</button>
    <button onclick="$('#container').quicksandfilter('.even')">Even</button>
    <ul id="container">
      <li class="a odd">a1</li>
      <li class="b even">b2</li>
      <li class="c odd">c3</li>
      <li class="a even">a4</li>
      <li class="b odd">b5</li>
      <li class="c even">c6</li>
      <li class="a odd">a7</li>
      <li class="b even">b8</li>
      <li class="c odd">c9</li>
      <li class="a even">a10</li>
    </ul>
  </body>
</html>
Something went wrong with that request. Please try again.