Skip to content

Latest commit

 

History

History
88 lines (56 loc) · 1.79 KB

README.md

File metadata and controls

88 lines (56 loc) · 1.79 KB
Raw

jQuery UI Rotatable Interaction

jquery-ui-rotatable

About

A jQuery UI Interaction which rotates any element by using CSS transform rotate(). Inspired by jQuery UI Resizable and Aidan Rogers's (godswearhats) jquery-ui-rotatable

Features

  • Supports CSS 2D transforms (only 2D)
  • Rotation by mouse wheel
  • Rotation with/without handle
  • Compatible with other jQuery UI widgets and interactions included Draggable and Resizable
  • Compatible with Dave Furfero's jQuery UI Touch Punch
  • All angles in degrees
  • "alsoRotate" extension (under construction)
  • "animate" extension (under construction)

Requirements

  • jQuery UI v1.9.2 Core
  • jQuery UI v1.9.2 Core - Widget
  • jQuery UI v1.9.2 Core - Mouse

CDN

.

Options

{
    disabled: false,
    angle: 0,
    handle: true,
    handleElementSelector: '<div></div>',
    rotationOriginPosition: {
        top: null,
        left: null
    },
    snap: false,
    snapStep: 22.5,
    rotate: function (event, ui) {}, // callback while rotating
    start: function (event, ui) {}, // callback when rotation starts
    stop: function (event, ui) {}, // callback when rotation stops
    wheel: true,
    wheelStep: 7.5
}

Used CSS Classes

.ui-rotatable {}
.ui-rotatable-rotating {}
.ui-rotatable-handle {}

Usages

$('#foo .bar').rotatable();

$('#foo .bar').resizable().rotatable().draggable();

$('#foo .bar').rotatable({ angle: 30 });

Demo

(coming soon)

Thanks

Thanks to jQuery UI Development Team (https://jqueryui.com/about/)

Thanks to Aidan Rogers (https://github.com/godswearhats/jquery-ui-rotatable)

License

Released under the MIT license, like jQuery

Authors

Abdullah Pazarbasi http://www.abdullahpazarbasi.com