交換基のフロントエンドへようこそ知識獲得の動画のやり取り: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 });