Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke

サイト構築 -JavaScript

Post on:2015年6月1日

sponsorsr

Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。

Bootstrapの対応バージョンは、3.xです。

Smoke
Smoke -GitHub

Smokeの使い方
Smokeのデモ

Smokeの使い方

Smokeの使い方は、簡単です。
Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。

Bootstapのコードをベースにした最小構成は、こんな感じです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic template</title>

<!-- Bootstrap (necessary for Smoke CSS plugins) -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Smoke -->
<link href="css/smoke.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--&#91;if lt IE 9&#93;>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!&#91;endif&#93;-->
</head>
<body>
<h1>Hola Mundo!</h1>

<!-- jQuery (necessary for Smoke JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Bootstrap (necessary for Smoke JavaScript plugins) -->
<script src="js/bootstrap.min.js"></script>
<!-- Smoke -->
<script src="js/smoke.min.js"></script>
<script src="js/es.min.js"></script>
</body>
</html>

Smokeのデモ

デモページでは、各機能の動作とそれらを実装するコードが紹介されています。

フォームのバリデーション

フォームの未入力チェック、メールアドレスチェック、入力した文字のチェック、パスワードの強度チェック、同じ値が入力されたチェックなどがあります。

コード

未入力チェックだと「required」を加え、スクリプトをちょっと記述するだけ。

<form role="form">
  <input type="text" required>
  <input type="checkbox" required>
</form>
<script>
if( $('#form').smkValidate() ){
    // Code here
}
</script>

アラート

インフォメーション、エラー、サクセスの情報をアニメーションで表示し、表示時間も指定できます。

コード

アラートの実装も非常に簡単です。

<script>
// Alert Success
$.smkAlert({text:'Alert type "success"', type:'success'});
// Alert Success 10 seconds
$.smkAlert({text:'Alert type "success" time 10 seconds', type:'success', time: 10});
</script>

プログレスバー

ページのデザインの邪魔にならない、シンプルでかっこいいプログレスバー。

コード

プログレスバーは一行でOK。

<script>
$.smkProgressBar({element: 'body', status: 'start'});
</script>

フルスクリーン表示

ボタンをクリックすると、ページを全画面表示にします。

コード

全画面表示用のボタンを設置し、あとはスクリプトを加えるだけ。

<a href="#" class="btn" id="fullscreen"></a>
<script>
$('#fullscreen').smkFullscreen();
</script>

パネル

パネルはコンテンツがアニメーションで開閉するタイプです。

コード

ボタンなどは自動で付与されます。

<div class="panel panel-default example" id="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Smoke Panel</h3>
  </div>
  <div class="panel-body text-center">
  </div>
</div>
<script>
$('#panel').smkPanel({
  hide: 'full'
});
</script>

ヘルパー

URLや日付、ユーザーが入力した情報などをパネルで表示します。

コード

日付だとこんな感じに。
「text: date」を変更するだけで、さまざまな情報を表示します。

<div class="panel panel-default example">
  <div class="panel-heading">
    <h3 class="panel-title">Smoke Date</h3>
  </div>
  <div class="panel-body">
    <form role="form">
      <button type="button" class="btn btn-default">Current date</button>
    </form>
  </div>
</div>
<script>
$('button').click(function() {
  var date = $.smkDate();
  $.smkAlert({
    text: date,
    type: 'success'
  });
});
</script>