TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Tour.js – Touring and on-boarding for JavaScript applications

3 点作者 tannerlinsley将近 9 年前

2 条评论

tannerlinsley将近 9 年前
It&#x27;s time for better onboarding tools in web apps. Tour will leave your users wanted more.<p>- Supports single page apps, and complex scrollable content - Responsive &amp; Intelligent - Automagic Tooltip Positioning, it just works. - Promise Driven Events &amp; Hooks for fine-grained control - It&#x27;s very lean for the features it has. 12k gzipped. - Most importantly, Tour does not restyle, change z-indices, or manipulate your DOM elements in any way<p>Give it a try! The beta is already available on NPM CDN:<p><a href="https:&#x2F;&#x2F;npmcdn.com&#x2F;tour@latest&#x2F;dist&#x2F;tour.js" rel="nofollow">https:&#x2F;&#x2F;npmcdn.com&#x2F;tour@latest&#x2F;dist&#x2F;tour.js</a><p><a href="https:&#x2F;&#x2F;npmcdn.com&#x2F;tour@latest&#x2F;dist&#x2F;tour.css" rel="nofollow">https:&#x2F;&#x2F;npmcdn.com&#x2F;tour@latest&#x2F;dist&#x2F;tour.css</a><p>----- Quick JS Demo -----<p>import Tour from &#x27;tour&#x27;<p>const myTour = {<p><pre><code> canExit: true, steps: [{ target: &#x27;#first-element&#x27;, content: &#x27;This is the first step!&#x27;, }, { target: &#x27;.some .other .element&#x27;, content: &#x27;Blah blah blah. I prefer to show up on the right.&#x27;, }, { target: &#x27;#menu-element&#x27;, content: &#x27;I guess this is a menu!&#x27;, }, { target: &#x27;#last-element&#x27;, content: &#x27;It is over! :(&#x27;, }], </code></pre> };<p>Tour.start(myTour)<p><pre><code> .then(() =&gt; { console.log(&#x27;Tour Finished!&#x27;); }) .catch(() =&gt; { console.log(&#x27;Tour Interrupted!&#x27;) }); </code></pre> ------------------------
jsonmaur将近 9 年前
Awesome! Love that it doesn&#x27;t manipulate the DOM at all... that&#x27;s really clever.