intro.js

问题 I'm not able to start the intro for elements only with class 'case_event_intro' but when I do introJs(".case_event_intro").start(); nothing happens, even though there are elements with that class and with the intro att. defined (data-intro and data-step). The elements have also other classes apart case_event_intro. Could that be the problem? Are there any other conditions to make the intro work for only some elements with a given class? See this screen capture. 回答1: In current version of

问题 I am using introJS to have a user guide. I can show various features, however, i want to add a directive to the markup e.g: $scope.IntroOptions = { steps: [ { element: "#step1", intro: "Click the button: <button my-directive>Test Directive</button>", position: 'left' } ], With the above, i can see the text 'Click the button' plus a default button. myDirective.js var myDirective = function () { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() {

问题 I want to have two separate tours in a single webpage using introJs. But while doing this, data-steps of one tour is coinciding with the other tour. 回答1: Set up different instances and steps and call them intro1 and intro2 (or whatever else you want). You can then trigger them independently as intro1.start() and intro2.start() See the code to set up the steps below: var intro1 = introJs(); intro1.setOptions({ tooltipPosition : 'top', steps: [ { element: '#intro1_step1', intro: 'Welcome to

问题 i am trying intro.js to get working with my ionic 3 angular app. the steps i did is: install: npm install intro.js --save then in my index.html i have <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script> in my home.ts import introJs from 'intro.js/intro.js'; constructor() { console.log('Hello DynamicHomeComponent Component'); this.expanded = false; //

问题 I am absolute begginer with JS, Please check my code, I am not able to call a function between two steps of intro.js. For now I am just trying to show alert but failed. <script type="text/javascript"> var introguide = introJs(); $(function(){ introguide.setOptions({ steps: [ { element: '#chaman', intro: 'This is step1', position: 'top', onchange: function(){ //do something interesting here... alert("Want to call function after this step , no alert showing "); }, onbeforechange: function(){ }

问题 I have a button, once I click on that button bootstrap modal will appear and then intro.js should highlight that modal. This is my requirement. But it's not working like that. Once I click on that button modal is appearing but intro.js is not highlighting, if I press F12 it's highlighting. This is the code I've written: var introInstance=introJs(); introInstance.onbeforechange(function(targetObj) { switch(targetElementIndex){ case 1: $('#productPlanDiv').modal(); break; }; }); How can I fix

问题 I want to use intro.js with more than two pages. Is it a simple way to do it? 回答1: Yes, you can. If you look at code for intro.js example with multiple pages https://github.com/usablica/intro.js/tree/master/example/multi-page you can see that first page has code that redirects to second page after user click the button: <script type="text/javascript"> document.getElementById('startButton').onclick = function() { introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {

问题 I started to using the useful Intro.js library in my project, but after few months use I updated it and found that the license changed on 08/03/2016. The library is definitely open source and free software, but at the same time if I want use it for commercial use it seems I need to pay a license fee. Why is this required if the code is open source? Maybe I'm missing something because I'm new in the license use world. 回答1: I'm Afshin, the author of Intro.js Intro.js is open-source and it will

问题 So IntroJS works off of the data-intro and data-step attributes. So for instance my logo looks like this: <h1 id="logo" data-step="1" data-intro="Welcome to MyApp, where you can start creating an album for generations! Let us help you get started."> But for step 3 it is on an element that when pressed, the next step should be on the modal that would appear if the element in Step 3 was pressed. I have this as my Step 4 which doesn't work: <div class="popup" id="add-images-step-1" data-step="4"

问题 Does anyone know how to add an step to intro.js that can open a menu when going to the target element. I have button on the left corner of my website. When user click that button a menu will be displayed. I could not find a way in intro.js to open that menu when intro is on that step. 回答1: It should be emphasized that the functionality is not officially supported. Emulate a click on a specific step: After investigating how to emulate a click when IntroJS is in a specific step see: https:/