最新消息:

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

高级页面 杨红伟 2057浏览 0评论

一、插件介绍

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

二、插件作者

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

三:插件图片

123

四:插件参数

五:插件使用

js方法 功能 其他说明
$.pageRuler(params) 显示参考线,绑定与初始化主要事件 参数params可选,作用是批量创建参考线
$.lineToggle() 显示与隐藏参考线 无参数,显示与隐藏来回切换,对应快捷键”;”
$.pageRulerHide() 隐藏整个标尺参考线内容 对应”Esc”快捷键
$.pageRulerToggle() 标尺的显示与隐藏 对应于快捷键”R”

六:插件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/demo/zxxPageRuler/demo/demo1.html

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

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

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

官方DEMO下载:

http://www.ijquery.cn/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/demo/zxxPageRuler/js/jquery.zxxPageRuler.1.1.js"></script>
<link rel="stylesheet" href="http://www.ijquery.cn/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]

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

1-2

c>demo3.html

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

[js]

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

[/js]

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

1-3

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]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址