This time I will share jQuery Plugin and tutorial about Create Rotatable Elements – jQuery UI Rotatable, hope it will help you in programming stack.
| File Size: | 14.8 KB |
|---|---|
| Views Total: | 5904 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The jQuery UI Rotatable library adds the missing Rotatable functionality to jQuery UI.
The library enables a DOM element to be rotatable with a handle and works perfectly with jQuery UI’s resizable and draggable functions.
More features:
- Rotation with mouse wheel.
- Rotation with custom handle.
- Snaps rotatable element to a certain rotation.
- Custom step.
- Allows to specify an angle in degrees/radian.
- Callback functions.
How to use it:
1. Import the jQuery UI Rotatable’s JavaScript and Stylesheet into your document. Make sure you first have jQuery and jQuery UI loaded.
1 |
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css"> |
2 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> |
3 |
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> |
4 |
<script src="jquery.ui.rotatable.js"></script> |
5 |
<link rel="stylesheet" href="jquery.ui.rotatable.css"> |
2. Enable the ‘Rotatable’ functionality on your element.
1 |
<div id="target"> |
2 |
Element to Rotate |
3 |
</div> |
1 |
$('#target').rotatable(); |
3. All possible parameters to customize the ‘Rotatable’ functionality.
01 |
$('#target').rotatable({ |
02 |
03 |
// specify an angle in radians (for backward compatability) |
04 |
angle: false, |
05 |
06 |
// specify angle in degrees |
07 |
degrees: false, |
08 |
09 |
// an image to use for a handle |
10 |
handle: false, |
11 |
12 |
// where the handle should appear |
13 |
handleOffset: { |
14 |
top: 0, |
15 |
left: 0 |
16 |
}, |
17 |
18 |
// specify angle in radians |
19 |
radians: false, |
20 |
21 |
// offset the center of the element for rotation |
22 |
rotationCenterOffset: { |
23 |
top: 0, |
24 |
left: 0 |
25 |
}, |
26 |
27 |
// should the element snap to a certain rotation? |
28 |
snap: false, |
29 |
30 |
// angle in degrees that the rotation should be snapped to |
31 |
step: 22.5, |
32 |
33 |
// other transforms to performed on the element |
34 |
transforms: null, |
35 |
36 |
// should the element rotate when the mousewheel is rotated? |
37 |
wheelRotate: true, |
38 |
39 |
// a callback for during rotation |
40 |
rotate: function(event, ui) { |
41 |
}, |
42 |
43 |
// callback when rotation starts |
44 |
start: function(event, ui) { |
45 |
}, |
46 |
47 |
// callback when rotation stops |
48 |
stop: function(event, ui) { |
49 |
}, |
50 |
51 |
}); |
4. Enable & Disable the rotation.
1 |
// disable |
2 |
$('#target').rotatable('disable'); |
3 |
4 |
// re-init |
5 |
$('#target').rotatable('enable'); |
Changelog:
2020-10-16
- Normalize degrees to have values between 0 and 360
2020-02-29
- Prevent default in mouse wheel listener
