• かちびと.net

    リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelectのご紹介。クロスブラウザ対応で使いどころも結構ありそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelect

スポンサーリンク

以前にも同じようなものがありましたが、
こちらのほうが良かったのでメモ。リスト
(デモでは画像を使っています)にフィルタ
リングしてソート出来るjQueryプラグイン。
わずか2KBと軽量で、クロスブラウザ対応
です。便利そうなのでどこかで使いたい
ですね。

以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。

MobilySelect


機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。


上記は「名刺」のみの表示にした状態。


完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。

マークアップ

<div class="selecter selecter1">
	<div class="selecterBtns">
		<ul class="nolist">
			<li><a href="#" rel="all" class="active">All</a></li>
			<li><a href="#" rel="poster">Posters</a></li>
			<li><a href="#" rel="card">Business Cards</a></li>
		</ul>
	</div>

	<div class="selecterContent">
		<ul class="nolist">
			<li class="poster"><a href="#"><img src="/assets/demo/select/img/poster1.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card1.jpg" alt="" /></a></li>
			<li class="poster"><a href="#"><img src="/assets/demo/select/img/poster2.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card2.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card3.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card4.jpg" alt="" /></a></li>
			<li class="poster"><a href="#"><img src="/assets/demo/select/img/poster3.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card5.jpg" alt="" /></a></li>
			<li class="card"><a href="#"><img src="/assets/demo/select/img/card6.jpg" alt="" /></a></li>
			<li class="poster"><a href="#"><img src="/assets/demo/select/img/poster4.jpg" alt="" /></a></li>
		</ul>
	</div>
</div>

classで分ければいいみたい。

以下でデモの閲覧とダウンロードが出来ます。

MobilySelect / Demo

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services