超簡単にモダンな感じを実現できる『Smoke』を使ってみた #JavaScript

bootstrapにモダンな機能を追加してくれるsmokeを触ってみた。

追加されるモダンな機能

smokeでは

バリデーション
通知
プログレスバー
フルスクリーン
パネル
ヘルパー

という機能を提供しています。
だいたい言葉どおりの機能ですが、ヘルパーがあんまりピンと来ませんでした。

どうも、フォームで入力した値を通知で知らせるっぽい？？

今日は、この中から『フルスクリーン』と『プログレスバー』を実装してみました！！

準備

ダウンロードページの説明に従ってダウンロードしましょう。

ファイル構成はこんな感じになっています。
jQueryとBootstrap3をダウンロードしていい感じに追加して下さい。

smoke/
  ├── css/
  │   ├── smoke.css
  │   └── smoke.min.css
  ├── js/
  │   ├── smoke.js
  │   └── smoke.min.js
  └── lang/
      ├── es.js
      └── es.min.js
      ├── de.js
      └── de.min.js

/smoke以下に、おもむろにhtmlを追加しましょう。

<!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>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/smoke.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hola Mundo!</h1>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/smoke.min.js"></script>
    <script src="lang/es.min.js"></script>
  </body>
</html>

準備おわり！

フルスクリーン

フルスクリーンボタンを設置してみる。

htmlを追加。

<div class="panel panel-default example">
  <div class="panel-heading">
    <h3 class="panel-title">Smoke Fullscreen</h3>
  </div>
  <div class="panel-body text-center">
    <a href="#" class="btn btn-info" id="fullscreen"></a>
  </div>
</div>

　

cssを追加。

body {
  background-color: #222;
}

.example {
  max-width: 630px;
  margin: 50px auto;
}

jsを追加。

$(function(){
  $('#fullscreen').smkFullscreen();
});

そうすると、こんな感じの画面になり、水色のボタンを押すと、、、

↓どーん！

となるはずが何か画面下部が真っ白に、何でだ？？

ま、まぁフルスクリーンにはできたのでよしとしよう。

プログレスバー

ページの上部で左から右にみょーんってなるプログレスバーをよく見かけるようになりました。

あれも、smokeなら簡単実装できます。

まずはhtmlを追加。

<div class="panel panel-default example">
  <div class="panel-heading">
    <h3 class="panel-title">Smoke Progressbar</h3>
  </div>
  <div class="panel-body text-center">
    <a href="#" class="btn btn-info" id="btnProgressBar">Start</a>
  </div>
</div>

次に、jsを追加。

$('#btnProgressBar').click(function(event) {
  event.preventDefault();
  $.smkProgressBar({
    element: 'body',
    status: 'start'
  });
  setTimeout(function() {
    $.smkProgressBar({
      element: 'body',
      status: 'end'
    });
  }, 1000);
});

elementにプログレスバーを実装する要素を指定、statusでstartとnedを指定してコントロールするようですね。
　　

結果はこんな感じ（静止画ですが、、、
コピペだけでプログレスバーも簡単に実装できました。

おわり

jQueryちょっとだけ触れるよって人でもモダンなサイトを簡単に構築できるのは凄くよいですね。

他にもいくつか機能がありますので興味ある方はsmokeのサイトでご確認下さい。