文档章节

AngularJS 插件 ngOnboarding 使用笔记

GavinWu1991
 GavinWu1991
发布于 2015/12/08 17:45
字数 640
阅读 158
收藏 0

阿里云携手百名商业领袖、技术大咖,带您一探行进中的数字新基建!>>>

背景

最近由于项目需要,需要有一个用户引导的功能在用户第一次登陆的时候,最初的考虑是使用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: 弹出提示框的标题内容

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'});
})

(未完待续)


最后要说的话


© 著作权归作者所有

GavinWu1991
粉丝 0
博文 2
码字总数 1088
作品 0
大连
程序员
私信 提问
加载中

评论(0)

《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
284
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
Angular学习笔记--last_update 20151106

参考来源:http://www.angularjs.cn/tag/AngularJS?p=1&s=50 基本要求:一周搞定33篇学习文章 目标:develop/refactor lms系统angular基本用法 20151106 angular开发指南01~03 学习小结: an...

draem0507
2015/11/03
0
0
angular2+中的变化监测

   最近做公司新项目用的angular7,中碰到了一个很头疼的问题在绑定对象中的数据改变时,页面视图没有跟新,需点击页面中的时间元素后才会更新。以前使用angularJs也经常碰到类似情况,这种...

osc_xgk2otgu
2019/04/13
4
0
Angular 5 升级至Angular 7

根据升级建议,应该先从Angular 5升级至Angular 6,再从Angular 6升级至Angular 7。 本文内容“升级前-升级”适用于想从Angular 5升级至Angular 6的小伙伴; 本文内容“升级后”适用于想从A...

Hermy
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

(人才测评)桌面运维工程师的招聘入职测评方案

桌面运维工程师,作为IT技术支持岗位的一种,不仅要有扎实的技术基础,还要有较强的时间观念意识,同时还应具备较强的逻辑思维能力和人际沟通能力,这样才能称得上一名合格的桌面运维工程师。...

蛤蟆丸子
17分钟前
37
0
JavaFX初探(菜单)

JavaFX初探(菜单) 本节我们介绍如何创建菜单、菜单栏、增加菜单项、为菜单分类,创建子菜单、设置菜单上下文。你可以使用下面的类来创建菜单。 MenuBar MenuItem Menu CheckMenuItem Radi...

whoisliang
21分钟前
14
0
Springboot 系列(四)Spring Boot 日志框架

文章已经收录在 Github.com/niumoo/JavaNotes ,更有 Java 程序员所需要掌握的核心知识,欢迎Star和指教。 欢迎关注我的公众号,文章每周更新。、 注意:本 Spring Boot 系列文章基于 Spring...

未读代码
24分钟前
20
0
26. Go 语言中通道死锁经典错误案例详解

Hi,大家好,我是明哥。 在自己学习 Golang 的这段时间里,我写了详细的学习笔记放在我的个人微信公众号 《Go编程时光》,对于 Go 语言,我也算是个初学者,因此写的东西应该会比较适合刚接触...

王炳明
29分钟前
13
0
SpringBoot 整合 Redis 缓存

1.首先导入使用Maven导入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId></dependency><......

FH-Admin
54分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部