JavaScript

BootstrapとCandlestick.jsでチェックボックスをスイッチ風にデザイン表示する方法

  /

今回は、チェックボックスをより魅力的にするための方法を紹介します。JavaScriptのライブラリcandlestick.jsとCSSフレームワークBootstrapを使って、チェックボックスをスイッチ風にデザインする方法を学びましょう。この手法を使えば、UIが一段と洗練されたものになります。それでは、始めましょう！

Contents

CSSの記述

まず最初に、必要なCSSファイルとJavaScriptファイルを読み込みます。
これには、bootstrap.min.css、font-awesome.min.css、candlestick.cssが含まれます。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="candlestick.css" rel="stylesheet">
<style>
body{
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 16px;
}
h1{
  font-size:18px;
  line-height:1.6em;
  text-align:center;
  padding: 15px 0 25px 0;
}
</style>

HTMLの記述

次に、HTMLを記述します。以下のコードでは、スイッチ風にデザインされたチェックボックス（class=”js-candlestick”）を3パターンと、チェックボックスをリセットするボタン（id=”candle-reset”を用意します。

<h1>candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示してます。<br>以下はチェック済み（緑）と未チェック（赤）状態です。「リセット」ボタンをクリックするとチェックボックスをリセットします。</h1>


<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <input class="js-candlestick" type="checkbox" name="test" value="off" id="test">
        </div>
    </div>
</div>

<br>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <input class="js-candlestick" type="checkbox" name="truc[]" value="on" id="truc" readonly>
        </div>
    </div>
</div>

<br>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <input class="js-candlestick" type="checkbox" name="machin" value="on" id="machin">
        </div>
    </div>

<br>

    <div class="row">
        <div class="col-xs-12">
            <a href="#" id="candle-reset" class="btn btn-danger">リセット</a>
        </div>
    </div>
</div>

JavaScriptの記述

最後に、必要なJavaScriptファイルjquery.min.js（v2.2.4）、bootstrap.min.js、hammer.min.js、jquery.hammer.js、candlestick.jsを読み込み、チェックボックスをスイッチ風に動作させるためのコードを記述します。
$(“チェックボックスエリア”).candlestick({オプション})を記述します。オプションではチェックボックスのスワイプに対応、チェック状態等を設定します。$(“チェックボックスエリア”).candlestick(‘reset’)でチェック状態をリセットします。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="hammer.min.js"></script>
<script type="text/javascript" src="jquery.hammer.js"></script>
<script type="text/javascript" src="candlestick.js"></script>
<script type="text/javascript">
    jQuery.noConflict();

    jQuery(function($) {
        $(".js-candlestick").candlestick({
            swipe: {
                enabled: true,
                transition: true
            },
            on: 'on',
            off: 'off',
            nc: 'default',
            allowManualNc: false
        });

        $('#candle-reset').on('click', function(e) {
            e.preventDefault();

            $(".js-candlestick").candlestick('reset');
        });
    });
</script>

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するデモページ

実際に動作するデモページも用意しましたので、以下のリンクから確認してください。

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するデモページ

ソース元：candlestick

このプロジェクトのソースコードはGitHubで公開されています。興味のある方はぜひチェックしてみてください。

candlestick

まとめ

以上が、candlestick.jsとBootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法です。これにより、より視覚的に魅力的なUIを作成することができます。是非試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

カスタムチェックボックス チェックボックス Bootstrap candlestick.js
関連記事