Bootstrapで構築したサイトに、簡単に便利機能がつけられるjQueryプラグイン「smoke」
Contents
Bootstrapで構築したサイトに、簡単に便利機能がつけられるjQueryプラグイン「smoke」
Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインをご紹介します。
アラートやフルスクリーンなど、6つの機能を簡単なコードで実装することができます。
■使い方
bootstrapに加え、jQuery本体と、ダウンロードしたsmokeのcssとjsファイルを読み込みます。
[HTML]
■Form Validation
必須項目やメール、数字、パスワードなど、さまざまな入力チェックができます。
使い方は簡単。
まず、<form>要素の中にform-groupクラスを付与したdivを置き、その中に入力項目を入れます。
また、<input>要素にsmk-type属性を付け、実行コードを記述します。
尚、実行コードはsmoke.jsの読み込み行より後に記述します。
例)数字の入力チェック
[HTML]
[コード]
■Notificaitons
エラーや決定前の確認メッセージなどを表示させます。
オプションで、メッセージの表示時間を設定することもできます。
確認ボタンのクラスはレイアウトを指定するものなので、なくても機能には影響しません。
[HTML]
確認ボタン [コード] $('#btnConfirm').click(function(e) { e.preventDefault(); $.smkConfirm({ text: 'Are you sure?', accept: 'Accept', cancel: 'Cancel' }, function(e) { if (e) { $.smkAlert({ text: 'Confirm', type: 'success' }); } }); });
■Progressbar
ページ上部にプログレスバーを表示させます。
画像では少し分かりにくいですが、白いボックス上部の青いラインがバーで、進捗にあわせて右に進みます。
例)
[HTML]
Start
[コード]
$('#btnProgressBar').click(function(event) {
event.preventDefault();
$.smkProgressBar({
element: '.example',
status: 'start' });
setTimeout(function() {
$.smkProgressBar({
element: '.example',
status: 'end'
});
},
1000);
});
■Fullscreen
ボタンクリックで、フルスクリーン表示にします。
例)
[HTML]
[コード]
$('#fullscreen').smkFullscreen();
■Panel
シンプルなパネルを表示させます。
右上の「-」ボタンクリックで、アニメーションしながら開閉する機能も付いています。
例)
[HTML]
パネルのタイトル
パネルの中身
[コード]
$('#panel').smkPanel({ hide: 'full' });
■Helpers
URLや日付を取得し表示します。
例)URLを表示させる場合
[HTML]
[コード]
$('button').click(function() { var url = $.smkGetURL(); $.smkAlert({ text: url, type: 'success' }); });
いかかでしょうか。
一つの機能ごとにプラグインを実装しなくても、これ一つでよく使う機能がまとまっているので、とても便利です。
デザイン性にも優れているので、使いやすいと思います。
興味があればぜひ、Bootstrap導入サイトで試してみてください。