intro.js官方示例改变

最新推荐文章于 2024-04-27 12:06:52 发布
最新推荐文章于 2024-04-27 12:06:52 发布
阅读量4.8k 收藏
点赞数
分类专栏： web前端UI 文章标签： web前端ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yumingbeizhan/article/details/18355009
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic usage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
    <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
    <!-- styles -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="demo.css" rel="stylesheet">
    <!-- Add IntroJs styles -->
    <link href="introjs.css" rel="stylesheet">
    <link href="bootstrap-responsive.min.css" rel="stylesheet">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="intro.js"></script>
	<script>
	    $(function(){
		    $("#buttonShow").click(function(e){
			   introJs().setOptions({
			      //对应的按钮
			      prevLabel:"上一步",
				  nextLabel:"下一步",
				  skipLabel:"跳过",
				  doneLabel:"完成",
				  //按照数组中元素的顺序出现每一步引导提示
				  steps:[
				  //element使用jquery选择器类似功能，intro提示的文字，position提示出现的位置left,right,top,bottom
				  {element:'.masthead', intro:'<a href="http://www.csdn.net">点击me</a>',position:'right'},
				  {element:'.span6', intro:'second', position:'right'}
				  ]
			   }).start();//运行介绍
			});
		});
	</script>
  </head>

  <body>

    <div class="container-narrow">

      <div class="masthead">
        <ul class="nav nav-pills pull-right">
          <li><a href="#"><i class='icon-black icon-download-alt'></i> Download</a></li>
          <li><a href="#">Github</a></li>
          <li><a href="#">@usablica</a></li>
        </ul>
        <h3 class="muted">Intro.js</h3>
      </div>

      <hr>

      <div class="jumbotron">
        <h1>Basic Usage</h1>
        <p class="lead" >This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
        <a id="buttonShow" class="btn btn-large btn-success" href="#">Show me how</a>
      </div>

      <hr>

      <div class="row-fluid marketing">
        <div class="span6" >
          <h4>Section One</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Two</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Three</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
          </div>

        <div class="span6">
          <h4>Section Four</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Five</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Six</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

        </div>
      </div>

      <hr>
    </div>
    
  </body>
</html>

baiguodong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue id 编号_vue + intro轻松实现前端新手引导效果
weixin_39955700的博客
01-30 770
同学们在使用某些网站的新版页面的时候，会遇到类似于新手引导的效果，引导用户去了解新版页面的功能或者效果，那么你知道是怎么实现的吗？其实只需要vue + intro.js几步就能实现，赶紧来看一看吧~~~一、效果展示那激动人心的时刻到了，我们如何vue中使用 Intro.js 在呢？二、今天的猪脚Intro.js2.1、Intro.js的安装Intro.js是一个轻量级的js库，用于创建一步一步的产...
JS-Intro:学习JS
06-06
JavaScript，简称JS，是Web开发中的重要脚本语言，用于实现客户端的动态效果和交互。在"JS-Intro"的学习中，我们...在"JS-Intro-master"这个压缩包中，很可能包含了相关的代码示例、练习和教程，供你深入学习和实践。
intro.js设置属性
qyp_slw的博客
01-21 3677
this._options = { /* 下一步按钮的显示名称 / nextLabel: ‘Next →’, / 上一步按钮的显示名称 / prevLabel: ‘← Back’, / 跳过按钮的显示名称 / skipLabel: ‘Skip’, / 结束按钮的显示名称 / doneLabel: ‘Done’, / 引导说明框相对高亮说明区域的位置 / tooltipPosition: ‘bott...
弹窗样式修改，轻松实现弹窗功能
weixin_43312391的博客
10-27 2357
在vue页面中添加弹窗，并自设置弹窗相关样式，不使用element UI 也能轻松实现弹框。步骤如下： 1.点击“新增成员”按钮出现弹窗： <el-container> <el-button type="text" @click="addMember = true">新增成员</el-button> <el-dialog :visible.sync="addM
如何使用 vue + intro 实现后台管理系统的引导_后台功能点引导
最新发布
2401_84412194的博客
04-27 361
库，用于创建一步一步的产品引导，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出引导，您可以通过几个简单的步骤安装。那激动人心的时刻到了，我们如何vue中使用 Intro.js 在呢？最后我们加入JS代码就可以通过浏览器运行查看效果啦(*￣︶￣)感觉如何，是不是很简单，接下来我们学习如何在VUE项目中使用。最后就是给需要加引导的盒模型加属性就大功告成了。话不多说，咱们先来上一张图看看效果。接着在HTML文件中加入基本结构。找到需要加新手引导的组件，导入。首先我们引入下述文件。
vue 中使用vue-introjs做引导动画
weixin_42333548的博客
03-24 2306
先看页面效果： 1、不做任何样式修改，vue-introjs默认的样式效果如下：可以配置title，跳过，上一步，下一步等 2、修改修改样式，根据自己需求去做效果如下： web端和h5都可以使用，具体用法如下： 一、npm安装 vue-introjs是在Vue中绑定intro.js所使用的。vue-introjs中没有内置intro.js，所以在使用前请确保已安装intro.js。 npm i intro.js npm i vue-introjs 二、webpack配...
简单易上手的引导插件——Intro.js
weixin_44974357的博客
09-21 697
在setOptions里面加入需要引导的dom节点steps: [{👋'},},',}]}).start();Intro.js 会自动查找工具提示的最佳位置，但也可以使用配置 position 显式定义每个步骤的工具提示位置steps: [},}).start();虽然说大小只有10kb，但是intro.js依然可以轻松创建引导教程，它提供了简单的 API，可以根据需要定义步骤、提示文本和高亮显示的元素。
reactjs-intro-examples:Reat.js演示文稿介绍的代码示例
05-02
这个“reactjs-intro-examples”压缩包包含了React.js基础和进阶概念的代码示例，旨在帮助初学者更好地理解和学习React。 1. **React组件**：React的核心理念是组件化。组件是React中的独立、可重用的代码块，它们...
fabric.js-intro:学习fabric.js库
04-28
在"fabric.js-intro-master"这个压缩包中，我们可能会找到一些示例代码、HTML文件和JavaScript脚本，通过阅读和运行这些文件，你可以亲身体验Fabric.js的强大功能，逐步掌握这个库的使用。无论是初学者还是有经验的...
react-intro:React.js 的介绍截屏视频
07-08
React.js 是一个由Facebook开发并维护的开源JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。这个“react-intro”压缩包可能包含了关于React.js的介绍性视频教程，帮助初学者理解并掌握这个强大的前端...
exo-intro-javascript
02-15
在这个压缩包"exo-intro-javascript-main"中，我们可以期待找到一些基础到进阶的JavaScript教程、练习、示例代码或小项目，用于学习和实践。 JavaScript的主要知识点包括： 1. **基础语法**：JavaScript的基础包括...
intro.js酷炫的引导页面插件
09-15
intro.js酷炫的引导页面插件
新手引导 intro.js
晴晴晴的博客
04-21 2770
introJs().setOptions({ prevLabel:"", //上一步骤按钮的文字 nextLabel:"", //下一步骤按钮的文字 skipLabel:'<span class="close"></span>', //退出按钮的文字（可以用html标签） doneLabel:'<span class="close"></...
vue + intro.js 三方库实现新手引导, 新手提示
weixin_42414313的博客
02-06 1233
样式调整 我在组建中直接调整样式,不起作用.考虑到整个系统中只有一个新手引导.所以把样式引到了app.vue中.其中的监听事件是因为场景需要点击键盘方向键可以执行下一步操作,不需要请忽略.我把监听方法放到最后了.实现新手引导,新手提示,动画新颖,用户体验感拉满.
首屏引导页实现-Intro.js(vue3.0 ts)
weixin_43909743的博客
06-21 1393
intro.js vue3 ts
Vue中使用introjs插件实现页面引导效果及设置Options(设置中文显示)示例
BADAO_LIUMANG_QIZHI的博客
09-26 1653
在上面的基础上，实现页面引导/新手指引的效果如下。
vue项目中使用intro.js引导组件
GhostUncledrew-blogs
04-14 2319
使用 yarn 安装 yarn add intro.js 使用 npm 安装 npm install intro.js --save
Intro.js使用方法
baiguodong的专栏
01-16 5788
Intro.js Better introductions for websites and features with a step-by-step guide for your projects. How to use Intro.js can be added to your site in three simple steps: 1) Include i
基于web的introjs
我的blog屋
03-12 867
这里要强调一下，这个是基于web的，我本来想在微信小程序里面使用，但是introjs里面的css样式微信小程序很多不支持。 注意，introjs用于商业是收费的。 参考博客： 官方文档：https://introjs.com https://www.cnblogs.com/shenyixin/p/5266057.html https://www.dowebok.com/35.html 下载代码 下...
angular intro.js 使用
05-25
Angular Intro.js 是一个 AngularJS 模块，用于集成 Intro.js 库，以提供网站或应用程序的新手引导和演示。下面是使用步骤： 1. 安装 Angular Intro.js：通过 npm 安装 Angular Intro.js 模块。 ``` npm install angular-intro.js --save ``` 2. 引入 Intro.js 库：在项目中引入 Intro.js 库，可以通过 npm 安装或直接使用 CDN 引入。 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script> ``` 3. 引入 Angular Intro.js 模块：在 AngularJS 应用程序中引入 Angular Intro.js 模块。 ``` angular.module('myApp', ['angular-intro']); ``` 4. 在 HTML 中使用：在 HTML 中使用指令来添加新手引导和演示。 ``` <div introjs intro-options="options"> <p>这是一个新手引导示例</p> <button ng-click="showStep2()">下一步</button> </div> ``` 上面的代码中，`introjs` 指令告诉 Angular Intro.js 应该在这个元素上启用引导，`intro-options` 属性包含 Intro.js 配置选项，`showStep2()` 是一个 AngularJS 控制器中的函数，用于显示下一个步骤。 5. 在控制器中配置选项和方法：在 AngularJS 控制器中配置 Intro.js 选项和方法。 ``` angular.module('myApp').controller('myCtrl', function($scope) { $scope.options = { steps: [ { element: document.querySelector('#step1'), intro: '这是第一步' }, { element: document.querySelector('#step2'), intro: '这是第二步' } ] }; $scope.showStep2 = function() { introJs().goToStep(2).start(); }; }); ``` 上面的代码中，`steps` 选项包含 Intro.js 步骤对象，每个步骤是一个包含 `element` 和 `intro` 属性的对象。`showStep2()` 函数使用 Intro.js 方法来显示第二步。 以上是 Angular Intro.js 的简单使用方法，可以根据需要进行配置和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值