聖剣風メニュー

■ RingMenu ■

■ RingMenuとは？

聖剣風のメニューをwebページに追加するjavascriptのクラスです。
このページをダブルクリックすると表示されます(アイコンを作るのが面倒だったので他のページへのリンクになっています)。
#既にそういうサービスがありますが、javascriptの練習も兼ねて自作しました。
#あんまり詳しい説明は書かないので分かる人だけ使ってください。

■ 操作方法

ダブルクリック：メニューが起動します。
左クリック：選択中(一番上のアイコン)のリンク先に飛びます。
Enterキー：選択中(一番上のアイコン)のリンク先に飛びます。
右クリック：メニューを停止させます。
マウスの範囲外への移動：メニューを停止させます。
↓キー：メニューを右に回転させます。
マウスのホイールの下：メニューを右に回転させます。
↑キー：メニューを左に回転させます。
マウスのホイールの上：メニューを左に回転させます。

■ 動作環境

IE6以上、Firefox2以上、Opera9以上なら動くんじゃないでしょうか。
#IE6と2008/5/1時点で最新のFirefox、Operaで動作確認を行いました。

■ ダウンロード

右クリックで「対象をファイルに保存」でダウンロードしてください。
RingMenu.js

あとPrototypeも設置しないと動かないのでダウンロードしておいてください。
Prototype

■ 使用方法

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./RingMenu.js"></script>
<script type="text/javascript">
//ロード時にメニューを追加
window.onload=function(){
    ringMenu = new RingMenu();
    //アイコンの追加
    ringMenu.addMenu("http://angel.s234.xrea.com/pureplus/bnr_yagi1.png","http://angel.s234.xrea.com/pureplus/");
    ringMenu.addMenu("http://homepage1.nifty.com/ARUMA-C/ar^ban2.JPG","http://homepage1.nifty.com/ARUMA-C/sah.htm");
    ringMenu.addMenu("http://granite.jp/banner.gif","http://granite.jp/");
    ringMenu.addMenu("http://www.gokigenyou.info/P_banner.jpg","http://www.gokigenyou.info/");
    ringMenu.addMenu("http://www.netaro.net/~oushi/image/banner.jpg","http://www.netaro.net/~oushi/");
    ringMenu.setFrameImage("frame.gif");
    //開始
    ringMenu.minRadius = 200;
    ringMenu.init();
}
</script>

上記がこのページで使用しているサンプルです。
コードを見て分かるようにPrototypeが必須です。
addMenuメソッドで"表示するアイコン"と"リンク"を指定します。
setFrameImageメソッドで枠に使用する画像を指定します。
画像は透過pngか透過gifで作成してください。
setFrameImageメソッドで枠を指定しなかった場合、枠は表示されません。
initメソッドで設置完了です。このとき各種イベントの追加や、アイコンの追加を行っています。
2回実行したら変なことになると思われます。

各種プロパティ：
ringMenu.minRadius = 200;
これは、アイコンの表示位置の半径を設定しています。
アイコンの中心位置がマウスをクリックした位置から半径minRadiusの位置にきます。
minRadiusのデフォルトは100です。
maxRadiusは出現時の半径です(初期値500)。
ringMenu.minRadius=300;
ringMenu.maxRadius=100;
などに設定するとアイコンが外側に向けて出現します。
feedAngleは出現してからアイコンが回転する角度です(初期値180)。
0に設定するとアイコンが全く回転せずにmaxRadiusからminRadiusまで移動します。
あんまり大きい値を設定すると回転しているように見えません。

ダブルクリック以外での起動：
以下がサンプルです。

onClickイベントで以下を実行しています。
"ringMenu.posX = Event.pointerX(event);ringMenu.posY = Event.pointerY(event);ringMenu.startFeedIn();"
posXとposYで座標を設定して、startFeedInメソッドの実行でメニューを表示させます。
※ 起動中にボタンを押すと変な動きをします

■ ドキュメント

JavaDoc風ドキュメント

■ 注意事項

動作保障は出来ません。
バージョンアップ、バグフィックスは気が向いたらやるかもしれません。
ダウンロードしたソースは自由に変更してもらってかまいません。
→ボタンで回転させたいなどありましたら適当にソースを弄ってください。

■ 履歴

2008/05/03　Ver 1.0 リリース
2008/07/26　Ver 1.1 リリース(フェードイン・フェードアウトのバグ修正)

もどる