🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Ruler is a jQuery & jQuery UI extension that enables Photoshop-style vertical and horizontal rulers on your webpage or a specified container.

jQuery-UI Ruler

Documentation

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


You May Also Like