jQuery Plugins: tossnCuber

October 15, 2019

Beispiele Seitenanfang

Beispiel 1

tossnCuber mit roter Hintergrundfarbe:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#E44D3E',
});

ausprobieren!

 

Beispiel 2

tossnCuber mit Hintergrundbild und zufälliger Anordnung der einzelenen Würfel:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
});

ausprobieren!

 

Beispiel 3

tossnCuber innerhalb des Elements mit der ID "blueBoxOnTheRight":

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	parent: $('#blueBoxOnTheRight'),
	tileSize: 50,
	onStart: function() {
		window.scrollTo(0, $('#blueBoxOnTheRight').offset().top);
	},
});

ausprobieren!

 

Beispiel 4

tossnCuber mit Hintergrundbild und ohne zufälliger Anordnung der einzelenen Würfel:

$('button#toggleCuber').tossnCuber({
	backgroundImage: 'images/bgimage.jpg',
	random: false,
});

ausprobieren!

 

Beispiel 5

Der Inhalt der Seite wird geändert, nachdem tossnCuber abgeschlossen ist:

$('button#toggleCuber').tossnCuber({
	backgroundColor: '#DA5D2E',
	onStart: function() {
		window.scrollTo(0, 0);
	},
	onComplete: function() {
		var html = '<h1>This is the new content!</h1>';
		html += '<p><a href="tossncuber.html">zurück</a></p>';
		$('#content').html(html);
	},
});

ausprobieren!

 

How to use Seitenanfang

1. jQuery laden

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. tossnCuber laden

<script type="text/javascript" src="tossnCuber/js/tossn-cuber.js"></script>

3. Ein Link- oder Buttonelement erstellen

<a href="#" class="toggleCuber">my link</a>

4. Das Plugin mithilfe eines jQuery Selektors ausführen

$(document).ready(function() {
	$('a.toggleCuber').tossnCuber({
		backgroundImage: 'images/bgimage.jpg',
	});
});

Globale Optionen Seitenanfang

Callback Funktionen Seitenanfang