一つのHTMLでカテゴリ別に表示する内容を変えるjQueryのプラグイン

Category
： Javascript

NETTUTSさんで紹介、配布されているプラグインです。

このjQueryのプラグインは一つのHTMLファイルで、すべてを表示と属しているカテゴリのみを表示するように切り替えが出来るようになっているので、使い方などを紹介したいと思います。

framework.js使い方

Creating a "Filterable" Portfolio with jQueryのSoureceから一式ダウンロード出来ます。

head内にjquery、framework.jsを読み込ませます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/framework.js"></script>

上部のナビゲーションに使われている部分をul#filterで作り、コンテンツ部分をul#portfolioで作ります。（名前変更化。その場合framework.jsの記述も変更。）

ul#filterのli内に記述したテキスト内容と#portfolioのliにつくclass名で関連性を出しています。

なのでナビゲーション部分に使うテキストは英語（大文字可）にしないと駄目みたいです...
（日本語で入れた場合はclass名にも日本語を入れないと動作しない）

#portfolio liのclass名には小文字で記述して下さい。

動作のみの確認の為自分でid名変更をしたうえで、テキストのみのテストをしているので参考にでもして下さい。

	<ul id="navi">
		<li class="all"><a href="#">All</a></li>
		<li><a href="#">WebDesign</a></li>
		<li><a href="#">CMS</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">Javascript</a></li>
	</ul>

	<ul id="portfolio">
		<li class="cms"><a href="#">Movable Type</a></li>
        <li class="css"><a href="#">CSS</a></li>
        <li class="cms"><a href="#">WordPress</a></li>
        <li class="webdesign"><a href="#">アイコン</a></li>
        <li class="css"><a href="#">CSSハック</a></li>
        <li class="javascript"><a href="#">Javascript</a></li>
        <li class="webdesign css javascript"><a href="#">ダウンロード</a></li>
        <li class="webdesign"><a href="#">チュートリアル</a></li>
        <li class="cms"><a href="#">TypePad</a></li>
        <li class="webdesign"><a href="#">写真素材</a></li>
        <li class="javascript"><a href="#">prototype</a></li>
        <li class="css"><a href="#">CSSビギナー</a></li>
        <li class="css"><a href="#">CSSテンプレート</a></li>
        <li class="javascript"><a href="#">jQuery</a></li>
        <li class="javascript cms"><a href="#">plugin</a></li>
	</ul>