The jquery.diamonds.js from bhimmel

diamonds.js

Tired of straight grids where everything is vertically and horizontally aligned? Why not tilt everything by 45 degrees? This jQuery plugin lets you easily do just that!

Features

Auto resizes
No images, all css
AMD aware plugin
Test coverage!

Demo

See the demo page or checkout /demo/demo.html in this repo.

Usage

Add this to your <head>

<link rel="stylesheet" type="text/css" href="diamonds.css" />

Add this right before your closing </body>

<script type="text/javascript" src="jquery.diamonds.js"></script>

Note: The path may change depending on where you put the css file.

html

<div class="diamondswrap">
    <a href="#" class="item">Hello world</a>
    <a href="#" class="item">Hello</a>
    <a href="#" class="item">Hello</a>
    ... many more items!
</div>

$(".diamondswrap").diamonds({
    size: 250, // Size of the squares
    gap: 1 // Pixels between squares
});

Options

size

Size of diamonds in pixels. Both width and height. Only squares allowed.

gap

Pixels between each square. The size of the squares will be reduced by this gap.

itemSelector

The css selector to use to select diamonds-items.
Default: .item

hideIncompleteRow

Hide last row if there are not enough items to fill it completely.
Default: false

autoRedraw

Auto redraw diamonds when it detects resizing.
Default: true

Methods

Intialize

$(".diamondswrap").diamonds({
    size: 250, // Size of the squares
    gap: 1 // Pixels between squares
});

Note: Calling any other method before diamonds has been initialized will cause an error to be thrown.

draw

Manually trigger a redraw.

$(".diamondswrap").diamonds("draw");

setOptions

Change options after initialize

$(".diamondswrap").diamonds("setOptions", {
    hideIncompleteRow: true
});

Note: Changing options will trigger a redraw since size, gap, or hideIncompleteRow might have changed..

destroy

Destroy diamonds and return everything to how it was.

$(".diamondswrap").diamonds("destroy");

Events

All events are prefixed with diamonds:. Which means that this is how you listen to a diamonds event:

$(...).on("diamonds:beforeDraw", function() { ... })

Some events are also called with arguments. One such event is beforeSetOptions. This is how you catch the arguments.

$(...).on("diamonds:beforeSetOptions", function(event, newOptions) {
	newOptions.gap = 10; // Always set the gap to 10
});

Some events can also abort the method by calling .preventDefault, for example if you want to prevent all drawing.

$(...).on("diamonds:beforeDraw", function(event) {
	e.preventDefault(); // Stops the draw method
});

As a rule of thumb, all events starting with before or on can abort the method.

Events	Arguments	Can abort method
beforeInit		yes
afterInit		no
beforeStopAutoRedraw		yes
afterStopAutoRedraw		no
beforeStartAutoRedraw		yes
onAutoResize	`{ before: ... , current: ... }`	yes
afterStartAutoRedraw		no
beforeSetOptions	new options	yes
afterSetOptions	new options	no
beforeDraw		yes
afterDraw		no
beforeDestroy		yes
afterDestroy		no

bhimmel / jquery.diamonds.js Goto Github PK

jquery.diamonds.js's Introduction