This repository has been archived by the owner on Apr 4, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README
153 lines (111 loc) · 4.78 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
-----------------------------
READ ME
-----------------------------
jquery-shuffleboard
Rehan Dalal
http://www.varchr.com/projects/jquery-shuffleboard/
This a jQuery plugin that allows you to create a Shuffleboard UI component.
LIMITATIONS
===========
- Rotation will only work if you include 'jquery.transform.js' or
'jquery.transform.light.js'. You can get the latest version of this file from:
https://github.com/louisremi/jquery.transform.js
- When shuffling images make sure to specify their height and width to ensure
that there are no positioning bugs.
USING THE PLUGIN
================
Simply select the element(s) you wish to turn into a shuffleboard and run the
.shuffleboard() function on it. You may optionally pass it settings as in the
following examples:
$('#myShuffleboard').shuffleboard();
$('#myOtherShuffleboard').shuffleboard({ rotate: true });
See below for a full list of settings available.
Alternatively to run specific methods on the plugin use the following:
$('#myShuffleboard').shuffleboard(method, arguments);
eg: $('#myShuffleboard').shuffleboard('stop');
See below for a full list of methods available.
SETTINGS
========
The following settings are available for the plugin:
- autoStart (boolean) [Default: true]
Set to true to make the shuffleboard begin shuffling automatically.
- animateRotation (boolean) [Default: true]
If 'rotate' is set to true, this will animate the rotation on each shuffle.
- corner (string) [Default: 'nearest']
This determines which corner of the container the items will be shuffled over.
(Values: 'nearest', 'topleft', 'topright', 'bottomright', 'bottomleft')
- direction (string) [Default: 'back']
This sets the direction in which to shuffle (ie. shuffle to the back or front)
(Values: 'back', 'front')
- easing (string) [Default: 'swing']
This sets the jQuery easing function to use on animations. See here:
http://api.jquery.com/animate/#easing
- interval (int) [Default: 1000]
This sets the interval, in milliseconds, between shuffles.
- maxRotation (int) [Default: 30]
This is the maxmimum angle of rotation when 'rotate' is set to true.
- rotate (boolean) [Default: false]
Set this to true to use a CSS3 transform to rotate the items.
- scatter (boolean) [Default: true]
This will scatter the items on creation and shuffle each item to a random
location within the bounds of the container.
- speed (int) [Default: 1000]
This is the time it take for one shuffle to be completed.
- tag (string) [Default 'img']
This sets the type of child-tag that is shuffled within the container.
CALLBACKS
=========
The following are the callbacks available for the plugin:
- afterCreate(shuffleboard)
This is called after the shuffleboard is created.
- beforeCreate(shuffleboard)
This is called before the shuffleboard is created.
- beforeDestroy(shuffleboard)
This is called before the shuffleboard is destroyed.
- afterScatter(shuffleboard)
This is called after the items are scattered on the shuffleboard.
- beforeScatter(shuffleboard)
This is called before the items are scattered on the shuffleboard.
- afterShuffle(shuffleboard, item)
This is called after an item is shuffled.
- beforeShuffle(shuffleboard, item)
This is called before an item is shuffled.
METHODS
=======
The following are the methods available for the plugin:
- create(options)
This is the function used to create a new Shuffleboard from an element. It
accepts an optional 'options' parameter which is an object containing the
settings as listed above. In addition to the settings, several callback
functions can also be set from within the options.
- destroy()
This function destroys an existing Shuffleboard.
- option(optionName)
This function gets the value of a option.
- option(optionName, optionValue)
This functions sets the value of a option.
- option(options)
This function accepts a map of option name and value pairs and sets each one.
- reindex()
This function assigns the correct z-index to all the items in the the
shuffleboard.
- scatter()
This function scatters the items around within the bounds of the shuffleboard.
It will respect CSS padding values and make sure items do not get placed
within the padding area (unless rotated).
- shuffle()
This function shuffles the next item.
- start()
This function starts the intervallic shuffling on the items.
- stop()
This function stops the intervallic shuffling of the items.
- toggle()
This function toggles the intervallic shuffling of the items.
-----------------------------
CHANGE LOG
-----------------------------
2011.08.25 - Added callbacks and the 'option' method.
2011.08.24 - Added code for CSS3 rotations and selecting the corner to shuffle
over. Fixed a bug with non-randomized shuffling. Added the 'toggle'
method.
2011.08.23 - Added to GitHub.