スライド式のカラーピッカー「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>
スポンサーリンク