playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

docs : add sorting doc

pull/14/head
David DeSandro 14 years ago
parent
9f3633e2d0
commit
d9d23c3c94
7 changed files with 157 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      _includes/layout-change.js
  2. 2
      _includes/option-buttons.js
  3. 24
      _includes/sort-buttons.html
  4. 16
      _includes/sort-buttons.js
  5. 44
      _layouts/elements.html
  6. 4
      _posts/demos/2010-12-29-layout-modes.html
  7. 78
      _posts/demos/2010-12-30-sorting.html

1
_includes/layout-change.js
Unescape View File

@ -1,3 +1,4 @@
// change layout
var isHorizontal = false;
$('#layouts a').click(function(){

2
_includes/option-buttons.js
Unescape View File

@ -1,3 +1,5 @@
// switches selected class on buttons
$('#options').find('.option-set a').click(function(){
var $this = $(this);

24
_includes/sort-buttons.html
Unescape View File

@ -0,0 +1,24 @@
<h3>Sort</h3>
<ul id="sort" class="sort option-set">
<li>
<ul class="sort asc option-set floated clearfix">
<li><a href="#original-order" class="selected">original-order (asc)</a></li>
<li><a href="#name">name (asc)</a></li>
<li><a href="#symbol">symbol (asc)</a></li>
<li><a href="#number">number (asc)</a></li>
<li><a href="#weight">weight (asc)</a></li>
<li><a href="#category">category (asc)</a></li>
</ul>
</li>
<li>
<ul class="sort desc option-set floated clearfix">
<li><a href="#original-order">original-order (desc)</a></li>
<li><a href="#name">name (desc)</a></li>
<li><a href="#symbol">symbol (desc)</a></li>
<li><a href="#number">number (desc)</a></li>
<li><a href="#weight">weight (desc)</a></li>
<li><a href="#category">category (desc)</a></li>
</ul>
</li>
</ul>

16
_includes/sort-buttons.js
Unescape View File

@ -0,0 +1,16 @@
// sorting
$('#sort a').click(function(){
// get href attribute, minus the #
var $this = $(this),
sortName = $this.attr('href').slice(1),
asc = $this.parents('.sort').hasClass('asc');
// var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest );
$demo.isotope({
sortBy : sortName,
sortAscending : asc
});
// console.timeEnd( sortTest );
return false;
});

44
_layouts/elements.html
Unescape View File

@ -31,34 +31,7 @@
<li><a href="#noble-gas">noble-gas</a></li>
</ul>
<h3>Sort</h3>
<ul id="sort" class="sort option-set">
<li>
<ul class="sort asc option-set floated clearfix">
<li><a href="#original-order" class="selected">original-order (asc)</a></li>
<li><a href="#name">name (asc)</a></li>
<li><a href="#symbol">symbol (asc)</a></li>
<li><a href="#number">number (asc)</a></li>
<li><a href="#weight">weight (asc)</a></li>
<li><a href="#category">category (asc)</a></li>
</ul>
</li>
<li>
<ul class="sort desc option-set floated clearfix">
<li><a href="#original-order">original-order (desc)</a></li>
<li><a href="#name">name (desc)</a></li>
<li><a href="#symbol">symbol (desc)</a></li>
<li><a href="#number">number (desc)</a></li>
<li><a href="#weight">weight (desc)</a></li>
<li><a href="#category">category (desc)</a></li>
</ul>
</li>
</ul>
{% include sort-buttons.html %}
{% include layout-options.html %}
@ -158,20 +131,7 @@
return false;
});
$('#sort a').click(function(){
// get href attribute, minus the #
var $this = $(this),
sortName = $this.attr('href').slice(1),
asc = $this.parents('.sort').hasClass('asc');
// var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest );
$demo.isotope({
sortBy : sortName,
sortAscending : asc
});
// console.timeEnd( sortTest );
return false;
});
{% include sort-buttons.js %}
// change size of clicked element
$demo.find('.element').live('click', function(){

4
_posts/demos/2010-12-29-layout-modes.html
Unescape View File

@ -40,12 +40,10 @@ category: demos
<script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.isotope.js"></script>
<script src="../src/jquery.ui.widget.js"></script>
<script src="../js/fake-element.js"></script>
<script>
$(function(){
var $demo = $('#demo'),
masonryLayout = true;
var $demo = $('#demo');
// hacky way of adding random size classes
$demo.find('.element').each(function(){

78
_posts/demos/2010-12-30-sorting.html
Unescape View File

@ -0,0 +1,78 @@
---
layout: nil
title: Sorting
category: demos
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ page.title }}</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
</head>
<body>
<h1>{{ page.title }}</h1>
<section id="copy">
</section>
<section id="options" class="clearfix">
{% include sort-buttons.html %}
</section> <!-- #options -->
<div id="demo" class="iso-container variable-sizes">
{% for element in site.elements_best_of %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
<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(){
var $demo = $('#demo');
$demo.isotope({
itemSelector : '.element',
animationEngine : $.browser.opera ? 'jquery' : 'best-available',
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
category : function( $elem ) {
return $elem.attr('data-category');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
weight : function( $elem ) {
return parseInt( $elem.find('.weight').text().replace( /[\(\)]/g, ''), 10 );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
{% include sort-buttons.js %}
{% include option-buttons.js %}
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save