簡単にソート機能を実装することができるjQueryプラグイン「Shuffle.js」。今回は、このプラグインを使用した時に「ソートされた状態」にURLを付与する方法をご紹介します。
デモはこちら。
html
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="sortArea"> <div id="sort"> <ul> <li class="active"><a href="#all">全て</a></li> <li><a href="#red">赤</a></li> <li><a href="#blue">青</a></li> </ul> </div> <div id="itemList"> <div class="item red">赤</div> <div>青</div> </div> </div> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { $('#sort li').on('click', function() { var $this = $(this), $grid = $('#itemList'); $('#sort .active').removeClass('active'); $this.addClass('active'); $grid.shuffle($this.data('group')); }); if(document.URL.match("#red")) { $('#itemList').shuffle({ group: 'red' }); } else if(document.URL.match("#blue")) { $('#itemList').shuffle({ group: 'blue' }); } }); |
この方法を使えば、CMSが導入されていない静的なWebサイトでも、1つの一覧ページで「カテゴリ一覧」や「タグ一覧」のようなページを再現することができます。ぜひご活用ください!