javascript: The Best Guided Tour Plugin

Best Tour Plugins To Guide Visitors Through Your App
https://yonkov.github.io/post/display-shepherd-only-once/
https://www.jqueryscript.net/blog/best-guided-tour.html
https://whatfix.com/blog/react-onboarding-tour/
https://github.com/shipshapecode/shepherd
https://github.com/wytxer/shepherd-vue
https://shepherdjs.dev/docs/index.html
https://shepherdjs.dev/
https://kamranahmed.info/driver.js/
https://github.com/kamranahmedse/driver.js

 

https://philipwalton.github.io/polyfill/
https://github.com/philipwalton/polyfill/
https://polyfill.io/v3/api/
https://github.com/JakeChampion/polyfill-library
https://github.com/inexorabletash/polyfill/
https://github.com/yonkov/Simple-Tour-Guide

 

https://github.com/usablica/intro.js
https://github.com/webcomponents/webcomponentsjs
使用babel.js 和 polyfill.js 使IE浏览器兼容ES6

 

 

// author: 
//from https://yonkov.github.io/post/display-shepherd-only-once/

const tour = new Shepherd.Tour({
    defaultStepOptions: {
        scrollTo: true,
        cancelIcon: {
            enabled: true,
        },
        useModalOverlay: true,
    }
});

//Construct the steps
const steps = [{
        title: 'My Awesome Tour Guide : Step One',
        text: 'This step is attached to the bottom of the <code>header</code> element.',
        buttons: [{
            text: 'Next',
            action: tour.next
        }],
    },

    {
        title: 'My Awesome Tour Guide : Step Two',
        text: 'This step is attached to the bottom of the <code>.entry-content</code> element. If no such element is found, the step appears in the center of the screen.',
        buttons: [{
                text: 'Back',
                action: tour.back
            },
            {
                text: 'Finish',
                classes: 'shepherd-button-close',
                action() {
                    // Dismiss the tour when the finish button is clicked
                    dismissTour();
                    return this.hide();
                }
            }
        ]
    },

]

tour.addSteps(steps);

function dismissTour() {
    if (!localStorage.getItem('shepherd-tour')) {
        localStorage.setItem('shepherd-tour', 'yes');
    }
}

// Dismiss the tour when the cancel icon is clicked. Do not show the tour on next page reload
tour.on('cancel', dismissTour);

// Initiate the tour
if (!localStorage.getItem('shepherd-tour')) {
    tour.start();
}

　　

 

 

 输入包名称，打上两个勾，引用的包，就可以加载上

https://learn.microsoft.com/en-us/visualstudio/install/create-an-offline-installation-of-visual-studio?view=vs-2022
https://thomaslevesque.com/2021/11/12/building-a-project-that-target-net-45-in-visual-studio-2022/
https://dotnet.microsoft.com/zh-cn/download/visual-studio-sdks