MobilyBlocksプラグイン
続いて、MobilyBlocksプラグインを使って、クリック時に画像を円形状にスライドさせてみましょう。例えば、Webサイトのメニューを展開させる時に動きをつけて、注目させたい場合などに使えます。下記サイトからmobilyblocks.zipをダウンロードし、解凍後に作成されるmobilyblocksフォルダをpluginsにコピーします。
リスト2にMobilyBlocksプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MobilyBlocksサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/mobilyblocks/js/mobilyblocks.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
/*クリック領域の設定*/
.numbers {
display:block;
width:64px;/*クリック領域の幅*/
height:64px;/*クリック領域の高さ*/
background:url(plugins/mobilyblocks/img/numbers/iconstart.jpg) no-repeat;/*クリック領域の背景*/
cursor:pointer;
position:relative;
margin: 0 auto;
}
/*クリック要素の設定*/
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
a {
color:#fff;
}
#content {
margin:100px auto 0;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('.numbers').mobilyblocks({
animateTime: 500, // アニメーション効果のスピードを指定(ms)
zIndex: -1,// 画像の重なる順番を指定
widthMultiplier:1//中心の画像と円形スライドとの距離を指定
});
});
</script>
</head>
<body>
<h1>MobilyBlocksサンプル</h1>
<div id="content">
<!--5.classの指定-->
<div class="numbers">
<ul class="reset">
<!--6.遷移先の指定-->
<li><a href="./jQueryPlugin_MobilyBlocks_menu1.html"><img src="plugins/mobilyblocks/img/numbers/icon1.jpg" alt="アイコン画像1" /></a></li>
<li><a href="#"><img src="plugins/mobilyblocks/img/numbers/icon2.jpg" alt="アイコン画像2" /></a></li>
<li><a href="#"><img src="plugins/mobilyblocks/img/numbers/icon3.jpg" alt="アイコン画像3" /></a></li>
<li><a href="#"><img src="plugins/mobilyblocks/img/numbers/icon4.jpg" alt="アイコン画像4" /></a></li>
<li><a href="#"><img src="plugins/mobilyblocks/img/numbers/icon5.jpg" alt="アイコン画像5" /></a></li>
</ul>
</div>
</div>
</body>
</html>
まず、スライドに使用する画像をmobilyblocksフォルダ直下のimgファイルに配置します。次に、5のようにクリック領域のクラス（サンプルではid=numbers）とそこに配置する画像要素のクラス（サンプルではid=reset）を作成します。
そして、3のようにクリック領域に指定したクラス（id=numbers）に対して、クリック領域の幅（width）、クリック領域の高（height）、クリック領域の背景（background）などを指定します。また、クリック要素に指定したクラス（id=reset）に対しては、display、list-style、padding、marginなどを指定します。サンプルではクリック要素の外枠を消すために、colorを#FFF指定しています。円形スライドの設定は4のようにクリック領域（id=numbers）に対してmobilyblocksメソッドを用いて、アニメーション効果のスピードなどを指定します。
MobilyBlocksプラグインの主なオプションを表2に示します。
| オプション | 説明 | デフォルト |
| animateTime | アニメーション効果のスピードを指定（ms） | 750 |
| zIndex | 画像の重なる順番を指定 | 10 |
| widthMultiplier | 中心の画像と円形スライドとの距離を指定 | 1.2 |
MobilyBlocksプラグイン使用時の結果を、図3～図5に示します。
スライドの途中は、図4のようになります。
スライドが完了すると、図5のようになります。
画像アイコン1をクリックし、6で指定した参照先に遷移した結果が図6です。
