今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. くるくる回る画像ギャラリー「Rondell」
  3. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  4. 文字数に応じてテキストエリア高さを自動調節「autoexpand」
  5. 画像に拡大・縮小ボタンを「Zoomer」

複数のラジオボタンをスライダーに変更「RadiosToSlider」

スポンサーリンク

複数のラジオボタンをスライダーに変更するプラグイン「RadiosToSlider」を紹介します。

jQueryプラグイン「RadiosToSlider」

このプラグインを使えば、入力フォームでよく利用されるラジオボタンをスライダーに変更することができます。

ラジオボタンは小さくてクリックしにくいので、スライダーの方がユーザーには便利かもしれませんね。

スポンサーリンク

それではデモページのスライダーをご覧ください。

「RadiosToSlider」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="RadiosToSlider のデモでーす。">
<title>RadiosToSlider - jQueryプラグイン</title>
<link rel="stylesheet" href="css/radios-to-slider.css">
<style>
#demo {
  width: 500px;
}
</style>
</head>
<body>
<h1>RadiosToSlider のデモでーす。</h1>
<div id="demo">
<input id="option1" name="options" type="radio">
<label for="option1">壱</label>
<input id="option2" name="options" type="radio">
<label for="option2">弐</label>
<input id="option3" name="options" type="radio" checked>
<label for="option3">参</label>
<input id="option4" name="options" type="radio">
<label for="option4">四</label>
<input id="option5" name="options" type="radio">
<label for="option5">五</label>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.radios-to-slider.js"></script>
<script>
$(document).ready( function(){
  $("#demo").radiosToSlider();
});
</script>
</body>
</html>
スポンサーリンク

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