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

当前位置:主页 > jQuery库 > 布局和界面 > 基于jQuery UI的仿PhotoShop界面屏幕标尺插件
基于jQuery UI的仿PhotoShop界面屏幕标尺插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-16
    阅读:
简要教程

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