第71款插件：jquery.zxxPageRuler.js在网页上制作标尺和参考线

一、插件介绍

作者感言：此插件的灵感以及UI均来自世界上最伟大的化妆师 – photoshop，例如，我们使用ctrl+R显示标尺，同时从标尺上面拖出一条参考线。标尺可以让我们测量距离，参考线可以用来对齐，或是网页格栅化，这些都是有着很实际的应用的。例如对齐，对齐可以说是页面排版几大最关键要素之一（其他诸 如对比，重复之类），有时候，我们页面写完了，可能几像素的对齐与否无法用肉眼判断，此时就可以借助于本文插件的参考线来一探究竟。

二、插件作者

张鑫旭，博客：http://www.zhangxinxu.com/

三：插件图片

四：插件参数

无

五：插件使用

六：插件JS下载及DEMO

官方链接：

http://www.zhangxinxu.com/wordpress/?p=1002

插件版本：

jquery.zxxPageRuler.1.1.js

官方JS下载：

http://www.zhangxinxu.com/study/js/jquery.zxxPageRuler.1.1.js

本站JS下载：

http://www.ijquery.cn/js/jquery.zxxPageRuler.1.1.js

官方DEMO：

例1、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo1.html

例2、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo2.html

例3、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo3.html

例4、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo4.html

官方DEMO下载：

http://www.ijquery.cn/study/demo/zxxPageRuler/zxxPageRuler.zip

七：使用教程

1、JS和CSS引用

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/zxxPageRuler/js/jquery.zxxPageRuler.1.1.js"></script>
<link rel="stylesheet" href="http://www.ijquery.cn/study/demo/zxxPageRuler/css/ruler.css" type="text/css" />

[/js]

2、示例说明

此插件不必使用HTML即可得到效果，如下是参考的demo1.html的示例

a>demo1.html

直接引用JS和CSS，按R键就可以调用出标尺，直接拖拉就可以调用出参考线；

b>demo2.html

[js]
<script type="text/javascript">
$(function(){
$.pageRuler();
});
</script>
[/js]

如上，打开页面时即可以直接调用出标尺，如图：

c>demo3.html

打开页面时，直接调用出"标尺"以及“垂直方向上的300px,500px和700px"的参考线

[js]

<script type="text/javascript">
$(function(){
$.pageRuler({
v: ["300", "500px", 700]
});
});
</script>

[/js]

如下是像素的三种表示方法，都可以使用的。如图：

d>demo4.html

点击"显示/隐藏标尺"和点击"显示参考线"

点击"显示/隐藏标尺"

[html]<button id="visRuler">显示/隐藏标尺</button>[/html]

[js]
<script type="text/javascript">
$(function(){
$("#visRuler").click(function(){
$.pageRulerToggle();
});
});
</script>

[/js]

点击"显示参考线",当然可以使用 $.pageRulerToggle() 来显示隐藏参考线。

[html]<button id="visRefLine">显示指定的参考线</button>[/html]

[js]
<script type="text/javascript">
$(function(){
$("#visRefLine").click(function(){
$.pageRuler({
v: ["300", "500px", 700]
});
});
});
</script>
[/js]