jQueryプラグインで要素をキリッっと切り替える「MobilySelect」

ポートフォリオをWEB、紙・・・などと切り替えるときに使えそうなjQueryプラグインMobilySelectを紹介します。
これを導入すればユーザーへの訴求力が高まるかもしれません。
jQueryプラグインで要素をキリッっと切り替える「MobilySelect」サンプル

使用方法
MobilySelectからファイル一式をダウンロードします。
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="mobilyselect.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.class名').mobilyselect({
collection: 'all', //最初に見せるclass
animation: 'absolute', //アニメーション(plain, fade, absolute)
duration: 500, //速度
listClass: 'selecterContent', //リスト一覧のクラス
btnsClass: 'selecterBtns', //リストボタンのクラス
btnActiveClass: 'active' //アクティブ時のクラス
});
});
</script>

上記を記述したら、html側を書いていきます。
<div class="class名">
<div class="selecterBtns">
<ul class="nolist">
<li><a href="#" rel="all" class="active">All</a></li> //全部の場合classにall
<li><a href="#" rel="poster">Posters</a></li> //classがposterのみを表示
<li><a href="#" rel="card">Business Cards</a></li> //classがcardのみ表示
</ul>
</div>
<div class="selecterContent">
<ul class="nolist">
<li class="poster"><a href="#"><img src="画像パス1" /></a></li>
<li class="card"><a href="#"><img src="画像パス2" /></a></li>
</ul>
</div>
</div>
</div>

jQueryプラグインで要素をキリッっと切り替える「MobilySelect」サンプル

sponsors

「jQueryプラグインで要素をキリッっと切り替える「MobilySelect」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryプラグインで要素をキリッっと切り替える「MobilySelect」