Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke
Post on:2015年6月1日
sponsorsr
Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。
Bootstrapの対応バージョンは、3.xです。
Smokeの使い方
Smokeの使い方は、簡単です。
Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。
Bootstapのコードをベースにした最小構成は、こんな感じです。
[html]
Hola Mundo!
[/html]
Smokeのデモ
デモページでは、各機能の動作とそれらを実装するコードが紹介されています。
フォームの未入力チェック、メールアドレスチェック、入力した文字のチェック、パスワードの強度チェック、同じ値が入力されたチェックなどがあります。
コード
未入力チェックだと「required」を加え、スクリプトをちょっと記述するだけ。
[html]
[/html]
インフォメーション、エラー、サクセスの情報をアニメーションで表示し、表示時間も指定できます。
コード
アラートの実装も非常に簡単です。
[html]
[/html]
ページのデザインの邪魔にならない、シンプルでかっこいいプログレスバー。
コード
プログレスバーは一行でOK。
[html]
[/html]
ボタンをクリックすると、ページを全画面表示にします。
コード
全画面表示用のボタンを設置し、あとはスクリプトを加えるだけ。
パネルはコンテンツがアニメーションで開閉するタイプです。
コード
ボタンなどは自動で付与されます。
[html]
Smoke Panel
[/html]
URLや日付、ユーザーが入力した情報などをパネルで表示します。
コード
日付だとこんな感じに。
「text: date」を変更するだけで、さまざまな情報を表示します。
[html]
Smoke Date
[/html]
sponsors
