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

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

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

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

demo page

…ここからが続き

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>

demo page

Comments

スーツ

スーツ

初めて投稿致します。
いつも参考にさせて頂いております。
上記のプラグインを使用したいと思っているのですが、
注意書きに
>>なのでナビゲーション部分に使うテキストは英語(大文字可)にしないと>>駄目みたいです...
>>(日本語で入れた場合はclass名にも日本語を入れないと動作しない)
と記載されておりますが、
つまりは日本語表記も可能なのでしょうか?

日本語表記が可能ならば、大変お手数ですが方法を掲載して頂く事はできますでしょうか?ご検討下さい。

2010年08月24日 05:48

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article