jQueryUI.Ruler是一款基于jQuery UI的仿Photoshop界面的屏幕标尺插件。该插件可以在一个DOM元素上使用屏幕标尺,这个元素可以是body元素,也可以是一个div元素。它的特点有:

  • 支持多种尺寸单位:px, mm, cm, in。
  • 支持三种刻度模式:major, minor, micro。
  • 支持鼠标跟踪刻度。
  • 支持子div生成刻度。

使用方法

使用这个提示框插件首先需要引入jQuery和jquery.ui.ruler.js,jquery.ui.ruler.css文件。

<link rel="stylesheet" href="jquery.ui.ruler.css">
<script src="jquery.js"></script>
<script src="jquery.ui.ruler.js"></script>                
              
调用插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该屏幕标尺插件。

// 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'
});               
              

配置参数

下面是该屏幕标尺插件的一些可用参数:

  • unit:屏幕标尺的公制单位。默认值为:px
    • px:像素。
    • mm:毫米。
    • cm:厘米。
    • in:英寸。

    例如:

    // getter
    var tickMajor = $('.selector').ruler('option', 'tickMajor');
    // setter
    $('.selector').ruler('option', 'tickMajor', '50');  
    
  • tickMajor:屏幕标尺的主要刻度间隔。默认值为100,0表示禁用。
  • 例如:

// getter
var tickMajor = $('.selector').ruler('option', 'tickMajor');
// setter
$('.selector').ruler('option', 'tickMajor', '50');  
  • tickMinor:屏幕标尺小刻度间隔。默认值为20,0表示禁用。

    例如:

    // getter
    var tickMinor = $('.selector').ruler('option', 'tickMinor');
    // setter
    $('.selector').ruler('option', 'tickMinor', '50');  
    
  • tickMicro:屏幕标尺的微刻度间隔。默认值为10,0表示禁用。

    例如:

    // getter
    var tickMicro = $('.selector').ruler('option', 'tickMicro');
    // setter
    $('.selector').ruler('option', 'tickMicro', '50');  
    
  • showLabel :显示或隐藏屏幕标尺主刻度的值。默认值为true
  • 方法

    refresh():刷新所有的屏幕标尺容器。

    $('.selector').ruler('refresh');