@nqounetです。

またまたお知らせ系です。

ファイルサイズは小さいですが、既存のライブラリを活かした良い作りのライブラリだと思います。

bootstrapを使っているなら手軽ですね。

名前のままですが

bootstrapと同じテイストのお知らせライブラリです。

異色のblackglossが良い味を出しています。

使い所は難しいと思いますが…。

しかし、bootstrapはいろいろなコンポーネントがありますが、何故かnotificationはないんですよね。

まあ、実際のところ、alertやmodalを使えば用は足りるわけですが、さりげない通知手段はないんですよね。

超多機能CSS and JavaScriptフレームワーク

bootstrapもすべての機能を使おうと思うと大変というか、気づかないパターンもあります。

特に、JavaScriptに至ってはこんな使い方もありか、という使い方もできるのが裏ワザっぽくて良いですね。

先日発見したのは、closeボタン（というかdata-dismiss="alert"）についてです。

てっきりalertにしか効かないと思っていたのですが、親要素を消す能力もあります。（v3.1.1で確認済み）

例えばこんな感じです。

1
2
3
4
5
6

<div class="jumbotron fade in">
    <button data-dismiss="alert">&times;</button>
    <h1>'Allo, 'Allo!</h1>
    <p class="lead">Always a pleasure scaffolding your apps.</p>
    <p><a class="btn btn-lg btn-success" href="#">Splendid! <span class="glyphicon glyphicon-ok"></span></a></p>
</div>

data-dismiss="alert"がついたボタンの親要素のclassにfade inを追加しておきます。

変なところにxボタンが表示されますが、そのボタンを押すとjumbotronのエリアが消えます。

ソースコードリーディング

ソースコードを読んでいると、変な書き方をしているようにも見えるのですが、考えたこともなかった使い方があって勉強になりますね。

基本的な文法は、本を読むのが良いと思いますが、そこから先はウェブのほうが情報が豊富です。

最新の情報や、素晴らしいテクニックが惜しげも無く公開されています。

私の場合は、以前、勉強会のために買った本以外は、全てウェブの情報でまかなっています。

ちなみに買った本というのはこちらです。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・jQueryまで

posted with amazlet at 14.05.23

山田 祥寛 技術評論社 売り上げランキング: 7,518

Amazon.co.jpで詳細を見る

改めて読んでみると、なかなか良いことを書いていますね。

この当時、JavaScriptを基本からやり直したいと思っていて、でも普通の入門書はチョットね…というような心理状態の時に、たまたま勉強会のテキストで使う、ということで購入して勉強会へ参加しました。

良い本を紹介してもらったと思います。

参考になる資料

• Twitter Bootstrap Notifications, from Nijiko Yonskai
• goodybag/bootstrap-notify