jquery-ruler

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