jQueryUI.Ruler
jQueryUI.Ruler is a jQuery-UI plugin that adds a photoshop-like rules to a DOM element.
Features
- Multiple units (px, mm, cm, in)
- Three types of ticks (major, minor, micro)
- Mouse track
- Supports sub-divs
Tasks
- Add support to more units
- Improve source-code
Usage
// simple initialization $('.selector').ruler(); // or use different unit and tick values $('.selector').ruler({ unit: 'mm', tickMajor: 10, tickMinor: 5, tickMicro: 1, showLabel: true, arrowStyle:'arrow' });
Documentation
###Options unit
Metric unit used by ruler. Default: px
unit | Description |
---|---|
px | pixel |
mm | millimeter |
cm | centimeter |
in | inch |
Example
// getter var unit = $('.selector').ruler('option', 'unit'); // setter $('.selector').ruler('option', 'unit', 'mm');
tickMajor
Interval of major tick. Default: 100 Note: 0 to disable
Example
// getter var tickMajor = $('.selector').ruler('option', 'tickMajor'); // setter $('.selector').ruler('option', 'tickMajor', '50');
tickMinor
Interval of minor tick. Default: 20 Note: 0 to disable
Example
// getter var tickMinor = $('.selector').ruler('option', 'tickMinor'); // setter $('.selector').ruler('option', 'tickMinor', '50');
tickMicro
Interval of micro tick. Default: 10 Note: 0 to disable
Example
// getter var tickMicro = $('.selector').ruler('option', 'tickMicro'); // setter $('.selector').ruler('option', 'tickMicro', '50');
showLabel
Show or hide major tick value Default: true Note: false or otherwise to disable
startX
Value at the origin for the horizontal ruler. Default: 0
Example
// getter var startX = $('.selector').ruler('option', 'startX'); // setter $('.selector').ruler('option', 'startX', '-200');
startY
Value at the origin for the vertical ruler. Default: 0
Example
// getter var startY = $('.selector').ruler('option', 'startY'); // setter $('.selector').ruler('option', 'startY', '-200');
###Methods refresh()
Refreshes all ruler components
Example
$('.selector').ruler('refresh');
##License Licensed under the MIT license.
##Similar projects jQuery.ruler - Add Photoshop-like rulers and mouse position to a container element using jQuery. http://ruler.hilliuse.com
RulersGuides.js - Creates Photoshop-like guides and rulers interface on a web page