jquery-ruler

    1.0.0 • Public • Published

    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

    Keywords

    Install

    npm i jquery-ruler

    DownloadsWeekly Downloads

    21

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • wallynm