参照:Quick and Easy Filtering with jQuery
要素のCSSクラス名で簡易フィルターを実装するjQueryプラグイン。
リンクをクリックすると、関連付けられたクラス名でフィルタリングして表示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { var ulOptions = '<ul id="options"> <li><a href="#" class="all">All</a></li><li><a href="#" class="php">PHP</a></li><li><a href="#" class="css">CSS</a></li><li><a href="#" class="js">JavaScript</a></li><li><a href="#" class="html">HTML</a></li></ul>'; var $links = $('#links'); $links.before(ulOptions) .children('li') .addClass('all') .filter('li:odd') .addClass('odd'); $('#options li a').click(function() { var $this = $(this), type = $this.attr('class'); $links.children('li') .removeClass('odd') .hide() .filter('.' + type) .show() .filter(':odd') .addClass('odd'); return false; }); }); </script> <!-- CSS --> <style type="text/css"> #options { border:1px solid #e5e5e5; padding:8px; } #options li { display:inline; border-right:1px solid #e5e5e5; padding-right:10px; margin-right:10px; background:none; border:none; color:#ab1313; text-align:left; } #options li:last-child { border-right:none; } #options li a { text-decoration:none; color:#292929; outline:none; } #options li a:hover { text-decoration:underline; } #options li a:focus, #options li a:hover { font-weight:bold; } #links { margin:0; padding:0; clear:both; } #links .odd { background:#e5e5e5; border-top:1px solid white; } #links li { list-style:none; line-height:1.5em; padding:5px; padding-left:10px; background:#f4f4f4; text-align:left; border-bottom:1px solid #ddd; } #links li a { text-decoration:none; color:#353535; font-size:14px; } #links li a:focus, #links li a:hover { font-weight:bold; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <div id="container"> <p>参照:<a href='http://net.tutsplus.com/videos/screencasts/quick-and-easy-filtering-with-jquery/'>Quick and Easy Filtering with jQuery</a></p> <p> 要素のCSSクラス名で簡易フィルターを実装するjQueryプラグイン。<br> リンクをクリックすると、関連付けられたクラス名でフィルタリングして表示します。 </p> </div> <!-- CODE --> <ul id="links"> <li class="php html"><a href="#">How to do something great with PHP and HTML</a></li> <li class="php"><a href="#">How to do something great with PHP</a></li> <li class="css"><a href="#">How to do something great with CSS</a></li> <li class="js"><a href="#">How to do something great with JavaScript</a></li> <li class="html"><a href="#">How to do something great with HTML</a></li> <li class="php html"><a href="#">How to do something great with PHP and HTML</a></li> <li class="php"><a href="#">How to do something great with PHP</a></li> <li class="css"><a href="#">How to do something great with CSS</a></li> <li class="js"><a href="#">How to do something great with JavaScript</a></li> <li class="html"><a href="#">How to do something great with HTML</a></li> <li class="php html"><a href="#">How to do something great with PHP and HTML</a></li> <li class="php"><a href="#">How to do something great with PHP</a></li> <li class="css"><a href="#">How to do something great with CSS</a></li> <li class="js"><a href="#">How to do something great with JavaScript</a></li> <li class="html"><a href="#">How to do something great with HTML</a></li> <li class="php html"><a href="#">How to do something great with PHP and HTML</a></li> <li class="php"><a href="#">How to do something great with PHP</a></li> <li class="css"><a href="#">How to do something great with CSS</a></li> <li class="js"><a href="#">How to do something great with JavaScript</a></li> <li class="html"><a href="#">How to do something great with HTML</a></li> </ul> <!-- CODE / --> </div> </body> </html>