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');
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!