jQuery Mobile - Notice Plugin

先日jQuery Mobileの 書籍 を執筆させていただきました。 その中でjQuery Mobileで扱えるプラグインの紹介コーナーがあるのですが、自分でもいくつかプラグインを作ってみてご紹介しています。

このプラグインはAjaxなんかの非同期通信を行った際、成功した場合とエラーが返ってきた場合など、 数秒間画面上部から通知を表示させる事ができるプラグインになります。

リポジトリ

デモ

使い方

プラグインをヘッダにインクルードして

<script src="common/plugin/notice/js/jquery.mobile.notice.js"></script>
<link href="common/plugin/notice/css/jquery.mobile.notice.css" rel="stylesheet" />

あとはJavascriptから呼び出します。

成功の時は

 $.mobile.notice({
   type: 'success',
   title: 'Success',
   content: 'Success content.'
 });

失敗の時は

 $.mobile.notice({
   type: 'error',
   title: 'Error',
   content: 'Error content.'
 });

のように呼び出す事が可能で、引数にそれぞれ値を設定する事でエラー文言や、表示時間など変更する事が可能になります。

jQuery Mobileの本を書きました。

ボタンやリストの作り方などの初歩的な部分から解説する比較的やさしい内容の本になっています。 紹介しているバージョン1.4は以前のバージョンと比べてボタンなどのスタイルの指定がデータ属性ではなくマルチクラスで指定するように変更されていたり、テーマが白黒の2種類に変わったりと、結構変わっている部分があります。よろしければお手に取っていただけますと幸いです。