クリック時にリストを華麗に表示!jQueryプラグイン「mobilyblocks」
リストって概して味気ないですよね。
そんな部分を印象に残せたら、クリックしていただきやすくなるかもしれません。
jQueryプラグインのmobilyblocksなら、クリック時にエフェクトを伴い、華麗に表示できます。
sponsors
使用方法
mobilyblocksからファイル一式をダウンロードします。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="mobilyblocks.js" type="text/javascript"></script>
<script>
$(function () {
$('.class名').mobilyblocks({
animateTime: 500, // アニメーション速度
zIndex: 50, // z-index
widthMultiplier: 1.15 //表示リストの大きさ
});
});
</script>
上記のように記述したら、リスト部分を以下のようにします。
<div class="class名">
<ul class="reset">
<li>1</li>
<li>2</li>
<li>3</li>
<!-- etc. -->
</ul>
</div>
また適宜CSSを調整していきます。
.class名 {
display:block;
width:20px; //クリックさせる領域の幅
height:20px; //クリックさせる領域の高さ
background: #CCC; //クリックさせる領域の背景(画像も可)
position:relative;
cursor:pointer;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
クリック時にリストを華麗に表示!jQueryプラグイン「mobilyblocks」サンプル
sponsors
記事作成:2010年12月16日 10:22
記事URL:http://www.skuare.net/2010/12/jquerymobilyblocks.html
TOP > javascript > UI関連 > クリック時にリストを華麗に表示!jQueryプラグイン「mobilyblocks」
前の記事:iPhoneライクに数字をスクロールさせるJavaScript「mobiscroll」
次の記事:2010年よく使ったような気がするjQueryプラグイン8個
あなたにはこちもお勧め!
jQuery プラグインまとめ!