js-css网页标尺,还担心肉眼看不清是否对齐吗?

前端应用 Views
前天看到某大神的博客 发现这东东 于是我就弄来自己项目上。。。

一、为什么想到写此插件

此插件的灵感以及UI均来自世界上最伟大的化妆师 – photoshop,例如,我们使用ctrl+R显示标尺,同时从标尺上面拖出一条参考线,结果就会如下图所示:
photoshop下的标尺与参考线 张鑫旭-鑫空间-鑫生活

标尺可以让我们测量距离,参考线可以用来对齐,或是网页格栅化,这些都是有着很实际的应用的。例如对齐,对齐可以说是页面排版几大最关键要素之一(其他诸如对比,重复之类),有时候,我们页面写完了,可能几像素的对齐与否无法用肉眼判断,此时就可以借助于本文插件的参考线来一探究竟。
腾讯首页参考线对齐 张鑫旭-鑫空间-鑫生活

二、插件功能简介

此插件分为两大功能,标尺和参考线,就操作而言,参考线占据了大部分的操作。标尺可以使用快捷键或是专门的js方法调用显示(这在后面会详细介绍)。与photoshop软件的使用一样,参考线可以通过点击标尺同时拖移创建,或是使用对话框精确创建。见下图:
拖动创建参考线 张鑫旭-鑫空间-鑫生活点击标尺拖动创建参考线 张鑫旭-鑫空间-鑫生活对话框创建参考线 张鑫旭-鑫空间-鑫生活

创建好的参考线可以自由拖拽移动。
标尺自适应于浏览器窗口大小,以像素为单位。

三、插件的调用

插件的脚本调用很简单,只需要在页面的任意位置嵌入如下的JavaScript文件链接即可:


无需书写其他的js脚本,就可以使用此插件了,具体如何使用,您需要了解此插件的几个快捷键。

插件的快捷键

快捷键 作用 其他说明
R 显示与隐藏标尺
; 显示与隐藏参考线
\ 显示新建参考线对话框 如果标尺未曾显示,则无效
Enter 确定新建参考线 只在新建对话框显示时有效
Esc 隐藏整个标尺与参考线

换句话讲,只要您调用了插件js文件,您只要按下”R”键,就可以在您的页面上显示标尺了,然后您可以通过点击(鼠标不松开)并拖动鼠标就可以新建参考线,或是按下”\”键输入数值新建参考线。
拖移参考线 张鑫旭-鑫空间-鑫生活

由于此插件有着不少UI效果,所以CSS文件与图片是少不了的。您可以在头部调用如下的CSS链接:


至于图片,较多(7张背景图外加两个鼠标图形)。不过我已经将本插件的各个资源(含四个demo)都打包了

四、插件进一步的使用

单纯的快捷键操作显然不能满足我们的实际需求。所以呢,我在写插件的时候,预留了一些js方法,可以直接调用来控制插件,具体方法参见下表格:

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

现在一个一个举例说明:

首先,我们可以直接调用$.pageRuler();方法,让页面加载即显示标尺,代码如下:







批量新建参考线

photoshop中新建参考线只能一个一个的新建,所以,每当我要画20*20像素的网格时,总要重复很多琐碎的工作。但是,在web页面上,在本插件中,这个问题绝不存在。同时,我们还要考虑到另外一个问题,由于此插件是js写的,纯粹的客户端东西,比如使用对话框新建的参考线页面刷新后就没了,假如我们想要在网页制作时,每次预览都显示指定的参考线怎么办呢?

不难解决。我这个插件最实用和潜力之处就是可以让每次页面刷新都可以显示您指定的参考线,无需每次重新新建,$.pageRuler();方法中留有一个参数接口:$.pageRuler(params);,这里的params为一个对象,此对象的内部项有着固定的名称和格式(这是需要注意的,否则可能没有效果),到底是什么格式呢,我想,您看到下面的示例代码就应该清楚了:

$(function(){
    $.pageRuler({
        v: ["300", "500px", 700],
        h: ["450px"]
    });		   
});

其中,params对象只识别”v”, “h”两个名称,后面的数据必须是数组格式,数组里面的数据格式很自由,可以无单位,可以是字符串,也可以是数值。上面的示例代码所产生的效果就是:DOM加载完毕后即显示标尺,同时垂直方向上在”300px”, “500px”, “700px”的地方显示三条参考线,水平方向上在”450px”的地方显示一条水平参考线。

通过按钮触发事件

默认情况下,只有通过快捷键才能控制标尺,参考线的显示。由于我在写此插件的时候预留了方法接口,所以,您在使用的时候,也是可以通过按钮实现标尺的显示与隐藏,或是批量显示参考线等。只要按照描述,调用上面表格所显示的方法就可以了。

按钮与参考线标尺 张鑫旭-鑫空间-鑫生活

此demo对应的JavaScript代码如下:







五、其他一些说明

为了降低实现的成本,同时考虑到实际情况,本插件的标尺采用的是浏览器窗口覆盖的方式实现的。也就是一个完整的div覆盖在页面上的,所以当标尺显示的时候,页面上的元素是无法点击的,但是,也不是绝对的,例如上面那个按钮的demo,按钮就在标尺层的上面。原因如下:标尺所在的box层级为1000,所以,一般情况下,元素都被刺层覆盖,而无法点击,但是,如果页面上的元素的z-index大于1000,则此元素就可以在标尺box之上显示,于是就可以点击。

例如,上面第四个demo的按钮样式就是如下:

.demo_area button{position:relative; z-index:1001;}

可以看到,其层级z-index为1001,大于1000,于是按钮就在标尺所在box上面显示,于是按钮可以点击,可以相应点击事件。如果您在切图写页面的时候,有一些鼠标经过的效果,但是标尺所在box挡住了怎么办呢?您可以按下”Esc”快捷键,此时标尺坐在box会隐藏掉,要再次显示可以按下”R”快捷键,此时标尺连同之前创建的参考线又会原封不动的显示出来的。

由于IE6不支持position:fixed属性,所以,IE6下的定位我使用了js,让其浏览器窗口显示,由于脚本本身的原因,所以IE6浏览器下,页面滚动时,标尺以及参考线会晃动。此问题较难克服。

在浏览器窗口大小改变时,标尺以及参考线也会自适应地跟着改变的。

对于快捷键,可能会存在冲突的问题,例如您在文本框中输入字母”r”,结果标尺显示(或隐藏)了,这个问题是难以避免的,想想,其实不是什么大问题,所以我就放在一边了。您其实可以通过修改js源文件中的快捷键对应的keyCode值来自定义您想要的快捷键的。

我需要说明的就这些,以后想到什么问题再补充。此插件今天刚写完,虽然修修补补了不少小问题,但是,由于时间仓促,未真正大范围实际应用,所以出现些问题是在所难免的,欢迎您及时反馈给我,将不甚感谢。

下 载 人已下载

下载说明:

1、解压密码:无

2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。

3、如果您发现文件有错,或者您有其他更好的意见、建议请给我们留言,我们会及时处理!

4、如果您遇到什么问题,也可加入本站QQ1828984798咨询!

*下载本站资源以及作品仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *

评论 --
  • 消灭零回复