mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
4.7 KiB
144 lines
4.7 KiB
--- |
|
title: Index |
|
layout: nil |
|
--- |
|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>{{ site.name }}</title> |
|
|
|
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> |
|
|
|
<style media="screen"> |
|
#options > * { |
|
float: left; |
|
margin-right: 10px; |
|
} |
|
|
|
#options .option-combo { |
|
display: inline-block; |
|
|
|
} |
|
|
|
#options h2 { |
|
line-height: 34px; |
|
margin-bottom: 0; |
|
margin-right: 5px; |
|
display: inline-block; |
|
vertical-align: top; |
|
} |
|
|
|
#options ul { |
|
margin-right: 20px; |
|
display: inline-block; |
|
} |
|
</style> |
|
|
|
</head> |
|
<body> |
|
|
|
<h1>{{ site.name }}</h1> |
|
|
|
<section id="options" class="clearfix"> |
|
<div class="option-combo"> |
|
<h2>Filter:</h2> |
|
<ul id="filter" class="option-set floated clearfix"> |
|
<li><a href="#show-all" data-filter="*" class="selected">show all</a></li> |
|
<li><a href="#features" data-filter=".feature">features</a></li> |
|
<li><a href="#docs" data-filter=".doc">docs</a></li> |
|
<li><a href="#demos" data-filter=".demo">demos</a></li> |
|
</ul> |
|
</div> |
|
<div class="option-combo"> |
|
<h2>Sort:</h2> |
|
<ul id="sort" class="option-set floated clearfix"> |
|
<li><a href="#type" data-sort="original-order" class="selected">original order</a></li> |
|
<li><a href="#related" data-sort="related">related</a></li> |
|
<li><a href="#width" data-sort="width">width</a></li> |
|
</ul> |
|
</div> |
|
<div class="option-combo"> |
|
<h2>Layout: </h2> |
|
<ul id="layouts" class="option-set floated clearfix"> |
|
<li><a href="#fitRows" class="selected">fitRows</a></li> |
|
<li><a href="#verticalList">verticalList</a></li> |
|
<li><a href="#masonry">masonry</a></li> |
|
</ul> |
|
</div> |
|
</section> |
|
|
|
<ul id="super-list" class="fitRows"> |
|
|
|
<li class="feature" data-category="feature" data-related="etc"><span>An exquisite jQuery plugin for magical layouts</span></li> |
|
<li class="feature" data-category="feature" data-related="filtering"><span>Reveal & hide items with filtering</span></li> |
|
<li class="feature" data-category="feature" data-related="sorting"><span>Re–order items with sorting</span></li> |
|
<li class="feature" data-category="feature" data-related="layout"><span>Dynamic, intelligent layouts</span></li> |
|
<li class="feature" data-category="feature" data-related="animating"><span>Captivating animations</span></li> |
|
<li class="feature" data-category="feature" data-related="sorting"><span>Sort items by just about anything</span></li> |
|
<li class="feature" data-category="feature" data-related="methods"><span>Powerful methods, simple syntax</span></li> |
|
<li class="feature" data-category="feature" data-related="animating"><span>Progressively enhanced for CSS3 transforms & transitions</span></li> |
|
{% for doc in site.categories.docs reversed %} |
|
<li class="doc" data-category="doc" data-related="{{ doc.related }}"><a href=".{{ doc.url }}">Docs: {{ doc.title }}</a></li> |
|
{% endfor %} |
|
{% for demo in site.categories.demos reversed %} |
|
<li class="demo" data-category="demo" data-related="{{ demo.related }}"><a href=".{{ demo.url }}">Demo: {{ demo.title }}</a></li> |
|
{% endfor %} |
|
</ul> |
|
|
|
|
|
<script src="js/jquery-1.4.4.min.js"></script> |
|
<script src="src/mini-modernizr.js"></script> |
|
<script src="src/jquery.opto-transform.js"></script> |
|
<script src="src/jquery.smartresize.js"></script> |
|
<script src="src/jquery.isotope.js"></script> |
|
<script src="src/jquery.ui.widget.js"></script> |
|
<script> |
|
$(function(){ |
|
|
|
$list = $('#super-list'); |
|
|
|
$list.isotope({ |
|
layoutMode : 'fitRows', |
|
masonry : { |
|
columnWidth: 220, |
|
}, |
|
getSortData : { |
|
related : function( $elem ) { |
|
return $elem.attr('data-related'); |
|
}, |
|
width : function( $elem ) { |
|
return $elem.width(); |
|
} |
|
} |
|
}); |
|
|
|
$('#filter a').click(function(){ |
|
var filterName = $(this).attr('data-filter'); |
|
$list.isotope({ filter : filterName }); |
|
return false; |
|
}); |
|
|
|
$('#sort a').click(function(){ |
|
var sortName = $(this).attr('data-sort'); |
|
$list.isotope({ sortBy : sortName }); |
|
return false; |
|
}); |
|
|
|
var currentLayout = 'fitRows'; |
|
|
|
$('#layouts a').click(function(){ |
|
var layoutName = $(this).attr('href').slice(1); |
|
$list.removeClass( currentLayout ).addClass( layoutName ); |
|
currentLayout = layoutName; |
|
$list.isotope({ layoutMode : layoutName }); |
|
return false; |
|
}); |
|
|
|
{% include option-buttons.js %} |
|
|
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |