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. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  2. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  3. Expanding Bar Navigation Concept
  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  6. Building a Vertical Timeline With CSS and a Touch of JavaScript

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP