Intro.js使用心得

为什么要使用 Intro.js

下面摘自官网

When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

很好理解,主要就是「如果一个新的用户访问您的网站或者您的网站有一个新的功能上线的时候,可以做一个一步一步引导的提示,帮助用户迅速发现新功能」,我最近做的项目,刚好就有相同的需求,就顺便研究了下,分享给大家。

如何使用 Intro.js

  1. 下载最新版 Intro.js
  2. 解压后,找到 intro.js 和 introjs.css 两个文件,并引入到项目中
  3. 在需要进行引导的节点上增加对应属性,详细属性可查看官方文档
1
<div id="first" data-intro='欢迎大家关注我的博客!' data-position = 'right' data-step = '1'></div>

属性介绍:

  • data-intro:引导提示的内容
  • data-position:引导提示框的位置,默认是在下方,但是如果功能特别靠近页面底部的话,就会遮挡,所以需要修改位置
  • data-step:指定当前引导提示是第几步
  1. 调用开始方法
1
introJs().start();

举个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function intro(){
try {

//对cookie中内容进行判断,如果已经提示过,则不在提示
var intro_cookie = $.cookie("intro_cookie_name");
if(!!intro_cookie&&'true'===intro_cookie){
return;
}

//动态给页面增加提示内容,此处需要注意的是,如果不设置data-step,提示的顺序不一定是从上到下。
$("#blankPanela7f19").attr("data-intro","可对卷宗内容直接检索啦");
$("#blankPanelTssp").attr("data-intro","如有原审和庭审视频,可以直接查看啦").attr("data-position","right");
$("#blankPanelc46eb").attr("data-intro","卷宗目录树可以直接查看材料页码和附件内容啦").attr("data-position","right");
$("#blankPanelYljzIntro").attr("data-intro","卷宗目录树可以直接查看材料页码和附件内容啦").attr("data-position","left");

//设置完成时事件和退出时事件,引导提示完成后,向cookie中添加控制需要的内容
var introjs = introJs().oncomplete(introComplete);
introjs = introjs.onexit(introComplete);
introjs.start();
}
catch(err) {
//加入异常控制,防止因为引导提示出现异常,导致整个页面无法使用
introComplete();
}
}

/**
* 引导提示完成时脚本
* */
function introComplete(){
//使用此方法需要引入:jquery.cookie.js
$.cookie("intro_cookie_name", 'true', { expires: 1000 });
}

这里需要注意一下增加引导提示完成时事件的写法,官方 API 中写法如下:

1
2
3
introJs().oncomplete(function() {
alert("end of introduction");
});

这样写并没有什么错误,但是此时直接调用开始方法 introjs.start() 你会发现,代码根本不会执行,这是为什么呢?

通过查看源码(如下)就很容易发现问题所在,当我们增加事件的时候,他会给 this 中 _introCompleteCallback 赋值,然后返回有事件的 this ,这个时候如果我们不接住这个变量的话,默认的 introJs 肯定没有这些事件的。

1
2
3
4
5
6
7
8
oncomplete: function(providedCallback) {
if (typeof (providedCallback) === 'function') {
this._introCompleteCallback = providedCallback;
} else {
throw new Error('Provided callback for oncomplete was not a function.');
}
return this;
}

成果图

最后附一张成果图

image

原文地址: http://pqsky.me/2017/04/12/原创-Intro-js使用心得

MarkDown排版标准(转)

标签(空格分隔): 排版 MarkDown 排版标准


之前有不少人在我公众号给我留言,说看我的排版很舒服,求指导。我自己在我的小密圈中也一直强调排版的重要性,很多圈友发布的动态无一排版都太烂,为此,在这里写下了这么一篇排版指南,我相信对不少人都有很大帮助。

1、空格

我每次看到网页上的中文字和英文、数字、符号挤在一起,就会坐立不安,忍不住想在他们之间加个空格。

「有研究显示,打字的时候不喜欢在中文和英文之间加空格的人,感情路都走得很辛苦,有七成的比例会在 34 岁的时候跟自己不爱的人结婚,而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。」

  • 中英文之间需要加空格

eg. 大家可以搜索公众号 AndroidDeveloper 或者 googdev 关注我。

  • 中文与数字之间需要加空格

eg. 不知不觉,我都快 30 岁了。

  • 数字与单位之间需要加空格

eg. 我有一块 20 TB 的硬盘,鬼知道我是怎么用完的。

  • 完整的英文整句时标点与单词之间需要加空格

eg. Stay hungry, stay foolish.

但是也有一些例外。

  • 度的标志、百分号不加空格

eg. 今天气温有 30° 的高温。
eg. 据统计,关注公众号 AndroidDeveloper 的读者中有 80% 是长得好看的。

  • 全角标点与其他字符之间不加空格

eg. 大家好,我是 dandelion,请多多关照。

2、 标点

说到标点,不得不说下全角和半角,很多人可能不了解全角和半角的概念,这里顺便介绍下。

全角和半角是英文和中文的编码规范不同遗留下的问题,简单来说,全角占两个字节,半角占一个字节,你可以理解成中文汉子是全角,英文字母是半角,不过半角全角主要是针对标点符号来说的,中文标点占两个字节,英文标点占一个字节。体现在排版上的差异就是,全角字符屏幕打印宽度是两个,而半角字符屏幕打印宽度是一个,如中文逗号和英文逗号他们的显示分别是「,」和「,」。

  • 使用全角中文标点

中文排版中所有的标点都应该使用中文全角中文标点

eg. 大家好,我是 dandelion。

  • 遇到英文整句、特殊名词时使用半角标点。

eg. 乔布斯说过:「Stay hungry, stay foolish.」
eg. Facebook, Inc.

  • 使用直角引号

我国国家标准要求弯引号,但是个人建议在新媒体排版时使用直角引号。

eg. 你竟然不知道「帅比张」?

如果引号再使用引号使用直角双引号。

eg. 我质问他,「你难道忘记『帅比张』了么?」

3、 其他

初以上之外,还有一些其他标准推荐大家使用的。

  • 英文名词首字母尽量大写

eg. Google、Android、Facebook

  • 专有名词使用正确的大小写

eg. GitHub、iOS、iPhone 6S、MacBook Pro

  • 首行不要缩进

这点可能有人不同意,但是我要在这里解释下,在说明之前我们必须弄明白「首行缩进」的目的是什么。

「每段之前空两格」是我们从小学写作文就养成的习惯,也是正式文体的格式要求,其目的是为了区分自然段。

但是像我们现在接触的阅读,都是没有固定的格式要求的,如微信公众号、电子文档等,所以大家一般都采用「空出一行」进行自然段与自然段之间的区分,这种写作方式非常省事,而且很整齐。

所以,我认为这种应该是最科学的方式,只要没有明确的格式要求,写作的排版无须首行缩进。

最后,你可能会问,以上这些原则是业界标准么?我不敢保证,但是你看下 Apple 中国,Microsoft 中国官方网站的排版,基本都是使用以上排版标准。

注:本文来源以丢失,如侵犯的作者权益,请与我联系。