Drop.js - 実用的な JavaScript ドロップダウンポップアップレイヤー plug-in_html/css

Drop.js - 実用的な JavaScript ドロップダウンポップアップレイヤー plug-in_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:27:40

オリジナル

1327 人が閲覧しました

簡単なチュートリアル

Drop.js は、JavaScript および CSS の実用的なドロップダウンポップアップレイヤープラグインです。このプラグインは Tether.js に基づいてポップアップレイヤーを配置し、さまざまなポップアップレイヤー効果を作成できます。その他の機能:

ページサイズが変更されスクロールすると、ポップアップレイヤーの位置が自動的に更新されます。
ポップアップレイヤーは、GPU アクセラレーションを使用して、ページのスクロールに合わせて位置を調整します。
ポップアップレイヤーはネストできます。
ポップアップレイヤーは要素の12箇所に表示できます。
要素をクリックしたとき、要素上でマウスをスライドしたとき、または要素にフォーカスしたときに表示されるポップアップレイヤーをカスタマイズできます。

デモを見る プラグインをダウンロード

使い方

ポップアップレイヤープラグインはtether.jsプラグインに依存しているためで、ポップアップレイヤープラグインを使用するには、 min.js、drop.min.js、drop-theme-arrows.css ファイルをページに導入します。

初期化プラグイン

ドロップを初期化するには、Drop オブジェクトをインスタンス化する必要があります。

「コンテキスト」をカスタマイズしてドロップを作成することもできます。「コンテキスト」では、ポップアップレイヤーのCSSプレフィックス文字列を指定できます。デフォルトのプレフィックスはdropです。

drop = new Drop({  target: document.querySelector('.drop-target'),  content: '** to the future!',  position: 'bottom left',  openOn: 'click'});

ログイン後にコピー

上記のインスタンス化コードでは、すべてのポップアップレイヤーは、drop-open と Drop-content ではなく、my-drop-open と my-drop-content を介してレンダリングされます。さらに、data-drop で設定されたすべてのプロパティは、data-my-drop で設定されたプロパティに置き換えられます。

設定パラメータ

以下のパラメータはドロップコンストラクタで使用できます。

target: ポップアップレイヤーのターゲット要素を開きます。
コンテンツ: ポップアップレイヤーによって表示されるコンテンツ。次のものが可能です:

DOM 要素

HTML 文字列

HTML 文字列または DOM 要素を返す関数。 content() は、ポップアップレイヤーが開かれるたびに呼び出されます。

このパラメータが設定されていない場合、デフォルトはターゲット要素の data-${classPrefix} (通常は data-drop) 属性の値になります。

位置: ポップアップレイヤーの表示位置。次のいずれかになります:

「左上」

「左中」

「左下」

「左下」 '

'中央下'

'右下'

'右中央'

'右上'

'中央上'

このパラメータが設定されていない場合は、デフォルトでターゲット要素の data-${classPrefix}-position (通常は data-drop-position) 属性の値が設定されます。

openOn: ポップアップレイヤーをトリガーするイベントを指定します。このパラメータが未定義または null に設定されている場合は、ドロップインスタンスの open() メソッドと close() メソッドを手動で管理する必要があります。「always」に設定すると、レンダリング直後にポップアップが開きます。使用可能な値は次のとおりです:

'click'

'hover'

'focus'

'always'

このパラメータが設定されていない場合、デフォルトでターゲット要素の data-${classPrefix} が使用されます。 -openOn(通常は data-drop-openOn) 属性の値。

constrainToWindow: Ruged true に設定すると、要素がビューポートを超えたときに要素を反転するために Tether プラグインのコンテナリストが使用されます。これにより、元々その下にあったポップアップレイヤーが要素の上を反転します。
constrainToScrollParent: constrainToWindow に似ていますが、ターゲット要素の最初のスクロール親: overflow: auto または overflow: スクロールセット、または本体のいずれか最初に来る方の親です。
クラス: ポップアップレイヤーに追加のクラスを追加します。
削除: true に設定すると、ポップアップレイヤーは閉じられたときに DOM から削除され、再び開かれたときに再レンダリングされます。
beforeClose: ポップアップレイヤーを閉じる前にトリガーされるコールバック関数。関数が false を返した場合、ポップアップレイヤーは閉じられません。
hoverOpenDelay: マウスオーバー後にポップアップレイヤーを開くまでの遅延時間 (ミリ秒単位)。
hoverCloseDelay: マウスアウト後にポップアップレイヤーを閉じるまでの遅延時間 (ミリ秒単位)。
focusDelay: フォーカス後にポップアップレイヤーを開くまでの遅延時間 (ミリ秒単位)。
BlurDelay: ぼかし後にポップアップレイヤーを閉じるまでの遅延時間 (ミリ秒単位)。
openDelay: hoverOpenDelay と focusDelay を同時に設定します。
closeDelay: hoverCloseDelay と BlurDelay を同時に設定します。

デフォルトのパラメータ値は次のとおりです:

MyDropContext = Drop.createContext({  classPrefix: 'my-drop'});drop = new MyDropContext({  target: document.querySelector('.my-drop-target'),  content: '** to my new Drop context!'});

ログイン後にコピー

Method

以下のメソッドは、Drop オブジェクトインスタンスを通じて呼び出すことができます。

open(): ポップアップレイヤーを開きます。ドロップオープンクラスがポップアップレイヤーに追加されます。
close(): ポップアップレイヤーを閉じます。ドロップオープンクラスはポップアップレイヤーを閉じます。閉じたポップアップレイヤーはまだ DOM 内にあります。
remove(): DOM からポップアップレイヤーを削除します。
toggle(): ポップアップレイヤーを切り替えます。
isOpened(): ポップアップレイヤーが開いている場合は true を返します。
position(): ポップアップレイヤーの位置を変更します。
destroy(): ポップアップレイヤーを破棄し、すべてのイベントを削除します。

イベント

ドロップインスタンスにはバインドできる次のイベントがあります。