Introducing jQuery dice plugin

jQuery dice plugin is a jQuery plugin that ease the inclusion of dice inside your jQuery-based website. It is based on CSS3 and Javascript and allow you to draw 2D dice of any size without using any image.

dice build using jQuery dice plugin

>> project page on GitHub <<

How to use

Include both the css and the javascript plugin into your html page :

You can then turn any <DIV> into a die by calling the dice function :

$("#die").dice({
    size: 100, // in pixels
    val: 3, // 1, 2, 3, 4, 5, 6
    rotation: 0 // O to 359 deg
});

The dice function accepts three options :

size :

The dimensions of the die in pixels (height and width are equals)

default : 100px

val :

The face of the die (1, 2, 3, 4, 5 or 6)

default : random

rotation :

The rotation of the die in degrees. The anchor point is the middle of the die.

default : 0

Test it with the jQuery mobile demo page bellow :

demo page source code

Only the following browser are supported yet :

• Firefox
• Chrome (including Android 2.3+)
• Safari (including iPhone and iPad)