AngularJS 插件 ngOnboarding 使用笔记

背景

最近由于项目需要，需要有一个用户引导的功能在用户第一次登陆的时候，最初的考虑是使用Intro.JS(http://usablica.github.io/intro.js/)。



实现的项目如上图。东西很好但是这个控件是基于JQuery的控件。我们的项目是基于AngularJS框架的，就得使用IntroJS的AngularJS版本()，这样一来为了实现这个功能，添加了太多的依赖，我只想说，不值得。

然后就是本文的主题了，有一款基于AngularJS框架的用户引导控件ngOnboarding，小巧实用，首先提供官方的Github link: https://github.com/adamalbrecht/ngOnboarding. 然后和大家分享一下使用中的技巧。

Demo

作者提供了一个简单直观的Demo :http://adamalbrecht.github.io/ngOnboarding/

大家需不需要这个，点开开一眼就好了。===

基本实用

由于这个插件很小巧很轻量，所以使用也很简单了。

首先在html或者在router中引入需要的依赖文件，只有两个，HTML的引入代码如下

<link href="******/ngOnboarding-master/dist/ng-onboarding.css" rel="stylesheet" type="text/css"/>
<script src="******/ngOnboarding-master/dist/ng-onboarding.js" type="text/javascript"></script>

接着就是大家熟知的往Angular APP中添加相关的模块

app = angular.module("myApp", ["ngOnboarding"])；

最后最简单的使用配置就是直接定义好所需要显示的引导步骤

$scope.onboardingSteps = [
{
title: "Welcome!",
position: "centered",
description: "Welcome to my app!",
width: 300
},
{
title: "Account Setup",
position: "right",
description: "This is the form for configuring your account.",
attachTo: "#account_form",
position: "bottom"
}
];

定义好这些，是时候在html中加入相关的标签了，在这我们只用最简单的配置

<onboarding-popover enabled="onboardingEnabled" steps="onboardingSteps" on-finish-callback='myCallbackFunction' step-index='onboardingIndex'></onboarding-popover>

配置选项

Title: 弹出提示
3ff0
框的标题内容

description: 弹出提示框的显示内容（可以包括HTML代码）

attachTo: 用于定位指定页面元素的CSS选择器

position: 弹出提示框相对于指定元素的位置，可以设置为"left","right","top","bottom","centered",除了"centered",其余参数都需要配置attachTo属性

width: 弹出框的宽度，默认宽度为内容的大小

height: 弹出框的高度，默认高度为内容的大小

top, right, bottom, left: 设置弹出框的具体坐标

xOffset: 弹出框相对于选定元素的x轴偏移量

yOffset: 弹出框相对于选定元素的y轴偏移量

全局配置

我们可以通过config的方式在AngularJS APP启动时对Onboarding做一些全局的配置

app.config(function(ngOnboardingDefaultsProvider) {  ngOnboardingDefaultsProvider.set('option', 'value');  // Or with a hash
ngOnboardingDefaultsProvider.set({option: 'value', option2: 'value2'});
})

（未完待续）

最后要说的话