今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. 指定した時間内に操作がない場合にアラート・リダイレクト「IdleTimeout」 - jQueryプラグイン
  3. 右クリックでメニューを表示「chromeContext」
  4. 表示する位置座標を指定できるポップアップ「bPopup」
  5. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」

スライド式のカラーピッカー「Bootstrap Color Picker Sliders」

スポンサーリンク

Bootstrapを使ってスライド式のカラーピッカーを実装するプラグイン「Simple Tagger」を紹介します。

jQueryプラグイン「Bootstrap Color Picker Sliders」

このプラグインを使えば、簡単にスライド式のカラーピッカーを設置することができます。

カラーが表示されているフォームをクリックすると、「R」「G」「B」の3つのスライダーがふわっと表示されるので、スライダーを動かしながららさまざまな色を作成・確認することができます。

スポンサーリンク

デモで、カラーピッカーの挙動を確認してみてください。

「Bootstrap Color Picker Sliders」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Bootstrap Color Picker Slidersのデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Color Picker Sliders - jQuery Plugin Demo</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap.colorpickersliders.css" rel="stylesheet" type="text/css" media="all">

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/tinycolor.js"></script>
<script src="js/bootstrap.colorpickersliders.js"></script>

</head>
<body>
<div class="container">

<h1>Bootstrap Color Picker Sliders のデモでーす。</h1>
<p>▼フォームを選択し、色をいろいろ変えてみてください。</p>

<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="default" value="#7f7f7f">
</div>
</div>
</div>

<script>
$("input#default").ColorPickerSliders({
    placement: 'bottom',
    swatches: false,
    order: {
        rgb: 1
    }
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)