おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

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

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.