達成するためのガイド機能

交換基のフロントエンドへようこそ知識獲得の動画のやり取り:749 539 640

背景:新しいウェブサイトのリリース、私たちは、新しい機能を操作したり、解放するためにユーザーを導くために必要なユーザーに示す必要があります

実装:付きdriver.js サードパーティのライブラリを達成するために、

デモ:以下のスタイル

 

 実装:サンプルコードを見るためにクリック

 APIの紹介:

。1つのconst =ドライバーの新しい新しいドライバ({
 2    クラス名: 'スコープクラス'、         // カスタムクラス名を入れて
3。    アニメーション:trueに// アニメーションかどうか、デフォルトのtrueに
4。    不透明度:0.75、                     // 背景透明度(0 )のみポップアップがカバーしていないを表す
5。    パディング:10、                       // 距離要素のエッジの周りから
6。    allowClose:trueに// ONをクリックするか、しませ閉じる必要がありますをオーバーレイ内のモデルタイプ
。7    overlayClickNext:falseに//オーバーレイは移動次の中のモデルタイプONクリックする必要があります
8。    doneBtnText:[完了'、               // ボタンのテキストの終わり
9。    closeBtnText:「閉じる」、             // 閉じるボタンのテキスト
10    stageBackground:「#FFFFFF」は、        // 背景色は、Elementザ・のために強調表示の後ろのために上演しました
11    nextBtnText: '次へ'、               // 次の文字
12    prevBtnText: '前の'           // 前のテキスト
13    showButtons:// Doがでフッターコントロールボタンを表示しない
14    keyboardControl:trueに// キーボード(近くに脱出、移動には矢印キーを)を介して制御できるように
15    {}、:scrollIntoViewOptions         // 私たちは、あなたがどんなたい場合は、ここでそれのためのオプションを渡す、 `のscrollIntoView()`可能な場合を使用して
16    onHighlightStarted:(要素) => {}、// 要素が強調表示されようとしているときに呼び出さ
17    onHighlighted:(要素)=> {}、       // 要素が完全に強調表示されるときに呼び出さ
18    onDeselectedを:(要素)=> {}        // 場合エレメント呼び出さ選択解除された
19    (エレメント)=> {}:onReset             // オーバーレイがクリアされようとしているときに呼び出さ
20   onNext:(要素)=> {}、                     // 任意のステップに次のステップに移動するときに呼び出さ
21    onPrevious:(要素)=> {}、                 // 任意のステップで、前のステップに移動するときに呼び出さ
22 });

 

 

 

 

おすすめ

転載: www.cnblogs.com/wangzhichao/p/12054598.html