jQuery 「alertify.js」を使って通知表示、アラートのダイアログを実装するやり方

jQuery 「alertify.js」を使って通知表示、アラートのダイアログを実装するやり方

通知表示、アラートなどを表示させるときに何かいいスクリプトが無いか探してたら、ちょうど良いものがありましたのでalertify.jsを使って実装するやり方を紹介します。

alertify.js

URLhttp://fabien-d.github.io/alertify.js/

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

ファイルをダウンロード

「Download」がありますのでクリックしてください。
「Download」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「Download」をサイトからダウンロードして、zipファイルを解凍します。

データを解凍します

データが入っています。

HTMLに実際に動く記述を書きます STEP4

長いですが、一つ一つ見ていくと難しくはありません。
ベーシックのダイアログの記述です。

「$(“#toggleCSS”).attr(“href”, “css/024/alertify.default.css”);」
このCSSファイルのパスはご自身の環境に合わせてください。

HTMLを設置します STEP5

シンプルです。ボタンを設置するだけで大丈夫です。

CSSファイルを設置します STEP6

解凍したファイルの中に、必要なCSSファイルがあります。

CSSファイルを設置します

「themes」フォルダがあります。

CSSファイルを設置します

「alertify.core.css」「alertify.default.css」のファイルをHTMLに記述します。

こちらもパスはご自身の環境に合わせてください。

jsファイルを設置します STEP7

解凍したファイルの中に、必要なjsファイルがあります。

jsファイルを設置します

「lib」フォルダがあります。

jsファイルを設置します

「alertify.min.js」のファイルをHTMLに記述します。

こちらもパスはご自身の環境に合わせてください。

まとめ

[サンプル] 通知表示、アラートのダイアログjQuery

よくわからなかった人もいるかもしれませんが、サンプルを作りましたのでぜひ試してみてください。

jQuery 「alertify.js」を使って通知表示、アラート、ダイアログを実装するやり方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*