基於jQuery UI的仿PhotoShop介面螢幕標尺外掛

skonw發表於2024-12-04
jQueryUI

線上演示 下載

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

相關文章