文档章节

AngularJS 插件 ngOnboarding 使用笔记

wuguohao
 wuguohao
发布于 2015/12/08 17:45
字数 640
阅读 38
收藏 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'});
})

(未完待续)


最后要说的话


© 著作权归作者所有

共有 人打赏支持
wuguohao
粉丝 0
博文 2
码字总数 1088
作品 0
大连
程序员
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular中ui-grid的使用详解

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

半指温柔乐
08/05
0
0
读书笔记“使用AngularJs开发下一代web应用”

国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html 源码下载地址https://github.com/shyamseshadri/angularjs-book Angular SEO http://www.yearofmoo.com/2012/11/angula......

lilugirl
2014/01/06
0
0
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 公司女同事约我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享水木年华的单曲《蝴蝶花(2002年大提琴版)》 《蝴蝶花(2002年大提琴版)》- 水木年华 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
2分钟前
0
3
Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
今天
5
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
3
0
docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
今天
4
1
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部