candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法｜DAD UNION

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法をご紹介します。

Contents

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するCSS記述
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するHTML記述
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するJavaScriptの記述
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するデモページ
ソース元：candlestick

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するCSS記述

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

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する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>

candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する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>