ITASSIST

ちょっとした別件で必要になったので作ってみました。

利用しているサイコロ画像はイラスト素材の素材ダスさんからお借りしたので、入用な際は自前で用意するか、イラスト素材の素材ダスさんへのリンクを張ってください。

ダウンロード

http://www.itassist.info/modules/d3downloads/index.php?page=visit&cid=6&lid=7

使い方（設置方法）

設置方法は至って簡単、jquery.timer.jsを使っているのでそれと一緒にヘッダーで読み込んでおきます。

<script  type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script  type="text/javascript" src="js/jquery.timer.js"></script>
<script  type="text/javascript" src="js/jquery.dice.js"></script>

その後、実行したいイメージタグにclassかidを指定して

<img src="img/dice_1.png" id="dice"/>

ヘッダからonloadでセットします。

</pre>
<script  type="text/javascript">
$(document).ready(, function(){
$("#dice").dice();
});

</script>

使い方（ダイス実行）

後はダイスの実行開始ですが、2つの方法があります。1つはクリックイベントで自動実行する場合

もうひとつは、jQuery.triggerHandlerを使って直接呼び出す場合です。

クリックイベントはデフォルトで実装されているので、意識せずに実装するとクリックイベントでダイスが実行されます。

jQuery.triggerHandlerを使う場合はreadyでの記載を以下のようにします。

<script  type="text/javascript">
$(document).ready(, function(){
$("#dice").dice({onclick: false});
});
</script>

「onclick: true」とすることで、クリックイベントへbindされなくなります。実行するときは

$('#dice').triggerHandler("throwDice");

のように「throwDice」イベントハンドラを実行すると開始されます。

使い方（結果の取得方法）

結果の取得方法も２つあります。１つは、jQuery.dataにデータを自動で保持するように成っているためそこから取得することができます。

jQuery.data($("#dice").get(0),"dice")

ここで、データのキーとなるdiceはオプションで変更可能です。

もうひとつは、callback関数を用意して、その関数内で受取る方法です。

$(this).triggerHandler("throwDice", {callback: function (diceValue) {alert(diceValue);}});

の用に、コールバックで指定した関数の第一引数にダイスの結果が戻ってきます。

使い方（設定変更方法）

以下の項目を引数で設定できます。

• dice1: “img/dice_1.png”, // ダイスの１の目の画像
• dice2: “img/dice_2.png”, // ダイスの2の目の画像
• dice3: “img/dice_3.png”, // ダイスの3の目の画像
• dice4: “img/dice_4.png”, // ダイスの4の目の画像
• dice5: “img/dice_5.png”, // ダイスの5の目の画像
• dice6: “img/dice_6.png”, // ダイスの6の目の画像
• maxdice: 6, // ダイスの目の数
• onclick: true, // クリックイベントをセットするかどうか
• //callback: // コールバック関数
• oneDuration: 10, // 一回の変化の秒数
• duration: 1000, // ダイスが廻っている時間
• dataKey: “dice” // jQuery.dataのキー