基于jQuery UI的仿PhotoShop界面屏幕标尺插件

在线演示  下载

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 src="jquery.ui.ruler.js">                

 调用插件

在页面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' );