overhang.jp

JavaScript

シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

overhang.jsは、通知バーを実装するためのjQueryプラグインです。しかも、シンプルかつクールなデザインです。他にも、プロンプト(動作を誘導するようなもの)や確認の機能も備わっています。カラーデザインも可能なので、ユーザーの目を引くものになります。また、コールバック機能もあるので、「通知をして終わり」なんてことにもなりません。実装もほどよく簡単にできます。それでは、overhang.jsについて詳しく見てみましょう。

overhang.js

デモ

overhang.jsは、jQueryとjQueryUIバージョンの2つに対応しているので、2種類のjQueryを以下のように読み込む必要があります。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

jsファイルと、CSSファイルも読み込みます。

カラーは、青(success)、赤(error)、水色(info)、オレンジ(warn)の4種類があります。初期値は青です。タイプは、通知(info)、プロンプト(prompt)、確認(confirm)から選択できます。

$("body").overhang({
   custom: true,
   primary: "#34495E",
   accent: "#F4B350"
});

「primary」は背景色、「accent」は下線の色を指定しています。

オプションでは、通知バーを自動で閉じる指定も可能です。

overhang.jp

Pilpilプログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」前のページ

夜空に大輪の花を咲かす!Illustratorで花火の作り方次のページ

関連記事

  1. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  2. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  3. Image Gallery Threejs
  4. jQuery Brazzers Carousel Plugin
  5. Grasp Mobile Progress Circle
  6. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP