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

在线预览    源码下载